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
Get Updates on the Splunk Community!

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation

As of Splunk Cloud Platform 9.3.2408 and Splunk Enterprise 9.4, classic dashboard export features are now ...

Explore the Latest Educational Offerings from Splunk (November Releases)

At Splunk Education, we are committed to providing a robust learning experience for all users, regardless of ...

New This Month in Splunk Observability Cloud - Metrics Usage Analytics, Enhanced K8s ...

The latest enhancements across the Splunk Observability portfolio deliver greater flexibility, better data and ...