How to make the URL hyperlink which is in the fields value of the table (Dashboard Studio - JSON format)

[SureshkumarD]

Hi Team,

I have generated dynamic URLs using the lookup and add it in the field value of the table. Now I need to make those dynamic URLs as a hyperlink so that we don't want to manually copy and paste the URL in the browser every time. 

I modified the source code as below, but it is working. Please assist on this. Thank you.

"visualizations": {

        "viz_abc123": {

            "type": "splunk.table",

            "options": {

                "count": 5000,

                "dataOverlayMode": "none",

                "drilldown": {

                    "condition": {

                        "field": "URL",

                        "link": "$row.URL|n$"

                    }

                },

                "backgroundColor": "#FAF9F6",

                "tableFormat": {

                    "rowBackgroundColors": "> table | seriesByIndex(0) | pick(tableAltRowBackgroundColorsByBackgroundColor)",

                    "headerBackgroundColor": "> backgroundColor | setColorChannel(tableHeaderBackgroundColorConfig)",

                    "rowColors": "> rowBackgroundColors | maxContrast(tableRowColorMaxContrast)",

                    "headerColor": "> headerBackgroundColor | maxContrast(tableRowColorMaxContrast)"

                },

                "showInternalFields": false,

                "columnFormat": {

                    "Duration(Secs)": {

                        "data": "> table | seriesByName(\"Duration(Secs)\") | formatByType(Duration_Secs_ColumnFormatEditorConfig)",

                        "rowColors": "> table | seriesByName(\"Duration(Secs)\") | rangeValue(Duration_Secs_RowColorsEditorConfig)"

                    },

                    "Duration(Mins)": {

                        "data": "> table | seriesByName(\"Duration(Mins)\") | formatByType(Duration_Mins_ColumnFormatEditorConfig)",

                        "rowColors": "> table | seriesByName(\"Duration(Mins)\") | rangeValue(Duration_Mins_RowColorsEditorConfig)"

                    }

                }

            },

[danspav]

Hi @SureshkumarD,

To get the drilldown working from a field in a table you can use the drilldown options:

"eventHandlers": [
   {
      "type": "drilldown.customUrl",
       "options": {
          "url": "$row.URL.value|n$",
          "newTab": true
      }
   }
]

You can set that up in the UI with the following:

[SureshkumarD]

Hi @danspav ,

I replied on Friday that the hyperlink is not working by providing the source code and screenshots. Could you please look into it and assist? Thank you.

[SureshkumarD]

Hi @danspav ,

I added the event handlers and updated $row.URL.value$ in the link to custom url as per your ask, but still the url is not reflecting as hyperlink. Here is the source code and I shared the screenshot of the table below. Thank you.

 "visualizations": {

        "viz_qFxEKJ3l": {

            "type": "splunk.table",

            "options": {

                "count": 5000,

                "dataOverlayMode": "none",

                "drilldown": "none",

                "backgroundColor": "#FAF9F6",

                "tableFormat": {

                    "rowBackgroundColors": "> table | seriesByIndex(0) | pick(tableAltRowBackgroundColorsByBackgroundColor)",

                    "headerBackgroundColor": "> backgroundColor | setColorChannel(tableHeaderBackgroundColorConfig)",

                    "rowColors": "> rowBackgroundColors | maxContrast(tableRowColorMaxContrast)",

                    "headerColor": "> headerBackgroundColor | maxContrast(tableRowColorMaxContrast)"

                },

                "eventHandlers": [

                    {

                        "type": "drilldown.customUrl",

                        "options": {

                            "url": "$row.URL.value|n$",

                            "newTab": true

                        }

                    }

                ],

[danspav]

Hi @SureshkumarD,

I tried out your code - the rows aren't showing up as links because of the table formatting / row color setting.

Remove this line from your code:

    "rowColors": "> rowBackgroundColors | maxContrast(tableRowColorMaxContrast)",

That is causing the "link" effect on the clickable rows to disappear.

Here's the full viz code:

"visualizations": {
        "viz_qFxEKJ3l": {
            "type": "splunk.table",
            "options": {
                "count": 5000,
                "dataOverlayMode": "none",
                "drilldown": "none",
                "backgroundColor": "#FAF9F6",
                "tableFormat": {
                    "rowBackgroundColors": "> table | seriesByIndex(0) | pick(tableAltRowBackgroundColorsByBackgroundColor)",
                    "headerBackgroundColor": "> backgroundColor | setColorChannel(tableHeaderBackgroundColorConfig)",
                    "headerColor": "> headerBackgroundColor | maxContrast(tableRowColorMaxContrast)"
                },
                "eventHandlers": [
                    {
                        "type": "drilldown.customUrl",
                        "options": {
                            "url": "$row.URL.value|n$",
                            "newTab": true
                        }
                    }
                ],

 Give that a go on your dashboard.

[SureshkumarD]

Hi @danspav ,

Thank you for your response. I made the changes and when I clicked on the hyperlink, it is not redirecting to the correct dynamically generated external URL 'https://abc12345.apps.dynatrace.com/ui/apps/dynatrace.classic.distributed.traces/ui/services/SERVICE...'. Here are the screenshots and code below. Please assist on this.

"visualizations": {

        "viz_aBCd123": {

            "type": "splunk.table",

            "options": {

                "count": 5000,

                "dataOverlayMode": "none",

                "drilldown": "none",

                "backgroundColor": "#FAF9F6",

                "tableFormat": {

                    "rowBackgroundColors": "> table | seriesByIndex(0) | pick(tableAltRowBackgroundColorsByBackgroundColor)",

                    "headerBackgroundColor": "> backgroundColor | setColorChannel(tableHeaderBackgroundColorConfig)",

                    "headerColor": "> headerBackgroundColor | maxContrast(tableRowColorMaxContrast)"

                },

                "eventHandlers": [

                    {

                        "type": "drilldown.customUrl",

                        "options": {

                            "url": "$row.URL.value|n$",

                            "newTab": true

                        }

                    }

                ],