3. Add a jQuery UI Accordion

A really great feature of the Splunk Web Framework is the ability to incorporate other tools and libraries so that your app isn't limited to Splunk views in the Web Framework. In this step, we'll use a widget from jQuery UI, which is a great place to find open-source UI tools.

So, let's say our dashboard looks too cluttered and we want to have everything on one row. To accomplish this we can put the "Top Artists Downloads" chart to the left, and then put the "Top Artist Searches" chart and "Top Song Downloads" table into one container that displays one view at a time. We'll use the jQuery UI Accordion to do this.

This example in the jQuery UI documentation shows how to integrate the widget into web pages, so we'll modify our music dashboard accordingly.

  1. Let's rework and simplify the layout so that we have just one row of views with two columns. We'll move the "Top Artists Downloads" chart to the left column, then use an accordion container in the right column, and wrap the other chart and table in a <div id="accordion"> tag.
  2. Look for the layout section, <!--- BEGIN LAYOUT -->, and find this code:

        <div id="row1" class="dashboard-row dashboard-row1">
    
        . . .
    
    <div class="footer"></div>
    

    Replace it with this:

        <!-- First row -->
        <div class="dashboard-row">
    
            <!-- Moved up -->
            <div class="dashboard-cell">
    
                <div class="dashboard-panel">
                    <div class="panel-element-row">
                        <div class="dashboard-element chart">
                            <div class="panel-head">
                                <h3>Top Artist Downloads</h3>
                            </div>
                            <div class="panel-body">
                                <div id="element3"></div>
                            </div>
                        </div>
                    </div>
                </div>
    
            </div>
    
            <div id="accordionpanel" class="dashboard-cell">
                <!-- Accordion widget -->
                <div id="accordion" class="dashboard-panel">
                    <h3>Top Artist Searches</h3>
                    <div class="panel-element-row">
                        <div class="dashboard-element chart">
                            <div class="panel-body">
                                <div id="element1"></div>
                            </div>
                        </div>
                    </div>
                    <h3>Top Song Downloads</h3>
                    <div class="panel-element-row">
                        <div class="dashboard-element table">
                            <div class="panel-body">
                                <div id="element2"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
        </div>
        <!-- End first row -->
    
    </div>
    <div class="footer"></div>
    
  3. We need to add a reference to the jQuery UI CSS and add another style for the new accordion panels. Find this code:
  4. </head>

    Insert this code above it:

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
        <style>
            #accordionpanel { 
                background-color: inherit;
            }
        </style>
  5. To get jQuery UI Accordion functionality, we need to add a reference to the jQuery UI library. (The basic jQuery library is already included in the Splunk Web Framework.) For this tutorial, we'll just refer to the library URL. However, in practice, the recommended way to do this is to bundle dependencies with your app.
  6. Find this code:

        waitSeconds: 0 // Disable require.js load timeout

    Replace that line with the following code:

        waitSeconds: 0, // Disable require.js load timeout
        // For this tutorial, download third-party libraries over the internet.
        // In practice, it is recommended that you bundle dependencies with your app.
        paths: {
            'jquery-ui': 'http://code.jquery.com/ui/1.10.0/jquery-ui'
        },
        shim: {
            'jquery-ui': {
                deps: ['jquery']
            }
        }
  7. We need to make some calls to the library before loading other requirements. Find this code:
  8. require([

    Insert this code above that line:

    // 
    // ACCORDION
    // 
    require(['jquery-ui', 'splunkjs/mvc/simplexml/ready!'], function() {
        $('#accordion .panel-title').remove();
        $('#accordion .fieldset').remove();
        $('#accordion').accordion({
            heightStyle: "content"
        });
    });
  9. Finally, find this code:
  10.     "splunkjs/mvc/simplexml/urltokenmodel"
        // Add comma-separated libraries and modules manually here, for example:
        // ..."splunkjs/mvc/simplexml/urltokenmodel",
        // "splunkjs/mvc/checkboxview"
        ],

    Replace it with this code to add the library to the requirements:

        "splunkjs/mvc/simplexml/urltokenmodel",
        "jquery-ui"
        ],
  11. Save this page. If you're using your own text editor, refresh Splunk Web (open http://<localhost:port>/debug/refresh in your web browser and click Refresh), then reload the dashboard (open http://<localhost:port>/app/musicdashboardtutorial/music).
  12. Here's the accordion:

    App with the Accordion view

    App with the Accordion view

Continue to 4. Add a D3 visualization.