Dashboards & Visualizations

Is it possible to add a button in line with inputs?

nick405060
Motivator

Hi guys,

I am looking for a way to include a js button in line with my input selection. Basically I'd like it to look like how the submit button looks like with its inputs:

[TIMEPICKER] [TEXTBOX] [SUBMITBUTTON]

I've been able to do it using "link", but am looking for other solutions that look better, since link is gray and the style template isn't being applied correctly.

<panel>  
  <html depends="$alwaysHideCSSPanel$">
     <style>
       #submit_button .btn-pill{
           background-repeat: repeat-x;
           background-color: #61a637;
           color: #ffa;
           text-shadow: none;
           text-decoration: none;
           border-radius: 4px;
       }
       #submit_button .btn-pill.active{
           background-color: rgba(100,255,100,.05)  !important;
           text-decoration: none  !important;
           color: #500  !important;
           border-radius: 4px  !important;              
       }
     </style>
  </html>
  <input type="text" token="networkIdOnChange" searchWhenChanged="false">
    <label>NetworkID:</label>
    <default></default>
  </input>
  <input type="text" token="networkid" depends="$justHideMe$" searchWhenChanged="false">
    <default>$networkIdOnChange$</default>
  </input>
  <input type="link" id="submit_button" searchWhenChanged="true">
    <label></label>
    <choice value="submit">Submit</choice>
  </input>
</panel>
0 Karma
1 Solution

vnravikumar
Champion

Hi

Try this. I had modified CSS

[updated]

<form>
  <label>button</label>
  <fieldset submitButton="false" autoRun="false"></fieldset>
  <row>
    <panel>
      <html depends="$hide$">
      <style>
     #submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]
      {
      width:35% !important;
      }

    #submit_button  button  {
      padding: 6px 15px !important;
      border-radius: 3px !important;
      font-weight: 500 !important;
      background-color: #5cc05c !important;
      border: transparent !important;
      color: #fff !important;
  }


  #submit_button  button:hover{
    background-color: #40a540 !important;
    border-color: transparent !important;
  }
    </style>
    </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="text" token="networkIdOnChange" searchWhenChanged="false">
        <label>NetworkID:</label>
        <default></default>
      </input>
      <input type="text" token="networkid" depends="$justHideMe$" searchWhenChanged="false">
        <default>$networkIdOnChange$</default>
      </input>
      <input type="link" id="submit_button" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
    </panel>
  </row>
</form>

View solution in original post

vnravikumar
Champion

Hi

Try this. I had modified CSS

[updated]

<form>
  <label>button</label>
  <fieldset submitButton="false" autoRun="false"></fieldset>
  <row>
    <panel>
      <html depends="$hide$">
      <style>
     #submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]
      {
      width:35% !important;
      }

    #submit_button  button  {
      padding: 6px 15px !important;
      border-radius: 3px !important;
      font-weight: 500 !important;
      background-color: #5cc05c !important;
      border: transparent !important;
      color: #fff !important;
  }


  #submit_button  button:hover{
    background-color: #40a540 !important;
    border-color: transparent !important;
  }
    </style>
    </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="text" token="networkIdOnChange" searchWhenChanged="false">
        <label>NetworkID:</label>
        <default></default>
      </input>
      <input type="text" token="networkid" depends="$justHideMe$" searchWhenChanged="false">
        <default>$networkIdOnChange$</default>
      </input>
      <input type="link" id="submit_button" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
    </panel>
  </row>
</form>

nick405060
Motivator

I copied and pasted this exactly in 7.2.0 and there were no style changes to the link.

0 Karma

vnravikumar
Champion

Hi
[updated]:
Use the below style

     <style>
        #submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]
         {
         width:35% !important;
         }

       #submit_button  button  {
         padding: 6px 15px !important;
         border-radius: 3px !important;
         font-weight: 500 !important;
         background-color: #5cc05c !important;
         border: transparent !important;
         color: #fff !important;
     }


     #submit_button  button:hover{
       background-color: #40a540 !important;
       border-color: transparent !important;
     }
       </style>
