Dashboard Guide - Part 1 – Kepion Support Center

Dashboard Overview

The Dashboard Designer provides a flexible environment for building Dashboard views for your planning and reporting applications. With a similar look and feel to PowerPoint, you will be able to build a Dashboard with straightforward guidance.

The Dashboard Designer enables easy management of application Dashboards and interfaces across the enterprise. You can access the Dashboard page by selecting the Modeler node on the navigation pane.

Creating a Dashboard

In the right-hand pane, under MODELER, click the All Dashboards node. Then click the Add button in the upper-left corner to create a new Dashboard.

Enter a name for the new Dashboard. You can also create the Dashboard from an existing one by selecting a Dashboard in the Copy From drop-down.

Import/Export a Dashboard

Import and Export buttons are also available in the ribbon within the All Dashboards view. They allow users to transfer Dashboards within or across applications. Please note, if importing a Dashboard file which is exported from another application, all Forms, filters, and Dashboard Rules will need to be re-configured since different applications use different Forms.

Editing in Dashboard Designer

Once you create a new Dashboard, navigate to it from the navigation pane.

For a new Dashboard that was not copied from another one, you start with a blank page named “1”. Click on the Edit button to begin editing.

The Dashboard Designer has a PowerPoint look-and-feel, which makes using it feel very intuitive. There are four tabs over the ribbon.

Dashboard: The main area where you can edit your Dashboard pages.
HEADER: Allows you to edit Dashboard headers.
PREVIEW: Provides an overall picture of the pages you are working on, which is the interface your users will finally see on their screens.
SETTINGS: Setup a profile logo for the Dashboard.

Editing Options

Dashboard Page - A Dashboard can contain as many pages as needed. A page holds different components, such as Forms and filters. Pages are used to deliver content to users.

Add a New Page - There are two ways to add a page to the Dashboard. You can either click the Add button in the ribbon to create an empty page, or right-click on any page tile and choose Copy to create a page from the selected one.

Import/Export a Page - You can export the Dashboard to an .xml file, and import specific page(s) into the current Dashboard.

To export, simply click Export button, and enter the file name you’d like to export to.

To import, click the Import button, and then in the popup window, select the xml file that you need to use for import. Then all the pages of the Dashboard will be listed in the window. Check the ones that you would like to import and click OK.

The imported page will be added to the end of the Dashboard page list.

Please note:

The import function doesn’t provide replace capability. Even if the imported page has the same name as an existing page, it will the added as a new page instead of replacing the existing one.
The filter link will not be imported. Please link filters as needed after import.
The xml file that exported here cannot be imported from All Dashboards view, and vice versa.

Page Size - The default size of the Dashboard page is 1280 * 640. You can modify the size on the left bottom side. We recommend the size should match the typical screen resolution of the users.

There is a link icon in the very corner, which indicates all other pages will inherit these dimensions of the current page. Any changes on the dimensions of the page will be applied to other pages as well.

You can give a certain page “privileges” by breaking the link so that your modification on this very page will not affect others on your Dashboard. The page can be also zoomed in or zoomed out at the lower right corner.

Rename a Page - Page name is displayed on top of the page tile. You can edit the name directly by double-clicking it.

Navigation - Once there is more than one page that has been created in the Dashboard, a navigation will show up in the page editing area.

The floating window allows you to configure the settings of navigation.

Mode - Use Mode to customize the look and feel of the navigation. Select either Selected or Unselected mode, then select the page items you want to configure (highlighted by the gray dotted lines), and then use the Font and Alignment buttons to customize the look of the page items.

The Published Mode will show you how the navigation will finally look like when the current page is selected.

Target - You can put the navigation either in the Dashboard page or in the header.

Orientation - You can have the page items display in the navigation horizontally or vertically.

Display - If two-level navigation is configured, you can use Display to switch between Published (top-level navigation) or Children to format each individual navigation item.

Settings - Click the gear button to open the Navigation settings window to order the navigation items, or configure a two-level navigation.

Multi-Level Navigation

Click the settings icon in the navigation to open the Navigation window.

Create a Header - Click to add a header.

Modify Header Name - Select a header, and click to update the header name.

Delete a Header - Select a header, and click to delete the item.

Organize and Order Navigation Items

The arrow buttons can be used to organize related pages together. The order in the list will be the display order of each navigation item within the navigation component. Should you need to hide a page from the navigation, you can check the Hide checkbox.

Format the Drop-down Menu

Use the FORMAT tab to define how the drop-down navigation will render. You can give the drop-down a background color, give it a border with a specific color, and control the size of each drop-down item. The margin options control the outer margin for the entire drop-down. Disable Hover Effect will turn off the mouse hover effects on the navigation items. Highlight Current Header will show the active header in selected mode should one of its child pages be the currently selected page on the Dashboard.

Order Dashboard Pages

To reorder pages within the Dashboard, simply drag and drop the page tiles in the left pane.

To order the navigation items on the Dashboard, refer to the section Organize and Order Navigation Items.

Set a Start Page

The start page is the first page the users will see when creating a new plan. It is marked by a yellow star besides the page name. Any page can be set as a start page. Simply right-click on the page and select Set Start Page.

Dashboard Background

You may also need to decide on a theme for the Dashboard layout. This can either match the theme of your company’s image or it can be specific to the plan’s purpose. The tool panel is a free-form area where you can customize the background image, color scheme, layout arrangement, and font families. Let’s go ahead and set the background for the Dashboard within the ribbon section. This background will be set across the entire Dashboard.

Solid Color

If you decide that you want more contrast between the background and the content on your pages, you can set background colors to a solid color.

Window Color: Apply to the entire browser window.
Page Color: Apply to the page area that is bounded by the page size. You will see the color immediately in the Dashboard editing area.

Please note, page color is on top of window color in terms of layer ordering. The window below is an example where the background color is set to red and the page color to grey.

Image

You can set an image as the Dashboard background from Background Image. This image will be applied to the browser window.

Click on the Set Image box first to select the image you want to use as the background. You can select from already-uploaded images, or import from your local machine.

Then you can set the size and alignment. Click OK to confirm.

The background image is on top of the Window Color but underneath Page Color in terms of layer ordering.