Giving a module its own custom HTML ID

[cmak]

Splunk seems to give all the modules a dynamic ID in the HTML, for example, Pulldown_2_13_0.

In my CSS / JS files, I occasionally need to select these elements by ID.
If i make any change to the XML, these IDS change.

I know CustomBehavior is a good way to prevent this, but sometimes, it is unpreventable. For example, if I want to hide 5 modules at once around the page with 1 custom behavior.

I was wondering if there is a way to give these Splunk modules a custom ID, or maybe just the Sideview modules?

[sideview · Accepted solution]

With the Sideview modules, assuming you're using a relatively recent copy of the Sideview utils app, all the Sideview modules have a cssClass param that you can set to whatever you like.

For the core modules, besides the brittle and everchanging id's, you can often define some hierarchical rules based on the layoutPanels:

.dashboardContent .SimpleResultsTable {
    /*
    this will applywhenever a SimpleResultsTable is inside a 
    dashboard panel  (ie inside one of the rounded-corner 
    white panels on Splunk dashboard views)
    */
}

but the cssClass param should work well if you're ultimate goal is to apply custom CSS in a stable way.

If you're ultimate goal is to use Javascript to do things in the page, then you're better off looking into the CustomBehavior module. For very advanced users technically all Sideview modules also have customBehavior params, but the CustomBehavior module is a bit easier to deal with conceptually. And beware that you may be writing a customBehavior for something that can be done using just the regular Sideview modules. When in doubt post another question.

[cmak]

The custom classes with Sideview models are great.
For the non Sideview modules, I typically use :eq(n) in the jquery selector, which is the best i can think of.

[LukeMurphey]

As far as I am aware, the built-in modules don't support custom IDs.

You could try using pseudo-selectors such as nth-of-type or nth-child which would continue to work if you changed the structure of the page provided you didn't change the order of particular types of modules.

For example, the following will match the first SimpleResultsTable regardless of its ID:

.splView-SomeView .SimpleResultsTable table:nth-of-type(1){
     font-size: large;
}

With this approach, your CSS that matches a SimpleResultsTable would not fail if you added another search or hidden chart formatter in the tree provided that you didn't put another SimpleResultsTable in the tree before the one you intended to match.

You can do the same in the Javascript:

$('.splView-SomeView .SimpleResultsTable table:nth-of-type(1)');

I know that isn't great, but at least it will continue to work with minor changes to the page.