Solved: Re: Simple XML Dashboard Layout Issues

replicamask · ‎09-04-2019

I'm searching to see if it's possible to have a dashboard with a layout like this using the XML in Splunk:

The idea being panel (cell) 1 would contain a list of links and 2, 3, and 4 would be populated with content, knowledge for users, etc.

But it's not proving that straightforward with the simple XML.

Has anyone else attempted this or similar? I've been through the previous posts here and didn't turn up anything to help properly, I have also been through the sample dashboards and didn't have any luck there either.

Thanks in advance!

replicamask · ‎09-06-2019

For anyone else facing a similar task, I think the most straightforward solution is to use a HTML table and try and make it look nice with inline CSS or attach a CSS file to the dashboard, going to leave the rough shell for the layout I asked about in case it helps others.

<dashboard>
  <label>Layout Testing</label>
    <row id="links_row">
    <panel id="css_hidden" depends="$alwaysHideCSS$">
      <title>testing</title>
      <html>
        <style>
            #css_hidden{
                width:0% !important;
            }
            #t1{
                width:20% !important;
            }
            #t2{
                width:50% !important;
            }
            #t3{
                width:30% !important;
            }
        </style>
      </html>
    </panel>
        <panel id="home_table">
            <html>
                <table id="t0">
                    <tbody>
                        <tr>
                            <td id="t1" rowspan="2">
                                <ul>
                                    <li>Table 1</li>
                                </ul> 
                            </td>
                            <td id="t2">
                                <ul>
                                    <li>Table 2</li>
                                </ul> 
                            </td>
                            <td id="t3">
                                <ul>
                                    <li>Table 3</li>
                                </ul> 
                            </td>
                        </tr>
                        <tr>
                            <td id="t4" colspan="2">
                                <ul>
                                    <li>Table 4</li>
                                </ul> 
                            </td>
                        </tr>
                    </tbody>
                </table>
            </html>
        </panel>
    </row>
</dashboard>

View solution in original post

replicamask · ‎09-06-2019

For anyone else facing a similar task, I think the most straightforward solution is to use a HTML table and try and make it look nice with inline CSS or attach a CSS file to the dashboard, going to leave the rough shell for the layout I asked about in case it helps others.

<dashboard>
  <label>Layout Testing</label>
    <row id="links_row">
    <panel id="css_hidden" depends="$alwaysHideCSS$">
      <title>testing</title>
      <html>
        <style>
            #css_hidden{
                width:0% !important;
            }
            #t1{
                width:20% !important;
            }
            #t2{
                width:50% !important;
            }
            #t3{
                width:30% !important;
            }
        </style>
      </html>
    </panel>
        <panel id="home_table">
            <html>
                <table id="t0">
                    <tbody>
                        <tr>
                            <td id="t1" rowspan="2">
                                <ul>
                                    <li>Table 1</li>
                                </ul> 
                            </td>
                            <td id="t2">
                                <ul>
                                    <li>Table 2</li>
                                </ul> 
                            </td>
                            <td id="t3">
                                <ul>
                                    <li>Table 3</li>
                                </ul> 
                            </td>
                        </tr>
                        <tr>
                            <td id="t4" colspan="2">
                                <ul>
                                    <li>Table 4</li>
                                </ul> 
                            </td>
                        </tr>
                    </tbody>
                </table>
            </html>
        </panel>
    </row>
</dashboard>

jacobpevans · ‎09-04-2019

Do you need it to be Simple XML? The best answer I have for you is to get your dashboard as far as you can, convert it to HTML, and then you'll be able to do this or whatever else you want to in the HTML. Just keep in mind, you cannot convert back to Simple XML from HTML.

Just to be clear - 2, 3, and 4 are possible. It's 1 that is not possible since it would be crossing a <row> boundary.

Have you seen the Splunk Dashboard Examples app? It's the best thing I've found to gain an understanding of what is possible via Simple XML, HTML, and JavaScript with examples that are easy to copy. Make sure you pick the right version, although the app will tell you what isn't compatible with your version if you want to get the latest one anyway.

https://splunkbase.splunk.com/app/1603/

Cheers,
Jacob

If you feel this response answered your question, please do not forget to mark it as such. If it did not, but you do have the answer, feel free to answer your own post and accept that as the answer.

replicamask · ‎09-06-2019

ya and it was the crossing <row> boundary that was catching me.

It would have to remain in the XML as there will likely be needs for changes down the line as parts of it evolve and change.
Another idea I had was to just try and do it with a hmtl table and inline css so here's hoping that will work out for it.

Thanks for the reply!

mohammedk01 · ‎09-04-2019

I haven't tried anything like this but I know for sure that if you add (Panel) dropdown filters to your dashboard with all the values of Panel 1 then you can pass token on the 2,3 & 4 panel of the dashboard so that's how you can switch between values by selecting them on a dropdown filter and every time you select the different value and because we passed token on 2,3 & 4 panel the value you selected only data related to that value will populated in the dashboard panels and that's how you can achieve your desired result....apologies if that's not what you're trying to achieve. I am also a newbie.

Simple XML Dashboard Layout Issues

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

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor