Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

Can an HTML button with value be done without using JS and CSS scripts?

Deepz2612
Explorer
‎10-24-2019 11:19 PM

Hi,

I require an HTML button with the value.
Can this be done without using JS and CSS scripts?

Kindly help me.

Thanks!

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

gaurav_maniar
Builder
‎10-25-2019 01:26 AM

Hi @Deepz2612 ,

Try the below code.
Accept & up-vote the answer if it helps.

<row depends="$hidden$">
    <panel>
      <table>
        <search>
          <query>index=_internal | head 1 |stats latest(_time) as Last_Occurance | convert ctime(Last_Occurance)</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <done>
            <set token="test">$result.Last_Occurance$</set>
          </done>
        </search>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <input type="button" value="$test$"/>
      </html>
    </panel>>
  <row>

happy splunking.....!!!!

View solution in original post

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎10-30-2019 01:21 PM

@Deepz2612 @prettysunshinez If you want to avoid JS, you can try one of my following workaround which uses table cell values displayed as buttons so that we are allowed to set/unset token as part of table <drilldown> using Simple XML itself.

alt text

Please try out and confirm. Let me know if you need explanation for any of the section of the run anywhere example:

<dashboard>
  <label>Dashboard with Buttons using Formatted Table without JS based HTML buttons</label>
  <row id="rowPanelTableButtons">
    <panel id="panelTableButtonLeft">
      <html depends="$alwaysHideCSSPanel$">
        <style>
          #rowPanelTableButtons {
            display: inline-flex !important;
          }
          #panelTableButtonLeft .dashboard-panel{
            margin-right: 0px !important;
          }
          #tableWithHideButton table thead,
          #tableWithShowButton table thead{
            display: none !important;
          }
          #tableWithShowButton table tbody tr,
          #tableWithHideButton table tbody tr{
              display: flex;
          }
          #tableWithShowButton .element-footer,
          #tableWithHideButton .element-footer{
            visibility: hidden !important;
          }
          #tableWithShowButton table tbody tr td,
          #tableWithShowButton table tbody tr td:hover,
          #tableWithHideButton table tbody tr td,
          #tableWithHideButton table tbody tr td:hover{
            color: #fff;
            -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
            box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
            text-decoration: none;
            text-shadow: none;
            -webkit-transition: background .2s,border .2s,-webkit-box-shadow .2s,-webkit-text-decoration .2s;
            transition: background .2s,border .2s,-webkit-box-shadow .2s,-webkit-text-decoration .2s;
            transition: background .2s,border .2s,box-shadow .2s,text-decoration .2s;
            transition: background .2s,border .2s,box-shadow .2s,text-decoration .2s,-webkit-box-shadow .2s,-webkit-text-decoration .2s;
            -webkit-filter: none;
            filter: none;
          }
          #tableWithShowButton table tbody tr td,
          #tableWithHideButton table tbody tr td{
            padding: 6px 15px;
            font-weight: 500;
            background-color: #5cc05c;
            border: transparent;
            margin-right: 5px;
          }
        </style>
      </html>
      <table id="tableWithShowButton">
        <search>
          <query>| makeresults
| fields - _time
| eval buttonShow="Show Panel"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="tokShowPanel">true</set>
        </drilldown>
      </table>
    </panel>
    <panel id="panelTableButtonRight">
      <table id="tableWithHideButton">
        <search>
          <query>| makeresults
| fields - _time
| eval buttonHide="Hide Panel"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
            <unset token="tokShowPanel"></unset>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <h3>Click Show to display HTML panel. Click Hide to hide the HTML panel.</h3>
      </html>
    </panel>
  </row>
  <row>
    <panel depends="$tokShowPanel$">
      <html>
        <h2>HTML Panel</h2>
        tokShowPanel: $tokShowPanel$
      </html>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
Preview file
19 KB
Reply
Solved! Jump to solution
Solution

gaurav_maniar
Builder
‎10-25-2019 01:26 AM

Hi @Deepz2612 ,

Try the below code.
Accept & up-vote the answer if it helps.

<row depends="$hidden$">
    <panel>
      <table>
        <search>
          <query>index=_internal | head 1 |stats latest(_time) as Last_Occurance | convert ctime(Last_Occurance)</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <done>
            <set token="test">$result.Last_Occurance$</set>
          </done>
        </search>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <input type="button" value="$test$"/>
      </html>
    </panel>>
  <row>

happy splunking.....!!!!

0 Karma
Reply
Solved! Jump to solution

kamlesh_vaghela
SplunkTrust
SplunkTrust
‎10-24-2019 11:46 PM

@Deepz2612

Have you tried <html> in panel tag?

<panel>
   <html>
   <input type="button" value="my Button" />
   </html>
 </panel>

You can use any HTML tags over here. Please let us know if you have any issue with this.

0 Karma
Reply
Get Updates on the Splunk Community!

Index This | What is broken 80% of the time by February?

December 2025 Edition   Hayyy Splunk Education Enthusiasts and the Eternally Curious!    We’re back with this ...

Unlock Faster Time-to-Value on Edge and Ingest Processor with New SPL2 Pipeline ...

Hello Splunk Community,   We're thrilled to share an exciting update that will help you manage your data more ...

Splunk MCP & Agentic AI: Machine Data Without Limits

Discover how the Splunk Model Context Protocol (MCP) Server can revolutionize the way your organization uses ...