Dashboards & Visualizations

How to create a dashboard that displays text from a HTML file and and an image in same panel?

splunk_svc
Path Finder

HI Splunkers.
I'm attempting to create a dashboard as a landing page (essentially a simple panel with with a separate navbar at the top).
The page needs to display text from a .html file on the left with an image (in the same panel) right-aligned.

These need to appear in the one panel.
i.e. the text on the left hand side of the panel and the image on the right.

The image is appearing on the RHS but is underneath the last of the the text, and in a second panel.
I'd like to avoid using any CSS for such a simple display requirement but can't for the life of me get this to work.

A sample of the code is below.
I suspect I need to get the .html and the image within the same tag (as opposed to an inline one) but I attempt to do so I get missing tag errors when the page renders in Splunk.

Thanks in advance.

<dashboard>
  <label>Application Landing Page</label>
  <row>
    <panel id="main">
      <html src="Welcome.html" style="text-align: center;"/>
      <html>
        <img src="/static/app/app_name/app_image.png" align="right" />
      </html>
    </panel>
  </row>
</dashboard>
0 Karma
1 Solution

splunk_svc
Path Finder

Ended up merging the text and the image within the one .html file in order to get this working.
It would have been preferable to have the image being rendered from a separate HTML from the text to allow for similar dashboards.
(i.e. same text, different image).

View solution in original post

0 Karma

splunk_svc
Path Finder

Ended up merging the text and the image within the one .html file in order to get this working.
It would have been preferable to have the image being rendered from a separate HTML from the text to allow for similar dashboards.
(i.e. same text, different image).

0 Karma

sundareshr
Legend

How about something like this

  <row>
    <html src="Welcome.html"/>
    <html>
    <div style="width:50%">
        <img src="/static/app/app_name/app_image.png" />
      </div>
    </html>
  </row>
0 Karma

splunk_svc
Path Finder

This puts the image in a panel of its own below the panel the .html file is being rendered in.
(Appearing the same as it does now).

I think the img needs to be in the same html tag as the Welcome.html.

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Unlocking Unified Insights: New Gigamon Federated Search App for Splunk

In today’s data-heavy environment, organizations are caught in a data distribution dilemma. As data volumes ...

GA: New Data Management App in Splunk Platform

Streamlining Data Management: Introducing a unified experience in Splunk Managing data at scale shouldn’t feel ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...