<form version="1.1" theme="light">
<label>Dashboard</label>
<!-- Hidden base search for dropdowns -->
<search id="base_search">
<query>
index=$index$ ----------
</query>
<earliest>$time_tok.earliest$</earliest>
<latest>$time_tok.latest$</latest>
</search>
<fieldset submitButton="false"></fieldset>
<row>
<panel>
<html>
<p>⚠️ Kindly avoid running the Dashboard for extended time frames <b>(Last 30 days)</b> unless absolutely necessary, as it may impact performance.</p>
<p>To get started, Please make sure to select your <b>Index Name</b> - this is required to display the dashboard data </p>
</html>
</panel>
</row>This is how I am writing the description. But I am not satisfied because it is not eye catchy. When the user opens the dashboard he should see this note first, i want in that way. I am not aware of HTML as well. Can some one help me. Copied icon from google and it seems small in dashboard.
@livehybrid wrote:Ive adjusted the styling now so its based on the Splunk theme colouring and adjusts for both:
Regarding the emoji and dark-mode, it seems to work okay for me. Occasionally when switching between light/dark mode I needed to do a hard refresh but it certainly looks to be working as per the above screenhot.
Below is the XML code the example dashboard:
<form version="1.1" theme="dark">
<label>Dashboard</label>
<fieldset submitButton="true" autoRun="false">
<html>
<div class="dashboard-row">
<div class="dashboard-panel" style="border-left: 6px solid #f57c00; padding:10px; width:90%; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
border-radius: 6px;">
<h3 class="text-warning" style="display: flex; align-items: center; margin-bottom: 8px; color:#f57c00;">
<span style="font-size: 32px; margin-right: 12px;">⚠️</span>
Important Notice
</h3>
<p class="text-muted">
Avoid long date ranges like <strong>Last 30 days</strong> to avoid performance bottlenecks.
</p>
<p class="text-muted">
Please ensure an <strong>Index</strong> is selected before running this dashboard.
</p>
</div>
</div>
</html>
<input type="dropdown" token="field1">
<label>Index</label>
<choice value="_internal">_internal</choice>
</input>
<input type="dropdown" token="field2">
<label>Something else</label>
<choice value="*">*</choice>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>|tstats count where index=_internal by host</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</form>🌟 Did this answer help you? If so, please consider:
- Adding karma to show it was useful
- Marking it as the solution if it resolved your issue
- Commenting if you need any clarification
Your feedback encourages the volunteers in this community to continue contributing
This thread is getting hard to follow so I've edited this to include two variants, Ive adjusted the styling now so its based on the Splunk theme colouring and adjusts for both:
Below is the XML code the example dashboard:
<form version="1.1" theme="dark">
<label>Dashboard</label>
<fieldset submitButton="true" autoRun="false">
<html>
<div class="dashboard-row">
<div class="dashboard-panel" style="border-left: 6px solid #f57c00; padding:10px; width:90%">
<h3 class="text-warning" style="display: flex; align-items: center; margin-bottom: 8px; color:#f57c00;">
<span style="font-size: 32px; margin-right: 12px;">⚠️</span>
Important Notice
</h3>
<p class="text-muted">
Avoid long date ranges like <strong>Last 30 days</strong> to avoid performance bottlenecks.
</p>
<p class="text-muted">
Please ensure an <strong>Index</strong> is selected before running this dashboard.
</p>
</div>
</div>
</html>
<input type="dropdown" token="field1">
<label>Index</label>
<choice value="_internal">_internal</choice>
</input>
<input type="dropdown" token="field2">
<label>Something else</label>
<choice value="*">*</choice>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>|tstats count where index=_internal by host</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</form>
Regarding the emoji and dark-mode, it seems to work okay for me. Occasionally when switching between light/dark mode I needed to do a hard refresh but it certainly looks to be working as per the above screenhot.
*HOWEVER* below is a version which uses an embedded SVG image instead:
The code for that is:
<form version="1.1" theme="dark">
<label>Dashboard</label>
<fieldset submitButton="true" autoRun="false">
<html>
<div class="dashboard-row">
<div class="dashboard-panel" style="border-left: 6px solid #f57c00; padding:10px; width:90%; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1); border-radius: 6px;">
<h3 class="text-warning" style="display: flex; align-items: center; margin-bottom: 8px; color:#f57c00;">
<span style="font-size: 32px; margin-right: 12px;"><svg focusable="false" height="1.3em" width="1em" viewBox="0 0 1500 1313" aria-hidden="false" preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg" data-test-name="warning-icon" class="warningIcon"><title>Warning</title><path style="fill:currentColor;" d="M.956 1196.326l668.58-1144.89C689.395 17.736 718.71 0 749.916 0c31.207 0 59.577 15.963 80.382 51.436l668.58 1144.89c7.565 12.416-23.642 116.174-77.544 116.174H85.474c-53.902 0-92.083-102.872-84.518-116.174zm643.333-684.743l32.146 257.167c4.908 39.264 34.086 74.685 69.815 91.187 36.612-16.018 64.87-50.826 69.914-91.187l32.146-257.167C855.18 456.623 815.582 411 759.7 411h-26.8c-55.908 0-95.555 45.033-88.61 100.583zm101.294 644.209c63.283 0 114.584-51.301 114.584-114.584 0-63.282-51.301-114.583-114.584-114.583-63.282 0-114.583 51.3-114.583 114.583s51.3 114.584 114.583 114.584z"></path></svg></span>
Important Notice
</h3>
<p class="text-muted">
Avoid long date ranges like <strong>Last 30 days</strong> to avoid performance bottlenecks.
</p>
<p class="text-muted">
Please ensure an <strong>Index</strong> is selected before running this dashboard.
</p>
</div>
</div>
</html>
<input type="dropdown" token="field1">
<label>Index</label>
<choice value="_internal">_internal</choice>
</input>
<input type="dropdown" token="field2">
<label>Something else</label>
<choice value="*">*</choice>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>|tstats count where index=_internal by host</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</form>Please let me know how you get on and if you need any other changes.
🌟 Did this answer help you? If so, please consider:
- Adding karma to show it was useful
- Marking it as the solution if it resolved your issue
- Commenting if you need any clarification
Your feedback encourages the volunteers in this community to continue contributing
How about this?
<dashboard version="1.1" theme="light">
<label>Your dashboard name</label>
<!-- ===== NOTICE PANEL ===== -->
<row>
<panel>
<html>
<div style="
background: linear-gradient(120deg,#fff5f5 0%,#fff 100%);
border-left: 6px solid #ff9800;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
border-radius: 6px;
padding: 18px 24px;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
font-size: 15px;
line-height: 1.45;">
<h3 style="color:#d84315; margin:0 0 8px 0; display:flex; align-items:center;">
<!-- unicode icon (search engine–friendly, scales with text size) -->
<span style="font-size:32px; margin-right:12px;">⚠️</span>
Performance notice
</h3>
<p style="margin:0 0 10px 0; color:#424242;">
Avoid running the dashboard for long date ranges
<strong>(Last 30 days)</strong> unless strictly needed – it may
impact performance.
</p>
<p style="margin:0; color:#424242;">
Before you continue, please select the <strong>Index Name</strong>
above. The dashboard will remain empty until an index is chosen.
</p>
</div>
</html>
</panel>
</row>
<!-- rest of your dashboard -->
</dashboard>🌟 Did this answer help you? If so, please consider:
- Adding karma to show it was useful
- Marking it as the solution if it resolved your issue
- Commenting if you need any clarification
Your feedback encourages the volunteers in this community to continue contributing
This is how it is showing. Can you please format more the performance notice..
We have this as well below dropdowns. Any chance can we club all these all in one note...confused
I have one more problem here.. I want importance notice to be on the top. But here dropdowns are o n top. Tried to create a role and panel for dropdowns so that they will come below notice message but I am not able to give submit button clearly. Can someone help me with this?
But when we use notice in here this notice is slightly overlapping with dropdowns which feels bad. Can you do something to maintain some space between them?
<form version="1.1" theme="light">
<label>Dashboard</label>
<fieldset submitButton="true" autoRun="false">
<html>
<div style="
background: linear-gradient(120deg,#fff5f5 0%,#fff 100%);
border-left: 6px solid #ff9800;
box-shadow: 0 2px 6px rgba(0,0,0,.12);
border-radius: 6px;
padding: 18px 24px;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
font-size: 15px;
line-height: 1.45;">
<h3 style="color:#d84315; margin:0 0 8px 0; display:flex; align-items:center;">
<!-- unicode icon (search engine–friendly, scales with text size) -->
<span style="font-size:32px; margin-right:12px;">⚠️</span>
Important Notice
</h3>
<p style="margin:0 0 10px 0; color:#424242;">
Avoid running the dashboard for long date ranges
<strong>(Last 30 days)</strong> unless strictly needed – it may
impact performance. Use shorter ranges for faster results.
</p>
<p style="margin:0; color:#424242;">
Please ensure an <strong>Index Name</strong> is selected - this is required to load dashboard data.
</p>
</div>
</html>
<input type="dropdown" token="index">
<label>Enter your Index Name</label>
<fieldForLabel>index</fieldForLabel>
<fieldForValue>index</fieldForValue>
<search>This is the XML currently using for this....
Looks good but it look bit bad for dark mode. Can you help me with the good colors? sorry I am asking more
@livehybrid wrote:Ive adjusted the styling now so its based on the Splunk theme colouring and adjusts for both:
Regarding the emoji and dark-mode, it seems to work okay for me. Occasionally when switching between light/dark mode I needed to do a hard refresh but it certainly looks to be working as per the above screenhot.
Below is the XML code the example dashboard:
<form version="1.1" theme="dark">
<label>Dashboard</label>
<fieldset submitButton="true" autoRun="false">
<html>
<div class="dashboard-row">
<div class="dashboard-panel" style="border-left: 6px solid #f57c00; padding:10px; width:90%; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.1);
border-radius: 6px;">
<h3 class="text-warning" style="display: flex; align-items: center; margin-bottom: 8px; color:#f57c00;">
<span style="font-size: 32px; margin-right: 12px;">⚠️</span>
Important Notice
</h3>
<p class="text-muted">
Avoid long date ranges like <strong>Last 30 days</strong> to avoid performance bottlenecks.
</p>
<p class="text-muted">
Please ensure an <strong>Index</strong> is selected before running this dashboard.
</p>
</div>
</div>
</html>
<input type="dropdown" token="field1">
<label>Index</label>
<choice value="_internal">_internal</choice>
</input>
<input type="dropdown" token="field2">
<label>Something else</label>
<choice value="*">*</choice>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>|tstats count where index=_internal by host</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</form>🌟 Did this answer help you? If so, please consider:
- Adding karma to show it was useful
- Marking it as the solution if it resolved your issue
- Commenting if you need any clarification
Your feedback encourages the volunteers in this community to continue contributing
