Page Layout and Components

In the Dashboard, in the relevant page tab, you can configure how the components are displayed.

You can configure the page with:

• A horizontal layout (the components are displayed side by side)
• A vertical layout (the components are displayed one above the other).
• A combination of horizontal and vertical layout.
• Tabs (the components are displayed in tabs inside the layout itself).

It is recommended that you plan in advance which components you want to place on your page and how they should be arranged, and then configure your page layout accordingly.

The following section provides an example of how an administrator configures the layout of components on a page.

It is recommended that you plan in advance which components you want to place on your page and how they should be arranged, and then configure your page layout accordingly

1. In the application, close all tabs to open the Dashboard.

2. Click the New Page button in the Dashboard toolbar or in the middle of the page. An empty page appears.

   

   For more details, see Dashboard Page .

3. Click to split the page into two horizontal sections.

   

   The horizontal layout displays the sections side-by-side.

4. The split icon is now horizontal. Click on the left side to split the column vertically into two sections.

   

5. In the same way, click to split the second column vertically into two vertical sections.

   The page now includes 4 sections:

   

For more details, see Create a Dashboard Page and Add Components to the Page .

Note To remove an area click the Remove Layout icon.

6. Now, add components to the page layout you created.
7. Click the ‘Add component’ icon in one of the areas, or click the Component Gallery button in the top right menu bar to open the Components dialog box.
8. In the Component Gallery page that opens, double-click the component to place it in the layout area, or select the component and drag it to an area on the page, and close the Component Gallery page.

9. Select the component you want to add to one of the areas you created, and drag it to that area. Do the same for all the other areas.

   For more details, see Component Gallery and Component Categories .

10. For a Tab area, drag the components you wish to add and for each component a new tab will appear.

11. After adding the relevant components to the relevant areas, save the page by clicking the Save icon. Enter a page name, add a description, and decide under which category the page will be saved. If you do not select a category, the page is saved in the Non Categorized category.

The following section provides an example of how an administrator configures a page component to include tabs.

It is recommended that you plan in advance which components you want to place on your page and how they should be arranged, and then configure your page layout accordingly.

Add a page to the Dashboard

1. Add a page to the Dashboard, split it into two horizontal areas, and set the top area to tabs. For details, see Create a Dashboard Page and Add Components to the Page.

2. You can now format the page.

   Within the layout, you can now add components to the two areas; the components added to the upper section are displayed in tabs and the component added in the lower section of the page is displayed vertically .

   1. In the top section of the page, add the KPI List Component to the Dashboard Page

      1. Click the Component Gallery button.

      2. In the Component Gallery page that opens, click or double-click the KPI List component to place it in the layout area, or select the component and drag it to an area on the page. Click Close to view the results.

         

      3. Click the Components button and in the same way, add more tabbed components.

         

         You can now select what you want to display in each component. For details, see the relevant component sections.

   2. In the lower section of the page, add the Scorecard Component to the Dashboard Page

      1. Click the Component Gallery button.

      2. In the Component Gallery page that opens, click or double-click the Scorecard component to place it in the layout area, or select the component and drag it to an area on the page.

         

         Note that double-click only works if you open the Component Gallery from the layout itself and not from the toolbar.

         • If the target area is hidden by the Component Gallery dialog box, click the Component Gallery dialog box title bar and drag it to another location on your screen.
         • If you are dragging a new component to a target area that already has a component defined, drag the new component to the title bar of the target area, and not to the part of the component that is colored white.

      3. Close the Component Gallery page. The Scorecard component appears in the page.

         

         You can now select what you want to display in the component by clicking the Configure Component button. For details, see The Scorecard Component.

3. You can now save the page by clicking . In the Save to Page Gallery dialog box that opens, enter the name, description, and categories of the page.

   The new page is now listed in the Page Gallery.

   The new page also appears in the Dashboard as a new tab.

4. To display the page, in Dashboard, click the Page Gallery button in the Dashboard toolbar and select the relevant page.

The Dashboard workspace enables you to view default pages, and to create new pages containing components. Each page is displayed as a tab within the workspace.

User interface elements are described below (when relevant, unlabeled elements are shown in angle brackets):

UI Element	Description
<Page Management toolbar>	The Page Management toolbar on the upper right side of the workspace, enables you to create pages, add components to pages, and define how components interact between one another. Select Page Select a page from this dropdown list to open the page in your workspace. The list contains the pages that are defined in the Page Gallery. If you start typing a page name in this box, the list is filtered. Refresh. Click to refresh the page. Save or Save As. Click to save the current page to the Page Gallery. A dialog box enables you to name the page, give the page a description, and select a category for the page. The description appears as a tooltip for the page, within the Page Gallery. Page Gallery. Click to open the Page Gallery. The Page Gallery contains default pages, as well as pages you have saved. You can then edit page definitions, or open pages. For user interface details, see Page Gallery and Page Categories. New Page. Click to create a new page. After opening a new page you can configure its layout, add components to the page, and define wiring between the components. For task details, see Dashboard Page. Edit Page Layout. Click to modify the layout of an existing page. The current layout of the page is displayed. You can use the Layout tools in the top left corner of each layout to modify the layout areas. For details, see Page Layout and Components. Exit Editing. When you are done, click this button to stop editing. Component Gallery. Click to open the Component Gallery. It contains default components, as well as components you have added. You can then edit component definitions, or add components to a page. For user interface details, see Component Gallery and Component Categories. Page Wiring. Click to define the wiring between components; this determines how components interact with one another. For user interface details, see Wiring Between Components. Start/Stop Slideshow. Click to start a slideshow of open pages. A dialog box enables you to define how often the pages are rotated. If Dashboard includes multiple pages, up to 5 of the most popular pages are immediately available for display when you switch to them. The other pages are least viewed pages, meaning that are silently deactivated in the background. When you select them, it might take a few seconds until they load and display their content. If a slideshow is running, click this button to stop the slideshow.
<Layout tools>	When a layout is empty, the layout tools on the upper left area enable you to define the layout. Icons in the center of the layout indicate the type of layout: horizontal, vertical, or tabbed. X Remove Layout. Click (upper-right corner) to remove a layout from the page. Add Component. Click to open the Component Gallery. You can then double-click a component to place it in the layout area. For user interface details, see Component Gallery and Component Categories. Split. Click to divide a vertical layout into two layouts, one above the other.  When configuring the layout of a page, you can repeatedly split the layout up to 4 times (to produce up to 16 boxes). Split. Click to divide a horizontal layout into two layouts, side by side.  When configuring the layout of a page, you can repeatedly split the layout up to 4 times (to produce up to 16 boxes). Switch to Vertical. Click to change the layout from vertical or tabbed to horizontal. Components placed in this area will be added one above the other. Switch to Horizontal. Click to change the layout from horizontal or tabbed to vertical. Components placed in this area will be added side by side. Switch to Tabs. Click to change the layout from vertical or horizontal, to a tab layout. Components placed in this area will be added as tabs. Layout Icons:   <Horizontal layout>. This icon in the upper-left corner of a layout indicates that the layout is horizontal. Components placed in this area will be added side by side. <Vertical layout>. This icon in the upper-left corner of a layout indicates that the layout is vertical. Components placed in this area will be added one above the other. <Tabbed layout>. This icon in the upper-left corner of a layout indicates that the layout is horizontal. Components placed in this area will be added as tabs.