Solved: How to create dashboard with clickable hyperlinks ...

kmjefferson42 · ‎06-11-2024

Good Morning All,

Curious if anyone out here knows of a way to make a dashboard with clickable text, like a hyperlink in html, that opens a url to search results. I have included a picture of what I attempting to accomplish.

The dashboard pictured was made with Splunk Enterprise 7.1.10. I am unable to export and import as I have done in the past with earlier versions.

I welcome any and all ideas! Much thx, Ken

efavreau · ‎06-11-2024

@kmjefferson42 Hi Ken! What you're looking to do is possible in Simple XML Dashboards (don't know about Studio). Interesting that you already have this, but can't reverse engineer it? That might require more details in a different question.

To answer the question you asked, please find a run-anywhere example below. To use it, create a new classic (simple xml) dashboard, click "source" to edit the xml code, delete the existing lines, and paste the below example in. This will give you the bones to creating all the panels you want with hyperlinks.

<dashboard version="1.1">
  <label>dashboard panel for links</label>
  <row>
    <panel>
      <html>
        <h2>Panel 1</h2>
		  <p>
            <ul>
              <li>This is a bulleted list of notes. Copy and paste this line of html for each bullet needed</li>
              <li><a href="https://www.splunk.com/">Replace this URL with your search, report, or dashboard URL</a></li>
            </ul>
          </p>
       </html>
    </panel>
    <panel>
      <html>
        <h2>Panel 2</h2>
		  <p>
            <ul>
              <li>Same content below. Showing multiple panels are possible on the same row. Season to taste.</li>
              <li><a href="https://www.splunk.com/">Replace this URL with your search, report, or dashboard URL</a></li>
            </ul>
          </p>
       </html>
    </panel>
  </row>
</dashboard>

###

If this reply helps you, an upvote would be appreciated.

View solution in original post

bowesmana · ‎06-17-2024

@kmjefferson42 if that dashboard was made with Splunk 7, then you probably would have to add version="1.1" to the <form> header. I don't think there's anything problematic with copy/pasting the old dashboard XML to a new dashboard

gcusello · ‎06-11-2024

Hi @kmjefferson42 ,

this is my usual homepage in my apps: I usually use titles and images, but you can use only titles:

<dashboard version="1.1">
  <label>Home Page</label>
  <row>
    <panel>
      <html>
		<h3>This is an external link</h3> 
	    <a href="http://www.garanteprivacy.it">
        <i>
          <b>
            <u>
              <strong>text description</strong>
            </u>
          </b>
        </i>
      </a>
		</html>
    </panel>
    <panel>
      <html>
		<div style="width:100%;height:100%;text-align:center;">
        <a href="http://www.garanteprivacy.it">
            <img src="/static/app/cp_fp_coba/GarantePrivacy.png" style="height:80px;border:0;"/>
      </a>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <html>
			<h1>box1</h1>
			<p>
        <font size="2">Description</font>
      </p>
			<table border="0" cellpadding="10" align="center">
              <th>
                <tr>
                  <td align="center">
              		<a href="your_dashboard_1">
                		<img src="/static/app/your_app/your_icon.png" style="width:80px;border:0;"/>
                    </a>
                  </td>
                  <td align="center">
                    <a href="your_dashboard_1">
                		<img src="/static/app/your_app/your_icon.png" style="width:80px;border:0;"/>
                    </a>
                  </td>
                  <td align="center">
                    <a href="your_dashboard_2">
                		<img src="/static/app/your_app/your_icon_2.png" style="width:80px;border:0;"/>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td align="center">
              		<a href="your_dashboard_1">
                      your dashboard 1 title
                    </a>
                  </td>
                  <td align="center">
                    <a href="your_dashboard_1">
                    </a>
                  </td>
                  <td align="center">
                    <a href="your_dashboard_3">
                		your dashboard 2 title
                    </a>
                  </td>
                </tr>
                </th>
			</table>
		</html>
    </panel>
  </row>
</dashboard>

search in the Community: there are many answers to your questions, also from me.

Ciao.

Giuseppe

kmjefferson42 · ‎06-17-2024

Thank you very much for your comment and share of source code! It has helped me out. I am not very well versed in xml, html, web design etc but this is bringing back some memories and I'm starting to get more accustomed to it again.

Ken

efavreau · ‎06-11-2024

@kmjefferson42 Hi Ken! What you're looking to do is possible in Simple XML Dashboards (don't know about Studio). Interesting that you already have this, but can't reverse engineer it? That might require more details in a different question.

To answer the question you asked, please find a run-anywhere example below. To use it, create a new classic (simple xml) dashboard, click "source" to edit the xml code, delete the existing lines, and paste the below example in. This will give you the bones to creating all the panels you want with hyperlinks.

<dashboard version="1.1">
  <label>dashboard panel for links</label>
  <row>
    <panel>
      <html>
        <h2>Panel 1</h2>
		  <p>
            <ul>
              <li>This is a bulleted list of notes. Copy and paste this line of html for each bullet needed</li>
              <li><a href="https://www.splunk.com/">Replace this URL with your search, report, or dashboard URL</a></li>
            </ul>
          </p>
       </html>
    </panel>
    <panel>
      <html>
        <h2>Panel 2</h2>
		  <p>
            <ul>
              <li>Same content below. Showing multiple panels are possible on the same row. Season to taste.</li>
              <li><a href="https://www.splunk.com/">Replace this URL with your search, report, or dashboard URL</a></li>
            </ul>
          </p>
       </html>
    </panel>
  </row>
</dashboard>

###

If this reply helps you, an upvote would be appreciated.

kmjefferson42 · ‎06-17-2024

Thank you for the reply and example! Greatly appreciated.

Ken

How to create dashboard with clickable hyperlinks to search results?

Classic dashboard

Dashboard Studio

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)