Introduction
The Dashboard provides a flexible environment for building Dashboard views for your planning and reporting Applications. With intuitive drag-and-drop functionality, users have the ability to build and implement Dashboards quickly.
Tip: For a detailed how-to on configuring Dashboards, review the Modeler Tutorial.
Manage dashboards
1. Hover over Modeler and select an Application.
2. On the right side of your screen, select All Dashboards.
You should land on the following screen:
Add a new dashboard
1. Select Add.
2. Enter a name for the new Dashboard.
(Optional) If you want to copy Pages from a different Dashboard in the Application, select the existing Dashboard from the Copy From drop-down.
3. Click Save.
The new Dashboard will automatically open in the Dashboard Editor.
Import a dashboard
1. Select Import.
2. Find the target Dashboard (JSON File).
3. Select Open or double-click the file to import.
Note: This action imports an entire Dashboard. You can import specific Dashboard pages in the Dashboard Editor, by selecting Import there. You will get an error message if you try to import or export at the wrong level.
Export a dashboard
1. Select the Dashboard of choice and click Export.
2. Enter a name for the file and click Save.
Dashboard editor
- Dashboard: The main area from where you can edit your Dashboard pages.
- Header: Allows you to edit Dashboard headers.
- Preview: Provides a preview of the published version of your pages.
- Settings: Set up a profile logo for the Dashboard.
When first entering the Dashboard, users will need to select the Edit in the Dashboard Ribbon to make changes.
Dashboard
The Dashboard section is where users will likely spend most of their time when using the Dashboard Editor.
General
- Revert: Exit Editing mode without saving any edits to the Dashboard pages.
- Save: Exit Editing mode with all changes saved.
Text Styling
Change the font and alignment style of selected text.
Editing
Clear formatting, undo, or redo changes that have been made.
Background
Change the window color (areas beyond the page), the page color, and the background image.
Note: The page color takes precedent over the image, and the image takes precedent over the window color.
Manage
- Filter: Link or unlink filters across pages.
- Import/Export: Allow users to transfer Dashboard pages within or across applications. For more information, please refer to the Import and Export Dashboard Page article.
- Disable: Disable selected components.
Page and selection panes
The Dashboard section also has a left pane with Page and Selection.
Page
The Page tab allows users to set the starting page, as well as name, navigate, and reorder the pages.
- Add a page.
- Remove a page.
Name pages by double-clicking the text above the page image.
Drag and drop pages to reorder them.
Selection
The Selection tab allows users to organize page components.
You can also rename the components for easier organization by clicking on the name.
The components are visible when the eye icon on the right is open, and they can be hidden by clicking on the eye. You can show/hide all the components by clicking on Show All or Hide All.
You can adjust the layering of the components by clicking the up and down arrows beside the Hide All button. You can also bring the components forward or backwards by right-clicking them and selecting the relevant option.
Workspace
The Workspace is where users design their pages.
Right-click anywhere on the Workspace (excluding components) to open a menu with the following options:
| Action | Function |
|---|---|
| Add Form | Creates a Form component, which allows users to display and name any of the Forms in their Application. |
| Add Filter | Creates a Filter dropdown menu for your displayed Form. E.g., a time dropdown might have fiscal years users can select. |
| Add Text | Creates a textbox. |
| Add Image | Creates an image box. |
| Add Rule | Creates a component linked to a SQL Rule. E.g., a button that adds members straight to the database. |
| Add Form Action | Creates a component typically included for user convenience. E.g., hide/show empty rows. |
| Add Filter Display | Creates a component to display elements linked to a Filter. Learn more here. |
| Add Menu | Creates a menu that users can populate with links to other pages. |
| Add File Store | Creates a component that allows users to upload attachments through the Dashboard and share files of any type with their teammates. |
| Add Content | Allows users to add a URL or HTML. |
| Add Mapping Filter | Creates a component used to design custom displays with any number of specific filter selections. Learn more here. |
A menu should appear above all of the components when they are selected. Click the component's unique icon on the left to customize and/or configure the component.
At the bottom of the Workspace, you should see the page dimensions (left) and zoom (right). Make sure to click the link icon if you do not want to preserve the ratio between page width and height.
Header
The Header section has similar options to the Dashboard tab; however, there is one unique option in the Header tab.
Banner: Change the background and border color of the banner. Also, you have the option to set the header to be stretched horizontally to the size of the browser window.
Customization
As you add pages to the Dashboard, they will automatically appear in the Application's Header. Click on the display to begin customizing its look and formatting.
The following menu should appear above the display:
Mode: The modes (Published, Selected, and Unselected) correspond to how pages will be displayed. For example, when you are in Selected, you can see and customize how each page will look when selected.
Orientation: Either displays the pages horizontally or vertically.
Navigation Options : Select the button to further customize the Header.
Navigation Options
The Behavior tab allows users to change page order and group together pages. The latter can improve ease of navigation, particularly when you have many pages cluttering the Header.
Tip: To learn how to group pages, refer to the following article.
The Format tab enables users to customize design and formatting that applies to all Header items.
Location and Sizing
In the bottom banner, you have options to shift the items in all directions. Top handles up and down movement, and Left handles left and right movement. Size handles the width and height of the component.
ACTION Menu
By default all applications come with the ACTION menu in the Header.
The menu contains the following actions if the Approval Process has not been set.
Post: Send the entered values to the SQL database.
Save: Save the changes made in the Dashboard.
Discard: Recycles changes that have been made but not posted.
Exit: Exits the App and goes back to the Apps screen.
If the Approval Process has been set, then the Action Menu will have some new options for the Contributors and the Approvers.
Contributors
Contributors gain one new action:
Submit: Submits all data entered for approval.
Note: If an Approver has not been selected, then the submitted action is in the final state for the process.
Approvers
Approvers have three new actions:
Approve: Accept data changes made by a contributor.
Reject: Reject changes made by a contributor. Rejecting data does not revert it back to what it was before the submission.
Open: Opens Existing submissions.
Hide Action Menu
If you do not want the Action Menu to be viewable, click the App and select .
Select all the Hide options in the new pop-up window.
Preview
An area to preview how the Dashboard currently looks and feels.
Setting
The Setting tab allows you to choose an icon for the Application. It is recommended that the image is 200x200 pixels in size. You can also select the Always open to start page option to open at the starred page selected in the Dashboard tab).