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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...