SPLK-1003 Splunk Enterprise Certified Admin – Splunk Apps And Add-On’s Part 3

11. Custom Navigation inside Apps Using Splunk Web

As part of our learning to create an app using Splunk Web, we will see how to customize this newly created Splunk app that is using Splunk Web. As you can see, we are using Splunk demo Web, that is the Web. We have used the web component of Splunk to create this app and we’ll see how we can and edit this navigation using Splunk Web. In order to edit this navigation, go to Settings. Click on user interface. Under User Interface you will see many menus which are the UI component of Splunk. But we’ll be focusing here mainly on the navigation menus.

Click on navigation menus. We know by now that the navigation menu is the default XML file. So in order to edit this file, click on Default XML. That is default file. As you can see, this is the same file we saw while editing during the app creation using CLI method. So here we’ll create a custom collection and probably we’ll change some random value. We’ll put it six ABCD and Zero and let us see what color it pops up after saving this. So this is the collection and we will create our own collection. This is basic XML Editing. We are not doing anything much fancy here. We are just adding a couple of tags. That is our collection tag. I close this collection tag. I’ll give this a label called Main Menu.

And inside this I’ll create one more collection in order to show you how complex this visualization can be done using a simple XML editing. So I’ve created one more collection tag in order to make it more formatted so that you’ll be able to understand better. This is our new collection tag and I’ll give this a label called Submenu. Let us save this and notice the difference in our navigation of newly created Splunk demo that is using our web. I’ll go ahead and save this. It will check for a syntax in case we have missed any tags. It will pop up with an error saying unexpected or error passing the XML and it is expecting a closure of our XML.

So we have edited this XML in case if it notices any error. You will not be able to save this or modify this view. We have saved this. So once this has been successfully saved, go ahead and refresh your newly created demo app. You’ll be able to notice the difference. As you can see, we have our newly edited color which is cool, that is blue color and there is a main menu which is as part of our let me open up the XML so that you’ll be able to better catch hold of things. This is our main menu. That is the top level collection. This tag and when I expand this, you get a data set that is direct linkage to a data set. The view name under that collection. As you can see, there is one more collection inside this collection named as Submenu. So here you get another menu as when you click it, opens up three other submenus. So this way you can customize your dashboards in much more interesting ways, where you’ll be able to present it in a better manner.

12. Custom Static Content Location for Apps

As part of creating our own apps. We have a couple smaller topics in order to cover and then we’ll be able to package our app successfully and submit it to our Splunkbased portal where it goes for an approval. Once reviewed, your app will be published and you’ll get a chance to go for 50 GB of license, which is free of cost for developer. And you can use this in order to create more apps, learn more about Splunk and you can explore with 50 GB of data a lot more. So in order to finish our chapter about how to create an app, we need to understand changing default colors which we have already seen. Changing the default colors in our default XML makes our complete UI look different. And also we can add new colors to the dashboard or apps by editing default XML.

And we’ll now see where we can place our static contents like CSS and JavaScript, including images and HTML in our apps directory. And finally we’ll see how to package an app and submit the app to Splunkbase. So the first step here is let’s see where we can place our CSS, JavaScript, image files and HTML files, the static contents of your application inside your app. For this example, we’ll be considering the search app which is the default. Let us get into opt Splunk, this is our Splunk home etc apps, then followed by your custom created app.

But here will be in order to understand JavaScript and CSS location, we’ll be using the Search app. So under your app go to search and there will be a folder called App Server. So this is where all your static content goes in, in case if you have any executables like scripts, bash, script or batch, even exe files, DLL files, all this can be inputted under Bin.

The app servers holds some of the important files for running this application. And also there is static where you will be uploading all your static contents, that is your image files. So here under static you can upload your app icon which is displayed as part of your search and reporting. One is this icon, the second one is on the launcher screen which you will be able to see. You’ll be able to see your app icon. This is one icon, and the second icon is part of your app menu that is right next to your home button. So this is the app icon. So in this static folder you’ll be able to place these icons which are of specific sizes. Once you understand the app icons, let us see where we can place the other static elements. For that you need to go under App Server. Under app server.

