Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey

Can’t make it to .conf25? Join us online!

Watch Global Broadcast
Get Updates on the Splunk Community!

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you leveraging automation to its fullest potential in your threat detection strategy?Our upcoming Security ...

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...