Dashboards & Visualizations

In a dashboard, how do I create a hyperlink that directs to text box?

nick405060
Motivator

Hi there,

I have a dashboard with a text box in it. When I click on a hyperlink on the same dashboard, I want to be able to have the user be directed to the text box (have the form focus on that text box). How do I do this? Basically, I just need to figure out what WHAT_GOES_HERE is in the code below, or figure out another way to do this.

 <form>

      <fieldset autoRun="True" submitButton="false">
        <input type="text" token="equipment_lifecycle">
          <label>Equipment Lifecycle (years)</label>
          <default>1</default>
        </input>
      </fieldset>

      <row>
        <panel>
          <html>
            <p><b>some text</b></p>
            <ul>     
              <li>
                <p>Equipment Lifecycle (Years): <a href="@go?=WHAT_GOES_HERE">$equipment_lifecycle$</a></p>
              </li>
            </ul>
          </html>
        </panel>
      </row>

    </form>

Edit: eventually there will be more than one text box and more that one hyperlink

1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@nick405060

Can you please try this?

<form  script="my.js">       
   <fieldset autoRun="True" submitButton="false">
     <input type="text" token="equipment_lifecycle" id="equipment_lifecycle_id">
       <label>Equipment Lifecycle (years)</label>
       <default>1</default>
     </input>
   </fieldset>

   <row>
     <panel>
       <html>
         <p><b>some text</b></p>
         <ul>     
           <li>
             <p>Equipment Lifecycle (Years): <a id="equipment_lifecycle_link" href="#equipment_lifecycle_id">$equipment_lifecycle$</a></p>
           </li>
         </ul>
       </html>
     </panel>
   </row>
 </form>

my.js

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
    $('#equipment_lifecycle_link').click(function(evt) {
        evt.preventDefault();
        $($('input[id^="equipment_lifecycle_id_"]')[0]).focus()
        return false;
    });

});

Thanks

View solution in original post

niketnilay
Legend

@nick405060 please add more details on the Text Box and HyperLink. Is it Splunk Text box input? Also is the Hyper Link Splunk's Link input or something else?

If the hyperlink is HTML element link anchor tag, you would need to know jQuery and SplunkJS Stack to pass on the token value. Refer to Splunk Blog by @Jconger on using HTML5 inputs in Splunk dashboard using Simple XML JS extension: https://www.splunk.com/blog/2016/09/21/using-html5-input-types-on-splunk-forms.html

If they are both Splunk inputs then you can try the following run anywhere example in Simple XML. PS: Dont bother about the Dark Theme, I was trying out 7.2 ;). Simple XML code does not have Splunk Enterprise 7.2 dark theme dependency, as I have removed theme="dark" from the root <form> node.

alt text

Following is the Simple XML code for run anywhere example in the screenshot above. On click of Click Me link the Text Box value is changed to clicked

<form>
  <label>Set Focus on Text Box based on Hyperlink Clicked</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="text" token="tokText" searchWhenChanged="false">
        <label>Text Box</label>
      </input>
      <input type="link" token="tokLink" searchWhenChanged="true">
        <label></label>
        <choice value="clicked">Click Me</choice>
        <change>
          <condition value="clicked">
            <set token="form.tokText">$value$</set>
            <unset token="form.tokLink"></unset>
          </condition>
        </change>
      </input>
      <html>
        <div>form.tokLink: $form.tokLink$</div>
        <div>form.tokText: $form.tokText$</div>
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

mstjohn_splunk
Splunk Employee
Splunk Employee

hi @nick405060

Did either of the answers below solve your problem? If so, please resolve this post by approving one of them!
If your problem is still not solved, keep us updated so that someone else can help ya. Thanks for posting!

0 Karma

nick405060
Motivator

Not yet, will resolve once solved.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@nick405060

Can you please try this?

<form  script="my.js">       
   <fieldset autoRun="True" submitButton="false">
     <input type="text" token="equipment_lifecycle" id="equipment_lifecycle_id">
       <label>Equipment Lifecycle (years)</label>
       <default>1</default>
     </input>
   </fieldset>

   <row>
     <panel>
       <html>
         <p><b>some text</b></p>
         <ul>     
           <li>
             <p>Equipment Lifecycle (Years): <a id="equipment_lifecycle_link" href="#equipment_lifecycle_id">$equipment_lifecycle$</a></p>
           </li>
         </ul>
       </html>
     </panel>
   </row>
 </form>

my.js

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
    $('#equipment_lifecycle_link').click(function(evt) {
        evt.preventDefault();
        $($('input[id^="equipment_lifecycle_id_"]')[0]).focus()
        return false;
    });

});

Thanks

View solution in original post

nick405060
Motivator

@kamlesh_vaghela Any quick advice on the changes I have to make doing this in Splunk 7.x? Copied my SimpleXML and js file over from our Windows 6.3 environment to our Ubuntu 7.2 environment exactly, js file successfully loads (when I add sourceURL at the bottom), redirection works the first click (without focusing) and then successive clicks neither redirect nor focus. No error message in console.

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

        setTimeout(function () {
            $('#b4_link').click(function() {
                $($('input[id^="b4_"]')[0]).focus();
                return false;
            });
        }, 5000);

    })
});
//# sourceURL=focus.js

and

<form script="myapp:focus.js">
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@nick405060

Can please verify all the IDs which are used in our JS.

Did you get any output from below consoles?

