As a way to start looking through Bootstrap within our example, we will take a look at implementing some of the predefined alert message types. You have probably seen these types of alert used before and we will implement them shortly.
As with the other styles we have been working with, we implement the alerts with the specifically designed class, called in this instance alert. This is then followed by one of the four alert type classes:
.alert-success.alert-info.alert-warning.alert-danger
The data that we have been using is for 2015 and I think that it may be worth using an alert to remind our users of this. Log onto your development environment and we will start working with our raw dashboard code again:
- As we are working on with the default implementation of Bootstrap, we can move straight to the html directory of our Splunk App:
cd $SPLUNK_HOME/etc/apps/stock_market/default/data/ui/html/ - Open the
raw_stock_market_historical_overview_html.htmlfile in your text or code editor so we can start to make some changes. - We are going to use a little bit of animation with our alert that will allow our users to remove the alert after they have read it. We are going to achieve this by adding some external JavaScript in the header of our code that will work directly with the Bootstrap CSS. Start by adding the following two lines just before the end of the header:
13 <script src="https://ajax.googleapis.com/ ajax/libs/jquery/1.12.2/jquery.min.js"></script> 14 <script src="http://maxcdn.bootstrapcdn.com/ bootstrap/3.3.6/js/bootstrap.min.js"></script> - We are limited in time to discuss in detail what these files do, but just know that it adds extra JavaScript functionality to our code to ensure that our changes work.
- We are going to place our alert in the body of our dashboard and specify it just above the
Yahoo Stock Valueheading. Firstly, add in the container class with the following line of code:36 <div class="container">
- Bootstrap requires that each of the site elements that we use from the CSS file be wrapped in the container class.
- We can then add in the alert class with the following lines of code:
37 <div class="alert alert-info fade in" style="width:75%;margin-top:18px;"> 38 <a href="#" class="close" data-dismiss="alert" aria-label="close" >×</a> 39 <strong>NOTE!</strong> This stock market data for Yahoo is from 2015. 40 </div> 41 </div> - We are specifying the
alert-infotype, with line 37, and then giving the option to close off the alert if the user wants to dismiss it. We can then specify the text that will be presented as part of the alert. - In line 37, although we are using the external CSS class called alert, we can also add in some inline style definitions to change the default text if there was an issue with the color being used by our theme being difficult to see. Internal, external, and inline CSS can be mixed together, but as we stated earlier in this chapter, it is more efficient to set up all our style definitions as an external CSS file.
- Using CSS that is part of our Splunk installation allows us to work a lot more quickly implementing our changes to our code. Save the changes, refresh the Splunk cache, and reload our dashboard page.
When our page loads, we can see our alert on top of the Yahoo Stock Values heading, providing a note to our users that the data is from 2015. As you can see, it was a simple change but added extra functionality to our dashboard. The functionality also allows the user to cancel this alert if needed.
Tip
This is a good example of issues being caused by mixing up CSS themes and templates. The alert that we have just implemented, although it provides the user with the ability to close the alert, it is very difficult to see on the United theme. If this were implemented onto our production environment, it would be wise to have this option changed within the code. Color can also cause accessibility issues for disabled users or users who are only using a monochrome display. Make sure to keep this in mind when developing your code.