Help to display Image/Clickable Url on Dashboard.

[phupn1510]

I have a dashboard to show a statistic about user events. I have a field that return dynamic urls and I want to show Image from that Url. Alternatively, it can be a hyperlink to click on it to open image on another browser.

Currently, I tested on both Dashboard Studio and Dashboard Classic

Thank you

[livehybrid]

Just a further note, you will probably need to add the image domain to your dashboards_trusted_domain settings:

For Splunk Cloud see https://help.splunk.com/en/splunk-cloud-platform/administer/admin-manual/9.3.2408/configure-your-spl...

For Splunk Enterprise see https://docs.splunk.com/Documentation/Splunk/9.4.2/Admin/ConfigureDashboardsTrustedDomainsList

In short, I was able to run the following curl command to set a domain for my testing (as an example):

curl -k -u admin:topsecretpassword https://192.168.0.222:8089/servicesNS/nobody/system/web-features/feature:dashboards_csp -d dashboards_trusted_domain.testing=https://beta.dashpub.online

🌟 Did this answer help you? If so, please consider:

• Adding karma to show it was useful
• Marking it as the solution if it resolved your issue
• Commenting if you need any clarification

Your feedback encourages the volunteers in this community to continue contributing

[livehybrid]

Hi @phupn1510 

Here is another example using Dashboard Studio:

