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>

View solution in original post

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
Take the 2021 Splunk Career Survey

Help us learn about how Splunk has
impacted your career by taking the 2021 Splunk Career Survey.

Earn $50 in Amazon cash!