Search code examples
sisense

Can you overlay an image with text using BLOX in Sisense


I want to create a BLOX widget to be used as a banner at the top of my dashboards. The body of the widget contains an image. I want to place some text over that image but I am not finding a way to do that. I can create a second item in the body that contains the text but it is placed below the image. This is the body of my widget. I would appreciate any ideas on how to get the text to overlay the image.

"body": [
    {
        "type": "Container",
        "horizontalAlignment": "center",
        "items": [
            {
                "type": "Image",
                "url": "https://mycompany.com/myimage.png",
                "altText": "Company Name",
                "size": "stretch"
            },
            {
                "type": "TextBlock",
                "id": "DashboardTitle",
                "style": {
                    "color": "#4a0004",
                    "font-weight": "bold",
                    "font-size": 48,
                    "background-color": "white"
                },
                "class": "",
                "text": "Customer Review"
            }
        ]
    }
],

Solution

  • You need to use your image as a background image for the Blox. That will allow you to overlay it with text items. You might need to give the container a background color (rgb(0,0,0,5)) to make the image opaque but that should work for you. B RGDS Hendrik