{
    "title": "ImageDashboardStudio",
    "description": "",
    "inputs": {},
    "defaults": {
        "dataSources": {
            "ds.search": {
                "options": {
                    "queryParameters": {}
                }
            }
        }
    },
    "visualizations": {
        "viz_BDEO1QhV": {
            "options": {
                "markdown": "This is a splunk.image"
            },
            "type": "splunk.markdown"
        },
        "viz_frONH0n1": {
            "options": {
                "markdown": "This is markdown\n![]($imgSearch:result.imageUrl$)"
            },
            "type": "splunk.markdown"
        },
        "viz_vNXqSiui": {
            "dataSources": {
                "primary": "ds_2vTXdmuT"
            },
            "options": {
                "count": 20,
                "dataOverlayMode": "none",
                "drilldown": "none",
                "showInternalFields": false,
                "showRowNumbers": false
            },
            "type": "splunk.table"
        },
        "viz_zje45yZK": {
            "options": {
                "preserveAspectRatio": true,
                "src": "$imgSearch:result.imageUrl$"
            },
            "type": "splunk.image"
        }
    },
    "dataSources": {
        "ds_2vTXdmuT": {
            "name": "imgSearch",
            "options": {
                "enableSmartSources": true,
                "query": "|makeresults | eval imageUrl=\"https://beta.dashpub.online/screenshots/608f9a7d4726e06206c78ccbb488832f.jpg\"",
                "queryParameters": {
                    "earliest": "-24h@h",
                    "latest": "now"
                }
            },
            "type": "ds.search"
        }
    },
    "layout": {
        "globalInputs": [],
        "layoutDefinitions": {
            "layout_1": {
                "options": {
                    "display": "auto",
                    "height": 500,
                    "width": 1440
                },
                "structure": [
                    {
                        "item": "viz_vNXqSiui",
                        "position": {
                            "h": 250,
                            "w": 720,
                            "x": 0,
                            "y": 0
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_zje45yZK",
                        "position": {
                            "h": 200,
                            "w": 300,
                            "x": 1090,
                            "y": 70
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_frONH0n1",
                        "position": {
                            "h": 200,
                            "w": 300,
                            "x": 730,
                            "y": 60
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_BDEO1QhV",
                        "position": {
                            "h": 30,
                            "w": 300,
                            "x": 1090,
                            "y": 60
                        },
                        "type": "block"
                    }
                ],
                "type": "absolute"
            }
        },
        "options": {},
        "tabs": {
            "items": [
                {
                    "label": "New tab",
                    "layoutId": "layout_1"
                }
            ]
        }
    }
}

🌟 Did this answer help you? If so, please consider:

• Adding karma to show it was useful
• Marking it as the solution if it resolved your issue
• Commenting if you need any clarification

Your feedback encourages the volunteers in this community to continue contributing

[phupn1510]

Thank you for your supporting. However, my case are little bit complex when we have multiple urls in 1 field for each row in table chart . How to display dynamic all url of this

[livehybrid]

Hi @phupn1510 

Ive updated the search to be multivalue and added logic to dynamically create the markdown content using a foreach command. I think this is the closest we can get to what you are looking for. 

Note that you cannot embed these images in a table, currently this is expecting a single row but you could use stats command to concat multiple rows into a single row to have a single variable containing all the markdown for the images.

Also, I've used an _imageMarkdown field, the _ means that this field will not display in the table, this is incase you want to display the other data but not render the markdown as plaintext within the table. Its possible using dashboard studio to drag the table off the side of the canvas if you do not want to display it but you do want the search to run to generate the list of images.

I hope this helps!

🌟 Did this answer help you? If so, please consider:

• Adding karma to show it was useful
• Marking it as the solution if it resolved your issue
• Commenting if you need any clarification

Your feedback encourages the volunteers in this community to continue contributing

[phupn1510]

I wasn't able to find the updated dashboard source with multivalue handling and the logic for creating markdown for each command. I’d really appreciate it if you could share it.

[livehybrid · Accepted solution]

Sorry something happened when posting! Here we go:

{
    "title": "ImageDashboardStudio",
    "description": "",
    "inputs": {},
    "defaults": {
        "dataSources": {
            "ds.search": {
                "options": {
                    "queryParameters": {}
                }
            }
        }
    },
    "visualizations": {
        "viz_frONH0n1": {
            "options": {
                "markdown": "This is markdown\n$imgSearch:result._imageMarkdown$"
            },
            "type": "splunk.markdown"
        },
        "viz_vNXqSiui": {
            "dataSources": {
                "primary": "ds_2vTXdmuT"
            },
            "options": {
                "count": 20,
                "dataOverlayMode": "none",
                "drilldown": "none",
                "showInternalFields": false,
                "showRowNumbers": false
            },
            "type": "splunk.table"
        }
    },
    "dataSources": {
        "ds_2vTXdmuT": {
            "name": "imgSearch",
            "options": {
                "enableSmartSources": true,
                "query": "|makeresults | eval imageUrl=\"https://beta.dashpub.online/screenshots/608f9a7d4726e06206c78ccbb488832f.jpg\"\n|  eval imageUrl=mvappend(imageUrl,\"https://beta.dashpub.online/screenshots/f31dc5c4a2e5e76312c9b190c7ef7bfb.jpg\")\n| foreach imageUrl mode=multivalue\n    [| eval _imageMarkdown=mvappend(_imageMarkdown,\"![](\".<<ITEM>>.\")\")]\n",
                "queryParameters": {
                    "earliest": "-24h@h",
                    "latest": "now"
                }
            },
            "type": "ds.search"
        }
    },
    "layout": {
        "globalInputs": [],
        "layoutDefinitions": {
            "layout_1": {
                "options": {
                    "display": "auto",
                    "height": 1440,
                    "width": 1440
                },
                "structure": [
                    {
                        "item": "viz_vNXqSiui",
                        "position": {
                            "h": 250,
                            "w": 720,
                            "x": 0,
                            "y": 0
                        },
                        "type": "block"
                    },
                    {
                        "item": "viz_frONH0n1",
                        "position": {
                            "h": 820,
                            "w": 370,
                            "x": 740,
                            "y": 10
                        },
                        "type": "block"
                    }
                ],
                "type": "absolute"
            }
        },
        "options": {},
        "tabs": {
            "items": [
                {
                    "label": "New tab",
                    "layoutId": "layout_1"
                }
            ]
        }
    }
}

🌟 Did this answer help you? If so, please consider:

• Adding karma to show it was useful
• Marking it as the solution if it resolved your issue
• Commenting if you need any clarification

Your feedback encourages the volunteers in this community to continue contributing

[phupn1510]

Hi , Thank you so much for your sample. Now I can generate my dashboards as multiple value right now

[livehybrid]

Hi @phupn1510 

Here is an example using classic dashboards:

<dashboard version="1.1" theme="light">
  <label>ImageClassic</label>
  <row>
    <panel>
      <table>
        <search>
          <query>|makeresults | eval imageUrl="https://beta.dashpub.online/screenshots/608f9a7d4726e06206c78ccbb488832f.jpg"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
           <done>
            <set token="image_url">$result.imageUrl$</set>
          </done>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
    <panel>
  <html>
      <a href="$image_url$" target="_blank">
        <img src="$image_url$" width="500"/>
      </a>
  </html>
</panel>
  </row>
  
</dashboard>

🌟 Did this answer help you? If so, please consider:

• Adding karma to show it was useful
• Marking it as the solution if it resolved your issue
• Commenting if you need any clarification

Your feedback encourages the volunteers in this community to continue contributing