Application Packaging Standard

Last updated 18-Mar-2019

Developing UI Navigation Trees

Custom UI can be created for different control panels in hosting platforms. In the platform , it is possible to create control panels for service providers (PCP), customers (CCP), and end-users (MyCP). For each customized CP, developers need to define a navigation tree that specifies the hierarchy of navigation tabs and views bound to them.

Note

There is a complete description of APS user interface and demonstration of its development in demo projects.

Properties

../../../../_images/navigation-props.png

List of Properties

When an element is selected in the navigation tree, it is possible to configure the following properties:

  • Label - specifies the label that will be visible in the control panel.
  • ID - is an ID that uniquely specifies the element in the navigation tree.
  • Visible - makes the element visible on condition. For example, contextmanagement.showVPS means the element is visible if the showVPS property of the contextmanagement variable is true.
  • Source - explicitly specifies an HTML file for the view element. All view files must be in the ui folder. If this property is missed, the view ID specifies it by default. In the latter case, the file name is assigned the view ID and its extension is .html.
  • Maximized - makes the view open as wide as possible in the CP. In the platform control panels, a maximized view will hide custom tabs and breadcrumbs on top of the view.
  • Variable - declares the name of a variable that can be used in the view Javascript code. The declared variable represents a resource as specified by the following attributes:
    • Type ID - identifies the APS type of the resource.
    • Filter - adds more restrictions on the selection of the resource, for example, hardware.memory=gt=512 means the memory property in the hardware structure must be above 512.

When setting a navigation variable, the Select APS Type dialog shows a list of available custom, APS core, and platform specific types.

../../../../_images/navigation-type-select.png

Editing Properties

  1. In the Navigation Tree panel, select the node you want to edit. Properties of the selected node appear on the Properties panel.
  2. Make required changes.

Note

Property marked with the asterisk cannot be left empty. A value must be assigned to it.

Optional Properties

Optional properties can be hidden. You can add them to an existing element by using the AddingIconPlusSign icon in the toolbar of the Properties panel. To remove a property, click the RemovingIconCross icon in the top right corner to make this icon appear next to each optional property. Clicking the RemovingIconCross icon next to a property removes it.

UI Viewer

UI Viewer helps validating the navigation structure as follows:

../../../../_images/navigation-ui-viewer.png
  • It can visualize the structure of tabs as defined in the navigation tree.
  • It is able to visualize some views.
  • By clicking the Open in editor link you will open the respective HTML file of the selected view in a text editor.