Dashboards & Visualizations

Custom Module getting ModuleID from js

phoenixdigital
Builder

Hi All,

I am having a small issue which I am sure has a quite simple answer but I am yet to discover it.

So I have written a custom module which uses Javascript to populate the contents of a HTML div with a particular <div id="chart1">.

myCustomModule.html

<div id="chart1" class='with-3d-shadow with-transitions'>
    <svg> </svg>
</div>

myCustomModule.js

..... lots of code for modules...

// add chart to div
d3.select('#chart1 svg')
    .datum(chartdata)
    .transition().duration(500).call(chart);

Now this is all well and good and works until I add another of the same custom module now I cant identify which div is which.

So digging through Splunks internal modules I came across a way of getting the ID assigned by Splunk to the module.

So I now have the following

myCustomModule.html

<%page args="module"/>

<div id="${module['id']}_chart" class='with-3d-shadow with-transitions'>
    <svg> </svg>
</div>

Now this correctly adds the modules ID to output this HTML

<div id="myCustomModule_0_11_0_chart" class='with-3d-shadow with-transitions'>
    <svg> </svg>
</div>

etc..............

<div id="myCustomModule_0_14_0_chart" class='with-3d-shadow with-transitions'>
    <svg> </svg>
</div>

This is great and extactly what I want. My only issue now is how do I get the module ID from within my myCustomModule.js?

myCustomModule.js (see **HowDoIPutTheModuleIDHere** for where I want the ModuleID to make myCustomModule_0_14_0_chart)

..... lots of code for modules...

// add chart to div
d3.select('#***HowDoIPutTheModuleIDHere*** svg')
    .datum(chartdata)
    .transition().duration(500).call(chart);

I have been digging around but haven't found anything yet any help would be greatly appreciated.

0 Karma
1 Solution

sideview
SplunkTrust
SplunkTrust

From a module's JS you can get the module id just with this.moduleId.

What's unusual about it is that the property is assigned by ModuleLoader as it's initializing the modules. This is why you don't see much or any evidence of the property existing or being initialized in the module class itself.

And one other thing that can be problematic, is that the property is not actually defined in the initialize() function, and therefore also not in any functions called during initialize. ModuleLoader doesn't assign the property until the module is constructed, ie until initialize returns. This can be problematic if you really do need to do something when the module is constructed, and sometimes you need to take the last resort of using a setTimeout with a second argument of 0. That will basically defer the execution of the function you're calling in the timeout until after the ModuleLoader's work is done.

And given your "_chart" suffix, the select statement would be d3.select('#' + this.moduleId + '_chart svg')

View solution in original post

0 Karma

sideview
SplunkTrust
SplunkTrust

From a module's JS you can get the module id just with this.moduleId.

What's unusual about it is that the property is assigned by ModuleLoader as it's initializing the modules. This is why you don't see much or any evidence of the property existing or being initialized in the module class itself.

And one other thing that can be problematic, is that the property is not actually defined in the initialize() function, and therefore also not in any functions called during initialize. ModuleLoader doesn't assign the property until the module is constructed, ie until initialize returns. This can be problematic if you really do need to do something when the module is constructed, and sometimes you need to take the last resort of using a setTimeout with a second argument of 0. That will basically defer the execution of the function you're calling in the timeout until after the ModuleLoader's work is done.

And given your "_chart" suffix, the select statement would be d3.select('#' + this.moduleId + '_chart svg')

0 Karma

phoenixdigital
Builder

Excellent thanks again Nick. See I knew it would be a simple answer and thanks for clarifying why I had trouble seeing it with firebug.

Infact it is actually so simple I am a little embarrassed I didnt just take a stab in the dark and test that.

0 Karma

phoenixdigital
Builder

I found a solution but it is by no means ideal. I am sure there is a better way with access to the ModuleID from javascript.

myCustomModule.conf

[module]
# The JavaScript name of the module
className = Splunk.Module.myCustomModule

# The module class to subclass from
superClass = Splunk.Module.DispatchingModule

description = Another method for giving people access to specific D3 charts who need to use advanced.xml or sideViewUtil

[param:UniqueID]
required = False
default = chart_1
label = This is required when you put more than one of these modules on the same dashboard

myCustomModule.html

<%page args="module"/>

<div id="${module['UniqueID']}" class='with-3d-shadow with-transitions'>
    <svg> </svg>
</div>

myCustomModule.js

..... standard of code for module which pulls in parameters...

var parentThis = this;  

// add chart to page
nv.addGraph(function() {    

...... more code for chart construction.....

// add chart to div
d3.select('#' + parentThis.UniqueID + ' svg')
    .datum(chartdata)
    .transition().duration(500).call(chart);
0 Karma
Get Updates on the Splunk Community!

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...