Pages

Overview #

Pages represent a named collection of visualizations in the system. Pages fulfill a number of different purposes:

  1. They determine how visualizations are arranged and displayed to end users.
  2. They expose inputs associated with Page Variables. This is how end users can pass values into the underlying queries, which affect the data shown in the visualizations on a page.
  3. They form the basis by which content is provisioned to end users.
  4. They determine what tabs appear in the banner.

Admin “View Mode” #

This is the default page state when browsing to a page in the system. When logged in as an administrator, a page will have a variety of actions and information.

Name
Description
Logo For information on how to alter the logo, see Defaults.
User Info This area displays the User that is currently logged in.
Pages This area shows a list of the pages that the current user is provisioned to see. Refer to Provisioning for more information.
Search This icon reveals a search field, which can be used to search for pages in the system. This only appears if you have client.showPageSearch=true set in the [Install_Home]/conf/local.properties file.
System Menu This icon expands a menu which shows a complete list of administrative tasks, as well as some user actions.
Admin Toolbar This area contains links to common management tasks in the product, and is only visible for administrators. A complete list of admin pages can be found in the System Menu.
Edit Page This button toggles the Edit Mode for a page. It is only visible for Administrators.
New Page Icon This icon is a fast path to create a New Page.
Visualization Title bar

This area contains several icons

  1.  Visualization Menu: This icon expands a menu with actions for the associated visualization.
  2.  Stacked Visualizations Controls: Only available if the visualization is set up as stacked Visualizations. The drop-down control lets you manually switch to a different visualization in the stack. The play/pause lets you stop/start auto-cycling of the stack if this setting is turned on.
  3.  Data Freshness Icon: One of the three color status icons will be shown. This icon shows how fresh the data is that is currently displayed by the associated visualization. The check icon indicates that the data is current and up to date. The x icon indicates that the data cannot be retrieved (missing), and therefore edgeSuite is unable to render the visualization. The warning icon indicates that the visualization is no longer able to get new data from the server and therefore whatever is being displayed is no longer guaranteed to be up to date.

Navigation #

A user can navigate between pages a couple of different ways.

Options
Description
Banner Tabs If you click one of the tabs displayed in the banner area, you will be taken to the associated page. Only pages provisioned to you, one of your roles, or your domain will appear in the banner.
Switch to Page Action If a “Switch to Page” action has been configured for a visualization, clicking an item in that visualization will switch to the configured page. The “Switch to Page” action allows context to be passed to the target page, based on the values in the record that was clicked or page variables available on the source page. Refer to the Switch to Page Action for more details.

Admin “Edit Mode” #

Edit mode enables some administrative controls for both the page and the visualizations on that page.

Page Toolbar #

In Edit Mode, a page toolbar will appear at the bottom of the page.  Options in the Page toolbar allow an administrator to make changes to the page itself (as shown in the following illustration):

Add Row #

This option adds a new row to the top or bottom of the page. The new row will be automatically populated with an empty visualization. Once added, the empty visualization can be split, or swapped with an existing visualization using the options available in the Visualization Menu.

Page Options #

Name
Description
1 Layout Type Layout Type is exposed in the Page Option Menu, and can be accessed using the  icon.  Layout determines how visualizations on this page will react to available space. The options are:

  1. Report:
    This layout enables vertical scrolling. The widths of visualizations are specified using relative values. They will grow and shrink horizontally to fill available space, or to prevent horizontal scrolling. Heights are specified in pixels, and visualizations are allowed to appear below the bottom of the page. The Page supports a vertical scroll bar, and allows users to scroll down to see content that is not in view. This layout is good for reports, analytical views, and when you have a lot of visualizations on a page.
  2. Dashboard:
    This layout prevents scrolling. Both width and height are set using relative values, which allows content to grow and shrink to fill the available width and height of the page. It also forces all visualizations to be visible, which can be important in some monitoring scenarios. This layout is good for high level summary, monitoring views, and when you only have a few visualizations on a page.
2 Page Help A text area where an administrator can provide an HTML-based help message for a page.

  • Typing in this field will result in a question mark appearing in the right side of the breadcrumb bar. End users will be able to access page-level help via this icon.
  • Leaving this field blank will hide the question mark icon.
  • If the help text only contains a URL, clicking the help icon will automatically open the URL in a new browser tab/window.

Saving a Page #

This button saves all changes to the page.

The “Save Page” button at the bottom right of the Page Toolbar will pulse whenever there are unsaved changes to a page.

