Everything works as expected, but we can still clean up our code and move our MenuLinkView view into a separate file. This will make our index.js file smaller and will separate out our components. While this isn’t absolutely necessary for a project of this size, it’s something that should be considered, especially if you end up building something on a much larger scale.
First thing, inside of your app’s appserver/static folder, create a new folder called ‘components’. Then go into your components folder and add a new file called ‘MenuLinkView.js’.
Open up MenuLinkView.js and add the following:
Here we are going to define our MenuLinkView as a module that we can easily import into our index.js file and create a new instance of. The difference here is that we are using define() instead of require(), which we are using inside of index.js. Why define()? It allows us to set up a reusable module using require.js, which is the library that Splunk uses to load in all of JS dependencies.
Next, inside of the define function, add your template and MenuLinkView:
And finally, below the MenuLinkView add:
Back in index.js we need to make some changes. First, remove the reference to loading in the Popdown component, as this is now being loaded in in the MenuLinkView.js file. Next, we need to add a reference to the MenuLinkView file by adding this:
Then add MenuLinkView as a function parameter:
Next, you can remove both the template (linkPopDownTpl) and the original MenuLinkView. Your index.js file should now look like this:
Now, save your index.js file and refresh the dashboard. Everything should be working as before, except now it is separated out to make our code cleaner.
Adding Some Style