So here you’ll be able to see all the static elements of your app including CSS, HTML, app logos and any other images that are as part of your application. So make sure all your static elements goes under app server static Fold the next step is packaging of your application. In order to package your application. You can use any archiving software like Windrar, Wind, Zip or Seven Zip and you can select the package that you have developed and make sure, before packaging, all your configuration is placed under default. So that since you are a developer, your source will not be modified and it will be used by the other Splunk community member so that they can change their config configuration under local and they don’t mess up with your default configuration. You can package this app so that all the files are placed under your default location and then you can zip it or archive it with any of the archiving software.

13. Changing Custom Background of Login Page

As part of our understanding about customization in Splunk, let us see how we can customize the Login screen. The default login image that is the background image of your login page. In order to change it login to Splunk. We’ll be seeing how we can customize this login page using Splunk Web. Then we will be seeing how to customize your logo of the Splunk by replacing with your company logo using CLI method. In order to begin, click on Settings server Settings. So this complete customization of your login page will be through Splunk Web. So once your server setting screen loads up, click on Login Background and as you can see by default it uses the Splunk image. If you don’t need any image, you can select it as no image.

14. Custom Logo for the Splunk Login Page

Which is this file. We’ll be uploading this logo and also we’ll be able to notice the changes that was Splunk web configuration. Let us go to our web cone which is in system local. If you go to webcam and as we can see here, the login background image has been set to custom option that we choose in our Splunk web console. Then the background images that is the image that we uploaded using the Splunk web is stored under search app server static. After that, this is the complete path. So App server static is the location where you need to upload all your static contents.

We will see how our custom logo we are in system local. Let me go to opt Splunk etc apps. This is your search app home directory. Under this it will be under app server static. So here will be our login custom background. That is the file that was as part of our web cons. As you can see, this is the folder that it is referring under search application. That is login custom background. Under this folder you will be able to see the uploaded custom logo jpg and I’ve already uploaded our logo that is this file as part of our demonstration. In order to replace the Splunk enterprise logo in your login page, all you need to do is add one more argument in your web.

That is login custom logo. The file that we are seeing is your logo jpg. As you can see it follows the similar path as of your background image. So we copied this file to our same folder and we’ll mention this under login custom logo parameter of web. Let us save this file. Restart your splunk instance. Once it is successfully restarted, we should be able to see a new image that this image as part of our customized.

15. Customizing App Icon

As part of our customization in Splunk, we’ll be changing now the logo for our newly created application. So we’ll be changing logo for Splunk. com that we created as part of our Linux CLI. And this is the app that was created as part of Splunk web console. Now let us disable this and go back to Splunk. com. In order to disable the app, go to Settings, that is your app settings. So once here, look for the app that you would like to disable. Click on disable. We have seen multiple ways of disabling app as part of our previous videos.

Now we have just the Splunk. com that we created as part of our learning of app creation using Linux CLI. That is the backend method. Now we’ll be seeing how to replace this default logo with our Splunk logo itself. So in order to do that, go back to CLI. That is our Linux CLI. Let me change the font size. So now I am in my search ed where the app is installed and I am at my user home, that is Splunk home. I’ll go to Splunk etc. Under etc. We’ll go to our app, that is the app that we created. And under this go to a folder called Static.

Okay, as of now, we don’t have any folder called Static. In order to change this icon, you need to have a Static folder under your application. So this is our application. Let us create a folder name Static where you will be copying your application logo. So for this example, as part of our learning, we’ll be copying the same logo of search and reporting into Splunk. com. If you have any customized logos of your organization or your teams, you can copy it directly into this location. So I’ll be copying from our search app Static folder. The file is called as app icon. Now we have successfully copied the app icon. This is the file that will be used. But I have copied all the files so that it can render in all the pages of the application. So this file will be able to see, once we have restarted our Splunk instance, how the icon app icon changes. As soon as Splunk is successfully restarted, go back and refresh the page. Our session will be expired. As you can see now our app icon has been successfully replaced by the search and reporting app itself. So this is how you typically change your app icon or can create your own app icon and place it under your application static folder.