Dashboards & Visualizations

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

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

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

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

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

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
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!