Dashboards & Visualizations

How Do I Update Url With Search Tokens in HTML Dashboard

SplunkPersonal
Path Finder

Hello Everyone,

I have an HTML Dashboard. On it I have a SearchManager, a TimeRangeView, and a number of DropdownViews and TextInputViews that modify MVC Tokens that are used in the search query. The search updates properly when any of these are changed. If I manually add the token names to the dashboard url, I can load a page where those tokens are pre-populated.

However when any token values are changed when the user interacts with the TimeRangeView/DropdownViews/TextInputViews and the search runs, the url remains the same as when I loaded the page. What is the proper way to update the URL when the search executes so that a user can copy the url and perform that search at a later time with those token values?

Thank you very much for any help you can provide.

Tags (2)
0 Karma
1 Solution

SplunkPersonal
Path Finder

Since I did not receive a reply, I'm assuming there is not a built-in way to handle this via Splunk. I ended up implementing this capability myself by building the new url with my token values (using encodeURIComponent for encoding) and then using history.pushState/history.replaceState to update the actual url without leaving the page. Splunk already parses those tokens out of the url when a user returns to that url later.

Ideally I'd love to see this capability directly integrated into the Splunk token model (allowing user to specify which tokens they want to update in the url and whether they want pushState-type or replaceState-type browser history support).

View solution in original post

paramagurukarth
Builder

Are you updating your tokens via JavaScript. Because normally splunk update the URL If you use internal splunk inputs..
If you are using JavaScript to Update token.. Please update URL token (Submitted Tokens) as well..

var defaultTokens = mvc.Components.get("default"); 
var submittedTokens = mvc.Components.get("submitted"); 
var tokens = {
    get: function(tokenName) {
        return defaultTokens.get(tokenName);
    },

    set: function(tokenName, tokenValue) {
        defaultTokens.set(tokenName, tokenValue);
        submittedTokens.set(tokenName, tokenValue);
    }, 
    on: function(eventName, callback) { 
        defaultTokens.on(eventName, callback); 
    }
};

And do token.get()/set()
Check "Working with tokens in a custom component" here

SplunkPersonal
Path Finder

Since I did not receive a reply, I'm assuming there is not a built-in way to handle this via Splunk. I ended up implementing this capability myself by building the new url with my token values (using encodeURIComponent for encoding) and then using history.pushState/history.replaceState to update the actual url without leaving the page. Splunk already parses those tokens out of the url when a user returns to that url later.

Ideally I'd love to see this capability directly integrated into the Splunk token model (allowing user to specify which tokens they want to update in the url and whether they want pushState-type or replaceState-type browser history support).

phoenix_down
Path Finder

I'm looking for a solution to the same issue. I actually do have a Submit button, which when pressed does update the URL. However, I'd like for users to not have to go through this extra step. Do you mind sharing your code for your solution?

0 Karma

p_gurav
Champion

Do you have submit button also?

0 Karma

SplunkPersonal
Path Finder

Thanks for the reply. I do not have a submit button on the dashboard. I have the SearchManager set to update the search automatically when the tokens change.

0 Karma
Get Updates on the Splunk Community!

New Dates, New City: Save the Date for .conf25!

Wake up, babe! New .conf25 dates AND location just dropped!! That's right, this year, .conf25 is taking place ...

Introduction to Splunk Observability Cloud - Building a Resilient Hybrid Cloud

Introduction to Splunk Observability Cloud - Building a Resilient Hybrid Cloud  In today’s fast-paced digital ...

Observability protocols to know about

Observability protocols define the specifications or formats for collecting, encoding, transporting, and ...