Dashboards & Visualizations

How Do I Update Url With Search Tokens in HTML Dashboard

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

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

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

0 Karma

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

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

Champion

Do you have submit button also?

0 Karma

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
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!