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.
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 All Dashboards 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&L. If we click the gear icon we can configure some additional settings. As the P&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 copying it.
Once we have more than one page, we’ll see a navigation bar. The names shown here are the page names. We can rename them in the panel on the left. The star indicates which page will be the starting one. Then we can choose to place the navigation bar either directly in the dashboard canvas, or in the header. Let’s move it to the Header for now, and we’ll come back to configure it later.
All the components and their attributes have been copied over. Let’s change the Form to the Deflator % 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&L here, the P&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.
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 border color. We can right-click to add various components.
The navigation menu can be customized as well. If we change the Mode to ‘Selected’ we can style what each selected item will look like, and likewise for ‘Unselected’. Changing the Mode back to ‘Published’ will give us a preview of our navigation menu. We can re-order the pages by clicking on the gear icon.
On the right-side of the header, we have the Action Menu. The options here allow us to Refresh, Export, Add Attachments, and view more information. The ACTION drop-down contains all of our Workflow Actions, like posting data, submitting a plan, or exiting the App.
If we wanted more control over the workflow process, we could hide this menu 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 Post.
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 my 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.