If you attempt to navigate away from a page with unsaved changes, you will be prompted with a warning.

There is no auto-save with pages. This means that all modifications to the page, even small resizes, must be explicitly saved using the “Save Page” button.

 

Visualization Titlebar #

When in edit mode, additional options appear in the Visualization’s titlebar.

Icon
Action
Description

Variables This icon indicates that the dataset associated with this visualization contains a variable. Hovering over this icon reveals the name of the Page Variable(s) being used, as well as the current value. This only appears in edit mode and if the visualization has page variable mapping.

Visualization Menu Clicking this icon will expand a list of actions for the associated visualization.

Admin Visualization Menu #

The Visualization Menu  shows options for the visualization, as well as for modifying its layout (see “Adding and Splitting Rows”).

Icon
Action
Description

Edit Visualization… Launches a dialog with the visualization’s configuration, and allows you to make adjustments. Changes made here will affect visualizations on other pages.

Clear Visualization Clears a visualization but maintains the space. This action will result in an empty visualization.

Options… Options expose various properties for the visualization instance.  From here, you can:

  • Alter the visualization’s label
  • Allow end users to download the underlying data set
  • Provide help text for end users
  • Configure stacked visualizations
  • Customize the visualization’s container appearance

Refer to the “Visualization Options” section below for more information.

Edit Actions Launches the Manage Actions dialog, which allows you to add interactivity to a visualization. See Actions for more information. This does not apply to Web Content Visualizations.

Edit Filters Launches the Manage Client Filters dialog, which allows you to add client-side data filtering to a visualization. See Client Filters for more information. This does not apply to Web Content, Topology, TreeMap Diagram, and Flow Diagram Visualizations.

Download Data Set

Downloads a .CSV file, containing the dataset being displayed by the associated visualization. This does not apply to Web Content, Topology, TreeMap Diagram, and Flow Diagram Visualizations.

This option will not be visible if the “Allow Users to Download Data Set” option is toggled to “No”.

Expand

Expands the visualization so that it takes up the full screen. When expanded, this icon will disappear, and it will be replaced with the “Compress” icon.

Double clicking the visualization’s titlebar will also expand/compress the visualization.

Expand to New Tab

Expands the visualization to a new browser tab/window without any edgeSuite navigation controls.

Restore This icon only appears when a visualization has been expanded, and fills the whole screen. Clicking this icon will compress the visualization back to its original size.

Refresh Reloads the visualization. This will only appear if the administrator has turned on the edgeSuite property:

client.visualization.menu.showRefresh=true

Help Only available if a help text has been set in the visualization’s options (see section Visualization Options). It will display help text in a dialog.

Table Columns Only available for Table Visualizations. It will allow the user to control what columns to show/hide.

Toggle Chart Legend Only available for Chart Visualizations. It will allow the user to toggle the chart’s legend on or off.


Visualization Options #

To access Visualization Options, click the Visualization Menu  in the header and then select Visualization Options .

Property
Description
1 Visualization Label

This property allows an administrative user to change the name of the visualization instance on the current page. This will not affect visualizations on other pages.

Variables can be inserted into visualization labels by using a {pageVar.Name} syntax in the text field.

Example:
“{pageVar.NationalParks} National Park” will resolve to the value of the associated Page Variable at that time. Thus, if the ‘NationalParks’ Page Variable is set to “Arches”, then the Visualization label would read “Arches National Park”.

2 Visualization Displays the name of the visualization being used by the current visualization instance.
3 Dataset Displays the name of the dataset being used by the current visualization. It is intended to be a reference for the “Visualization Label”. This is displayed on the left side of the screen as well.
4 Customize No Data Message? Determines if the default “No Data To Display” should be overwritten or not.

  • Yes: The custom No Data message will apply to this visualization instance.
  • No: Use the default system-wide “No Data To Display” message.
5 Message Allows an administrative user to change the No Data message of the visualization instance on the current page. This will not affect visualizations on other pages. See “Visualization Label” property above on how to add a Page Variable to the message.
6 Allow users to download data set? By default, all users can download datasets for any visualization on a page. This option allows an administrator to disable that feature. This does not apply to Web Content, Topology, TreeMap Diagram, and Flow Diagram Visualizations.

  • Yes: Users can download data sets.
  • No: Users can not download data sets.
7 Restrict help to this page instance? Determines the scope of the help message:

  • Yes: The help message will only apply to the instance of this visualization on the current page.
  • No: This help message will apply for all instances of this visualization.
