Splunk UI and the Dashboard Framework: More Visual Control Than Ever

If you attended .conf21, or followed any Splunk blogs by Lizzy Li for the past year, then you likely have heard of Splunk Dashboard Studio — our new built-in dashboarding experience included in Splunk Enterprise 8.2 and higher and Splunk Cloud Platform 8.1.2103 and higher. With new, beautiful visualizations and the ability for more visual control over the dashboard, our customers and Splunkers alike have been creating beautiful and insightful dashboards to turn data into doing.

You may have also noticed that the dashboards and visualizations inside of Dashboard Studio look similar to visualizations inside of other Splunk apps, such as Mission Control, Enterprise Security 7.0 and the Glass Tables in Splunk IT Service Intelligence. That is because all of these solutions use the same underlying visualizations and dashboard framework, which drives the user experience. As of .conf21 any Splunk app developer can incorporate the Splunk Dashboard Framework and other visual components from Splunk UI into their apps. In this blog post, we will cover what the Dashboard Framework is, how you can access it, and how it can help developers meet their advanced dashboarding needs outside of Dashboard Studio and Classic Dashboards. 

Dashboard Studio: Built on Top of our Dashboard Framework

Dashboard Studio is designed to provide an intuitive dashboard building experience, enabling dashboard creators to have more control over the dashboards they are creating. The hope is that we can provide enough customizability so that most users won’t need custom development with JavaScript or CSS, like they needed for advanced use cases in our Classic Dashboards. With absolute layout and the tools to control branding (such as color, icons, images and SVG’s) Dashboard Studio covers many of the use cases previously achieved with custom CSS or HTML extensions in Classic Dashboards. 

^{A Dashboard designed for Splunk TV.}

What about custom JavaScript in Dashboard Studio? We intend to support most of the common custom JavaScript use cases, such as opening informative tooltips or modals, including a visualization from a 3rd party source and more as built-in Studio features over time. However, we know that today app developers are already keen to create custom dashboards including integrations with other tools and customized workflows. For users that still need to meet these requirements, directly developing and shipping custom react pages built with @splunk/create and the Splunk Dashboard Framework may serve as a better alternative compared to Dashboard Studio, and so we’re here today to tell you more about it. 

Getting Started with the Dashboard Framework

When you develop with the Dashboard Framework, and @splunk/create, you are creating a ReactJS app and importing the tools that allow you to render dashboard and visualization components inside of that app. This allows you, the developer, to use these different packages to create custom pages inside of your app that can act as Splunk dashboards and resemble the ones created in Dashboard Studio. However, these custom pages can go beyond the current capabilities of dashboards created inside of Dashboard Studio by allowing you to build completely custom components and pages. The best way to get started is to check out our examples gallery, where we have tutorials that will help you get started with creating a Splunk app and creating a dashboard with custom functionality. 
 

 ^{A custom modal interaction built with Splunk UI and Splunk Dashboard Framework}

When Should I use the Dashboard Framework?

When you need the latest visualization and dashboard framework features, now.

Developing an app with the Dashboard Framework means you will be building on top of the latest and greatest dashboard and visualization packages that are used in products like Dashboard Studio, ITSI, and Splunk Enterprise Security.  This allows you, the developer, to release a custom experience with the latest dashboard and visualization features inside, or outside, of a Splunk Enterprise or Splunk Cloud Platform release. This is especially useful for Splunk Enterprise customers whose development is constrained by the Splunk Enterprise or Splunk Cloud Platform release cycle.

When you have savvy React developers at your organization.

If you have savvy React developers at your organization, and your organization is interested in going above and beyond what Dashboard Studio provides today, then the Dashboard Framework might be a good fit for you. Many of the examples in our Examples Gallery show customizations built on-top of our Dashboard Framework. 

If you're willing to accept some tradeoffs.

It is important to note that one of the main drawbacks to developing directly with the Dashboard Framework is that the UI and source editors for dashboards, as well as PDF and PNG export capability, are only available in Dashboard Studio dashboards. So if end user control through the editors and PNG/PDF export are important for your view, a Dashboard Studio dashboard would likely better suit your needs. If you’re willing to trade-in this functionality for more complex interactions, and custom capabilities, consider developing your view with the Dashboard Framework. 

Keep in mind that your custom app can contain a Dashboard Studio dashboard, a custom React page, and Classic Dashboards. So this isn’t a case where you need to choose one or the other. Whatever path you choose, we hope that our suite of dashboarding capabilities can help with the unique use cases that dashboard and app developers are solving every day.
 

^{A custom example built with Splunk UI and the Splunk Dashboard Framework.}

Next Steps and Resources

If you think that delivering dashboards with the Dashboard Framework is the right solution for you, or if you think you want to try it yourself to evaluate the possibilities, check out the Splunk UI Toolkit Examples Gallery, which has a few examples of open-source apps developed with the dashboard framework. We showcase different use cases of the Dashboard Framework, and are always looking for feedback of other use cases to include. 

Resources:  

• Splunk UI Documentation
• Getting Started Guide
• Examples Gallery, complete with code available on GitHub.
   

.conf21 Talks around Splunk UI and the Splunk Dashboard Framework:

• DEV1134A - Introducing Splunk UI Framework: Build Splunk Apps with React. 
• DEV1328C - How I Built It: Extending the New Dashboard Framework for Real-World Applications
• DEV1595B - Splunk + React = :Mindblown:
   

This blog was co-authored with Nusair Haq, Product Manager for Splunk Web Platform Projects.

----------------------------------------------------
Thanks!
Ryan O'Connor