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!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...