Balsamiq Community Discussion

Adding a status bar to the Browser Component?

Hello

I’m trying to find some docs on the Components and their ‘usage’ … In particular… The Browser Component… Can I add a status bar to the bottom of it or do I need to add a text label to mimic that?

Thanks
Nick

Hey @nmiddleweek,
The Browser control doesn’t contain status bar settings, and you cannot modify standard ones.
What you can do is to create custom Symbol, which contains both the Browser and a label to mimic the status bar.

You can copy-paste the code bellow into your project to have a start:

{
    "mockup": {
        "controls": {
            "control": [
                {
                    "ID": "1",
                    "typeID": "__group__",
                    "zOrder": "0",
                    "measuredW": "1001",
                    "measuredH": "400",
                    "w": "1001",
                    "h": "400",
                    "x": "50",
                    "y": "50",
                    "properties": {
                        "controlName": "Browser with Status"
                    },
                    "children": {
                        "controls": {
                            "control": [
                                {
                                    "ID": "0",
                                    "typeID": "BrowserWindow",
                                    "zOrder": "0",
                                    "w": "1001",
                                    "measuredW": "450",
                                    "measuredH": "400",
                                    "x": "0",
                                    "y": "0",
                                    "properties": {
                                        "verticalScrollbar": "true"
                                    }
                                },
                                {
                                    "ID": "1",
                                    "typeID": "Label",
                                    "zOrder": "1",
                                    "measuredW": "91",
                                    "measuredH": "21",
                                    "x": "10",
                                    "y": "374",
                                    "properties": {
                                        "text": "Connecting to ...",
                                        "size": "13"
                                    }
                                }
                            ]
                        }
                    }
                }
            ]
        },
        "attributes": {
            "name": "New Wireframe 10",
            "order": 1000075.8765653517,
            "parentID": null
        },
        "branchID": "Master",
        "resourceID": "7D73B3B6-9C0D-42E3-B954-E82368FADB89",
        "mockupH": "400",
        "mockupW": "1001",
        "measuredW": "1051",
        "measuredH": "450",
        "version": "1.0"
    },
    "groupOffset": {
        "x": 0,
        "y": 0
    },
    "dependencies": [],
    "projectID": "file:///P:/simple45.bmpr"
}
2 Likes

Hi @nmiddleweek!

We don’t have dedicated docs for each UI control (except some specific ones here) but as @Alexey_Kolchenko mentioned, adding the needed element and creating a Symbol is probably the easiest way for this one.

Any questions, we’re here! :slight_smile:

1 Like