Forum Discussion

Dennis_M's avatar
Dennis_M
Cloud Apps
03-07-2022
Solved

Blox - Color format words in text string

Hello Sisense Community,

Despite on-line HTML references, I cannot properly code a BloX "text" string to change color of specific words in the text line.  I'm sure this is straightforward coding; can't find an example in other BloX templates.  I have attached picture of widget for reference plus code snippet.  I have so much to learn.  Thanks in advance for your help. - D 

"items": [
                {
                    "type": "TextBlock",
                    "size": "large",
                    "horizontalAlignment": "center",
                    "spacing": "Large",
                    "weight": "default",
                    "text": "Leader: {panel:Leader}",   -- Looking to custom color format {panel: Leader}

                    "style": {
                        "text-align": "center",
                        "font-weight": "default",
                        "font-size": "30px",
                        "background": "#124C87",
                        "color": "white"
                    }
                }
            ]

 

  • Dennis_M 

    One option is to enclose {panel:Leader} within <span> tag:

    "items": [
                    {
                        "type": "TextBlock",
                        "size": "large",
                        "horizontalAlignment": "center",
                        "spacing": "Large",
                        "weight": "default",
                        "text": "Leader: <span style='color:yellow'>{panel:Leader}</span>",
                          "style": {
                            "text-align": "center",
                            "font-weight": "default",
                            "font-size": "30px",
                            "background": "#124C87",
                            "color": "white"
                        }
                    }
                ]

    -Hari

     

2 Replies

Replies have been turned off for this discussion
  • harikm007's avatar
    harikm007
    Data Warehouse

    Dennis_M 

    One option is to enclose {panel:Leader} within <span> tag:

    "items": [
                    {
                        "type": "TextBlock",
                        "size": "large",
                        "horizontalAlignment": "center",
                        "spacing": "Large",
                        "weight": "default",
                        "text": "Leader: <span style='color:yellow'>{panel:Leader}</span>",
                          "style": {
                            "text-align": "center",
                            "font-weight": "default",
                            "font-size": "30px",
                            "background": "#124C87",
                            "color": "white"
                        }
                    }
                ]

    -Hari

     

    • Dennis_M's avatar
      Dennis_M
      Cloud Apps

      Thanks Hari, the simple solution I knew existed but could not find.  Appreciate your quick response. - D