Overview
In this session, we'll build the dashboard that will drive our revenue planning app. First, we’ll get an overview of what dashboards are, and their purpose in an application. Then we’ll walk-through the process to build a dashboard in Kepion. And lastly, we’ll configure and customize the dashboard header and navigation bar.
Transcript
[transcript]
In this session, we're going to build the dashboard that will drive our revenue planning app. First, we'll get an overview of what dashboards are and their purpose in an application. Then we'll walk through the process to build a dashboard in Kepion. And lastly, we'll configure and customize the dashboard header and navigation bar.
A dashboard begins as a blank canvas. Then we can take all the components we've built, forms, charts, filters, rules, and more, and arrange them onto the canvas however we'd like. This will be the interface for end users to interact with the application we built.
Now let's create a dashboard in Kepion.
Select the dashboard node and choose add. Let's name it revenue planning.
The dashboard editor has four tabs. The first tab is for building the dashboard pages. The second is for designing the header and navigation bar. The third tab provides a real time preview of the whole dashboard. And in the last tab, we can set our thumbnail icon.
Let's start with the dashboard tab.
In the center, we have our blank canvas. We can change the size in the bottom left. The icon here indicates that this page size will be shared across all pages in our dashboard. If we want to change just the size of a single page, all we have to do is click the icon to unlink it.
We can right click on the canvas to add a new component. Let's select add form. Then we need to choose which form we want. We'll start with the P and L.
If we click the settings icon, we can configure some additional settings. As the P and L report doesn't allow input, let's set it to read only to avoid any accidental changes.
Now let's add some filters. We just need to select which form the filter is associated with, and then we can choose the available filters for that form.
Let's add some color to create a consistent theme.
We can copy and paste components to speed up the process, and we can use the alignment option here to help arrange everything.
Let's also add some text to the page so we can title the form.
Now we have a standard dashboard page.
To add new pages, we can either create a blank page from scratch or use the one we have as a starting point by duplicating it. The names shown here are the page names. We can also rename them.
The star indicates which page will be the starting one.
Let's now change the form to the deflator percent form and then remove the read only restriction, as this is an input form. The filter settings will be automatically picked up if the same filter definition exists in the new form.
When we have filters with the same definition on multiple pages, we need to consider if we should link the filters together. Then if a filter is changed on one page, all the filters on the other pages will be changed as well.
This behavior can be controlled in the filter settings here. Note that each filter link only works in one direction. If we check P and L here, the P and L filter will change when we change the deflator percent filter, but not vice versa.
If we want the reverse behavior, we have to define the link on both filters. Let's link all the filters together.
Then we can verify that changing the filter on one page affects the filter on the other.
Now let's move on to the header.
The header canvas functions the same as the dashboard canvas. Let's adjust the height and then change the separator color.
We can right click to add various components.
The navigation menu can be customized as well. If we switch the mode to selected, we can style how the selected parent and child items will appear, and likewise for unselected.
Changing the mode back to published will give us a preview of our navigation menu. We can reorder the header by clicking on the hamburger icon.
On the right side of the header, we have the action menu. The options here allow us to refresh and exit. This is the button that contains all of our workflow actions, like updating data, saving a plan, discarding the instance, different exporting options, and view activity.
If we want more control over the workflow process, we could hide this menu from the left pane and then add buttons to our dashboard to trigger these actions.
To create a button, first add a new text or image component.
Then in the settings, we can link the component to another page, any URL, or one of our workflow actions. Let's select update.
Now instead of accessing the action menu directly, users can post their data by clicking on this button.
Now let's add pages for the rest of our forms and style the dashboard. This is what the final result looks like.
In this session, we examined what dashboards are and their purpose in an application. Then we went through the process to build a dashboard in Kepion. And lastly, we configured the dashboard header and navigation bar.
In the next session, we'll look at publishing our dashboard into a format that end users will be able to interact with and begin entering data into our application.
[/transcript]