Part 6 - Dashboards

Author: Ian Britz

Introduction

In this article we're going to combine all of our Forms into one place. We'll want our end-users to be able to switch between them, change filter selections, and enter data. Then we'll want them to see the changes made to the Forms reflected in real-time. In Kepion, we can do this with a Dashboard. 

 

 

Adding a Dashboard

Step 1. To configure a new Dashboard, navigate to the All Dashboards node in the right-hand navigation pane and select Add.

 

 

Step 2. Name the Dashboard Revenue Planning.

 

 

Step 3. Inside, the Dashboard Editor will look similar to the example below. Let's break down the different sections:

1. A list of pages in the Dashboard. Each Dashboard Page can hold multiple Forms, filters, text components, buttons, and more.
2. The various styling elements available in a Dashboard Page.
3. The Dashboard Page we're currently editing.

 

 

 

Configuring a Dashboard Page

Step 1. Let's add a Form to the Dashboard Page. Right-click in the editor and select Add Form.

 

 

Choose which Form we want to display from the Form drop-down menu. Select Assumptions.

 

 

Step 2. Let's also add some text to the page so end-users know which Form this is. Click out of the form box. Now right-click the page and select Add Text.

 

 

A Text Component will be added to the page. We can click in the box to add some text, and style it however we choose. Let's just write the name of the Form.

 

 

Step 3. Now let's add our Filters to the Dashboard. Right-click in the editor window again and select Add Filter.

 

 

Select Assumptions for the Form and Scenario for the Filter.

 

 

You can copy and paste to quickly add the other two filters.

 

  

We can then style filters to create a more cohesive theme.

 

 

 

Configuring Buttons 

Step 1. In order to submit data from the Dashboard to the server, we need to use a Workflow Action called Post. Let's start by creating a new text component. Change the text to Update.

 

 

Step 2. Then format it to look like a button.

 

 

Note: In a published App, Workflow Actions are also available from the Action Drop-Down on the right side of the header. However, well-designed buttons tend to improve the user experience.

 

Step 3. Click on the settings  icon. Here we can change the text component into something we can interact with.

 

 

Change the Type to Action and then select Post. Now when someone clicks on this text component, it will trigger the Post Action and send the data we've entered to the database.

 

 

 

Configuring Additional Pages

Step 1. We don't want to overcrowd one page with too much information or too many Forms, so let's create a new page. We'll copy this one from the Assumptions page.

 

 

Tip: The star icon next to the page name indicates which page will open first in the Dashboard. You can change this by right-clicking and selecting Set Start Page.

 

Step 2. Now that we have multiple pages, a Menu Component will be automatically added to let us navigate from page to page.

 

 

In the menu settings, change the Target from Dashboard to Header. This will move the main navigation menu from the Dashboard page itself, to the Header above the page.

 

 

Step 3. Now let's make some changes to this page. First select the Assumptions Form and change the Form selection to Operating Expenses. Update the text above the Form to reflect the change.

 

 

Step 4. Remove the Metric Filter and rename the pages Assumptions and Operating Expenses in the left-hand pane and you should have something similar to the example below.

 

 

Step 5. Add a third page. Include the Net Income Report, some text, and rename the page appropriately. 

 

 

 

Configuring the Header

Step 1. Let's navigate to the Header tab. The Header is a static section at the top of our Dashboard, which users will use to navigate from page to page.

 

 

Our header is looking a bit cramped, so let's change the height in the bottom-left, and drag the menu component's height down to match. You can also use the Top Border, Left Border, and Size options in the bottom-right to define dimensions for the component more accurately.

 

 

Step 2. To style the navigation menu, first change the Mode from Published to Selected. Using the formatting options at the top, click each menu item to style it how you'd like it to appear when it's been selected.

 

 

Tip: You can hold Shift or Ctrl to select multiple items at the same time.

 

Step 3. Likewise, when the Mode is set to Unselected, you can style what the menu nodes look like while they're not selected.

 

 

Step 4. Now let's finish it by adding some text to the header. Here's my completed header design:

 

 

Step 5. Lastly, in the Settings tab, we can add an image that will be displayed as the icon for our App in the APPS Module.

 

 

In the PREVIEW tab we can see the final result:

 

 

 

Next Steps

Now that our Dashboard is finished, we'll need to configure a few additional permissions and administrative settings before we can start using it.

• Part 7 - Administrator Settings