0 Karma

nick405060
Motivator

works with this style!!! thank you!

0 Karma

nick405060
Motivator

the only issue with this is that it seems the button is invisibly bigger than it is. e.g., if you click to the RIGHT of the button, for another like inch, it also treats it as a button click? @vnravikumar

0 Karma

vnravikumar
Champion

No, it won't I had checked.

0 Karma

nick405060
Motivator

that behavior is existing for me. not sure why.

0 Karma

nick405060
Motivator

as mentioned here this style only adjusts the visual width, not the click width. for anyone who is trying to implement this style and also fix the clicking issue, I have posted a separate question here:

https://answers.splunk.com/answers/758977/how-to-adjust-the-click-width-of-a-js-button.html

0 Karma

harshpatel
Contributor

Hi @nick405060,

I encoutered something similar to this. If you inspect the HTML generated by your XML you will realise where the problem lies.

To solve I assigned an id to panel and then through javascript I added the button as follows:

XML:

<panel id="mypanel">  
   <html depends="$alwaysHideCSSPanel$">
      <style>
        #submit_button .btn-pill{
            background-repeat: repeat-x;
            background-color: #61a637;
            color: #ffa;
            text-shadow: none;
            text-decoration: none;
            border-radius: 4px;
        }
        #submit_button .btn-pill.active{
            background-color: rgba(100,255,100,.05)  !important;
            text-decoration: none  !important;
            color: #500  !important;
            border-radius: 4px  !important;              
        }
      </style>
   </html>
   <input type="text" token="networkIdOnChange" searchWhenChanged="false">
     <label>NetworkID:</label>
     <default></default>
   </input>
   <input type="text" token="networkid" depends="$justHideMe$" searchWhenChanged="false">
     <default>$networkIdOnChange$</default>
   </input>
 </panel>

JavaScript:

require([
    "jquery",
    "splunkjs/mvc/simplexml/ready!"
], function ($,mvc) {

    $("#mypanel > div > div").append('<div class="input"><label> </label><div class="splunk-view"><button class="btn" id="submit_button">Submit</button></div></div>')
});

Hope this helps,
Harsh

0 Karma

nick405060
Motivator

This did not work for me in 7.2.0 using

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var defaultTokens = mvc.Components.get("default");
     var submittedTokens = mvc.Components.get("submitted");
     $('#submit_button').on("click",function(){
         submittedTokens.set("submit_trigger", ""+Math.random());
         defaultTokens.set("submit_trigger", ""+Math.random());
     });
     $("#mypanel > div > div").append('<div class="input"><label> </label><div class="splunk-view"><button class="btn" id="submit_button">Submit</button></div></div>');
 });

and

<form>
   <label>button</label>
   <fieldset submitButton="false" autoRun="false"></fieldset>
   <row>
     <panel id="mypanel">
       <html depends="$hide$">
      <style>
         #submit_button .btn-pill{
             background-repeat: repeat-x;
             background-color: #61a637;
             color: #ffa;
             text-shadow: none;
             text-decoration: none;
             border-radius: 4px;
         }
         #submit_button .btn-pill.active{
             background-color: rgba(100,255,100,.05)  !important;
             text-decoration: none  !important;
             color: #500  !important;
             border-radius: 4px  !important;              
         }
       </style>
     </html>
       <input type="text" token="networkIdOnChange" searchWhenChanged="false">
         <label>NetworkID:</label>
         <default></default>
       </input>
       <input type="text" token="networkid" depends="$justHideMe$" searchWhenChanged="false">
         <default>$networkIdOnChange$</default>
       </input>
       <input type="link" id="submit_button" searchWhenChanged="true">
         <label></label>
         <choice value="submit">Submit</choice>
       </input>
     </panel>
   </row>
 </form>

However my question has been answered in the other answer.

0 Karma

nick405060
Motivator
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...