console.log($('#equipment_lifecycle_link'));
console.log($($('input[id^="equipment_lifecycle_id_"]')[0])); 

With the 7.x version, i think don't required setTimeout.

So keep out below code from settimeout;

         $('#b4_link').click(function() {
             $($('input[id^="b4_"]')[0]).focus();
             return false;
         });
0 Karma

nick405060
Motivator

I'm not entirely sure what you mean by "keep out the below code". Here, I'll try to be as verbose as possible describing what is happening. In my Splunk 7.2 instance, I have the dashboard from before:

<form  script="MYAPP:focus.js">       
    <fieldset autoRun="True" submitButton="false">
      <input type="text" token="equipment_lifecycle" id="equipment_lifecycle_id">
        <label>Equipment Lifecycle (years)</label>
        <default>1</default>
      </input>
    </fieldset>

    <row>
      <panel>
        <html>
          <p><b>some text</b></p>
          <ul>     
            <li>
              <p>Equipment Lifecycle (Years): <a id="equipment_lifecycle_link" href="#equipment_lifecycle_id">$equipment_lifecycle$</a></p>
            </li>
          </ul>
        </html>
      </panel>
    </row>
  </form>

And I created this focus.js, bumped, and refreshed:

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
    $('#equipment_lifecycle_link').click(function(evt) {
        evt.preventDefault();
        $($('input[id^="equipment_lifecycle_id_"]')[0]).focus()
        return false;
    });

});

console.log($('#equipment_lifecycle_link'));
console.log($($('input[id^="equipment_lifecycle_id_"]')[0]));

//# sourceURL=focus.js

With these console results:

focus.js:14 jQuery.fn.init [a#equipment_lifecycle_link, context: document, selector: "#equipment_lifecycle_link"]
focus.js:15 jQuery.fn.init {}

And clicking does not focus. I also tried with this focus.js:

require(["jquery", "splunkjs/mvc/simplexml/ready!",'splunkjs/ready!'], function($) {
    $(document).ready(function(){
        console.log($('#equipment_lifecycle_link'));
        console.log($($('input[id^="equipment_lifecycle_id_"]')[0]));
        setTimeout(function () {
            $('#equipment_lifecycle_link').click(function() {
                $($('input[id^="equipment_lifecycle_id_"]')[0]).focus();
                return false;
            });
        }, 5000);
    })
});

console.log("end")

//# sourceURL=focus.js

With these printouts

focus.js:18 end
focus.js:7 jQuery.fn.init [a#equipment_lifecycle_link, context: document, selector: "#equipment_lifecycle_link"]
focus.js:8 jQuery.fn.init {}

And no focusing. With this last focus.js I also tried with setTimeout removed as you suggested, with no luck.

0 Karma

nick405060
Motivator

This is the working .js code for Splunk 6.3 (the answer):

require(["jquery", "splunkjs/mvc/simplexml/ready!",'splunkjs/ready!'], function($) {
    console.log($);
    console.log(this);
    $(document).ready(function(){
        console.log($('#equipment_lifecycle_link'));
        console.log($($('input[id^="equipment_lifecycle_id_"]')[0]));
        setTimeout(function () {
            $('#equipment_lifecycle_link').click(function() {
                console.log("In function");
                console.log($($('input[id^="equipment_lifecycle_id_"]')[0]));
                $($('input[id^="equipment_lifecycle_id_"]')[0]).focus();
                return false;
            });
            console.log("11111");
        }, 5000);
    })
});
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hey @nick405060 ,
just remove console.log. it was for debugging purpose only 🙂

0 Karma

nick405060
Motivator

Let it be known to the world that @kamlesh_vaghela spent 5 hours with me on this, and stayed up till 4am on a weekend to help me out. Best. Person.

niketnilay
Legend

@nick405060 Last week the world got to know at Splunk .Conf 2018 that @kamlesh_vaghela is one of the the best when he got inducted as a Splunk Trust member for "his passion for the amazing Splunk community" and "his Splunk-fu" 🙂

https://www.splunk.com/blog/2018/10/01/we-proudly-announce-the-splunktrust-2019-membership.html

@ppablo_splunk @mstjohn_splunk 🙂

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

kamlesh_vaghela
SplunkTrust
SplunkTrust

@nick405060

Glad to help you 🙂

0 Karma

nick405060
Motivator

Tried this, no luck. I placed the javascript file in my etc/apps/myapp/appserver/static directory, but had to mkdir the appserver and static directory. I also tried it with and without the last _ in $($('input[id^="equipment_lifecycle_id_"]')[0]).focus() but that didn't change anything. Restarted splunk after every change.

Tried with the js file in etc/apps/search/appserver/static as well, both with and without that _

Tried doing <form script="search:my.js"> as well

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Can you please share your sample XML and js file?

0 Karma

pramit46
Contributor

You can try this and let me know if this helps:

<dashboard>
<row>
     <panel>
         <input type="text" token="field1" id="someid2">
            <label>field1</label>
          </input>
     </panel>
</row>
<row>
    <panel>
      <html>
        <a href="#someid2">         
          Just a link
        </a>
      </html>
    </panel>
  </row>
</dashboard>
0 Karma

nick405060
Motivator

Close, but all this does it move my scrolling on the page so that the object is at the top of the page. I'd like it to focus on the object (have the textbox turn blue and have the cursor be in it, like if you click in it)

0 Karma