8 Default/Instance Help A text area where an administrator can provide an HTML-based help message for a visualization.

  • Typing in this field will result in a question mark appearing the Visualization’s header.  End users will be able to access help via this icon.
  • Leaving this field blank will hide the question mark icon.
  • If the help text only contains a URL, clicking the help icon will automatically open the URL in a new browser tab/window.

#

Visualization Menu Layout Options #

The Visualization Menu  contains several layout-related actions. These options allow for more complex layouts on the page.

Icon
Action
Description

Add Column To Left Splits the current visualization in half vertically, inserting an empty visualization to the left of the existing visualization. Use the Swap action to reposition visualizations.

Add Column To Right Splits the current visualization in half vertically, inserting an empty visualization to the right of the existing visualization. Use the Swap action to reposition visualizations.

Add Row To Top Splits the current visualization in half horizontally, inserting an empty visualization below the existing visualization. Use the Swap action to reposition visualizations.

Add Row To Bottom Splits the current visualization in half horizontally, inserting an empty visualization above the existing visualization. Use the Swap action to reposition visualizations.

Remove Removes a visualization from the page. The remaining visualizations will expand to reclaim the available space.

Swap Allows you to change the positions of two visualizations on the page.

  • Click the Swap action on a target visualization. This enters a “swap mode”. The next click will identify a visualization to swap with.
  • To swap, Click the header of a different visualization, and the two visualizations will swap positions on the page.
  • To cancel, simply select the header of the current visualization.

Stacked Visualizations #

Multiple visualizations can be placed within the same container on a page, creating a “stacked visualization”.  The Show Visualization action can then be used to target different visualizations in the stack.

To add a Stacked Visualization, click the Visualization Menu  and then select Visualization Options .  The dialog that appears will show a list of visualizations on the left side.  To create a “stacked visualization”, click the + button at the bottom of the list and another visualization will be added to the container.

Stacking Modes #

There are two “Stacking Modes” supported in edgeSuite.

  1. Action Only
    This mode hides controls in the visualization’s header, and forces the user to use click actions to bring various visualizations to the front of the stack.
  2. Interactive
    This mode exposes controls in the visualization’s header, allowing an end user to manually select any visualization in the stack.


Auto Cycle
#

The auto cycle option is only available in the “Interactive” stacking mode.  This option will cycle through the visualizations in the stack based on a set time duration. In the following example, the stacked visualization will cycle through a different visualization every 10 seconds:

Visualization Container Appearance #

The edgeSuite Administrator can adjust each visualization container’s appearance by clicking the Visualization Menu  and then selecting Visualization Options .  The dialog that appears will show a container type option at top right of the window. This setting only affects the visualization in View Mode.

The following appearance types are supported:

Type
Behavior
Normal Default with full header and border
Transparent Header with Border Background of the header will be transparent
Transparent Header without Border Background of the header will be transparent and without any border around the visualization
Header Less Header will not be shown
Border Less No border will be rendered around the visualization
Header & Border Less Header will not be shown as well as no border will be rendered around the visualization

Variable Palette #

Conceptually, the Variable Palette is where all the Node Variables used in underlying queries get exposed to an end user. This concept gets a little more complex because the underlying Node Variables must first be mapped to Page Variables. It is the Page Variable that ultimately gets displayed here in the variable palette. This extra layer of complexity allows a single input to drive multiple Node Variables, and is needed to help optimize the end user’s experience.

The Variable Palette supports the following Actions:

Action
Description
Manage Launches a dialog that lets you manage Page Variables.
Apply At a high level, this updates the visualizations on a page. More specifically, this initializes the underlying queries and scripts with values passed in from the current Page Variables. The queries and scripts return updated datasets, and the visualizations repaint themselves accordingly.
Warning… Before edgeSuite 3.5.1, reparenting a visualization that is already placed in a page can result in incorrect or missing Page Variables and mappings to upstream Node Variables. This only can be corrected by manually removing the visualization from all the pages that it has been placed in and then add it again and recreate any actions and filters and reconfigure its options. In 3.6 and later release, this button was added (replaced the Sync) to allow administrator to correct this situation with single click without the undue burden of recreating everything. This button will only appear if this problem is detected. You can see more detail of the problem by open up Visualization’s Options dialog of the visualization highlighted in orange color.
Reset This restores the default values for all Page Variables.

Sample Data #

Click here to download the National Parks data referenced on this page: national_parks