Chat now with support
Chat with Support

Foglight 7.1.0 - Web Component Tutorial

Introducing the Web Component Framework The Web Component Framework Configuring Views and Context Queries Functions Bindings Additional Components

Configuring Views

If you have a data source you can start creating views. Views are collections of components that display data. The components of a view are self-contained, so you can add them to a page, remove them, or move them around according to your needs.

The following concepts apply to views:

•
Containers hold the view components that present your data. A container view is comprised of multiple components that are organized by related content.
•
Views are added to a container through the use of the Module Definitions editor.
•
View components are the underlying configurable building blocks on which views are based. Each view component has both unique and common properties. For example, a table has a column property, a chart has a time-axis property, and both have a customizer property.

The view component groups available in Foglight® are summarized in this guide. For more information, see Anatomy of a Typical Dashboard.

Creating a New Container View

A container view is used to house data presentation views, such as tables, charts, and common UI components (for example, check boxes or labels). You can declare a container view to be a dashboard and use it to observe system performance at run-time. For more information, see Anatomy of a Typical Dashboard.

The choice of container depends on the components it is designed to contain and on the layout you want.

You can create a new container, but you cannot add views unless you have defined them previously, so it is advisable to start by choosing the view components you need based on the data you want to present, and then decide on the container that is the best choice to present these views.

To create a container view:
1
From the navigation panel under Dashboards, click Configuration > Definitions.
2
In the Module List pane, choose the module in which you want to work. If you are creating views for your own use, choose My Definitions.
3
From the Module Contents pane, click Add.
4
In the Add View dialog box, ensure that the Create a Blank View tab is selected.
5
Select a view component from the tree of view types.
Figure 7. Selecting a view component
6
From the navigation tree, select Layouts and click to expand the list.
7
Select the view.
The list box refreshes to show the newly-selected view type:
Figure 8. Selected view type
8
To close the Add View dialog box, click the OK button.
9
The new, unnamed view appears in the editor pane.
10
Configure the container by filling in the required fields in the editor pane. The fields for any particular view are described in the Web Component Reference help pages. The Web Component Tutorial contains an introductory example of creating a container and various views for a dashboard.

Creating a New View Based on a Copy of a View

Copying is a fast way of creating a new view. It is also a way to create a modified version of a System view. You can copy any view, including your own User view, a System view, or a view created by another user.

You cannot create a copy of a view and give it the same name as another view in your module. If you enter a name that is already in use, a tooltip message is displayed beside the field and the Save button is disabled.

You can perform a normal or a deep copy of a view from the Definitions pane. For more information, see Deep Copying Views.

To create a new view based on a copy of an existing view:
1
From the navigation panel under Dashboards, click Configuration > Definitions.
2
In the Module List pane, choose the module in which you want to work. If you are creating views for your own use, choose My Definitions.
3
From the Module Contents pane, click Add.
4
In the Add View dialog box, ensure that the Copy an Existing View tab is selected.
5
From the navigation tree, select a view type and click the to expand the list.
6
Select the view.
The list box refreshes to show the newly-selected view type.
7
Click OK.
The Module Definitions pane switches to a new view in edit mode. The various fields contain the settings based on the copied component.
8
Make the changes you want, including renaming the component, and click .
The component is saved in the module that was active when you clicked Add, which is normally your user space under Foglight.

Stamping Views

A collection of views can have their properties updated at the same time using the Stamp Views feature. Use it to quickly perform a batch update of view properties.

To stamp views:
1
From the navigation panel, under Dashboards, click Configuration > Definitions.
2
In the Module List pane, select the module containing the views whose properties you want to edit.
3
In the Module Contents pane, issue a search for views using some common criteria.
The list of views in the Module Contents pane refreshes, showing the views that satisfy the search criteria.
TIP: The Stamp Views button becomes enabled, indicating that the views listed in the Module Contents pane can be selected for stamping.
4
In the Module Contents pane, click .
The Stamp Views wizard appears, showing a list of properties common to all views that are currently selected for stamping.
Figure 9. Stamp Views wizard
TIP: Select or clear the Show Advanced Properties check box to switch between basic and advanced view properties, as needed.
5
Edit one or more properties, as required.
a
To edit a property, in the Stamp Views wizard, click in the Value column, and proceed with making the edits, as required.
 
* 
IMPORTANT: View stamps cannot be applied to dynamic context keys. This is because view stamps are meant to be used for dynamically changed data, and as such do not need to refer to dynamic context.
 
* 
NOTE: If a stamp results in changing view columns, the column property changes are propagated to all of the views that are selected for stamping, replacing the existing columns. For example, if view A has two columns and view B has three columns, and if the stamp has one column, instead of applying that one column to each of the views columns, both views result in having one column each, as set by the stamp.
 
* 
TIP: If you have any properties set, you can clear their values by selecting Clear if set from the menu.
b
Click Next.
The views that are successfully stamped are validated. If the validation results in any errors, the property changes are not saved to the related views. However, if a stamped view generates a validation warning, the changes are saved.
At this point the property change cannot be reverted by cancelling the flow in the wizard. This is because while checking whether a stamp is applied successfully, the module the views belong to needs to be stored. When the store is complete, the module can not be reverted to its previous state.
The Stamp Views wizard refreshes, showing the outcome of the view stamping process. It lists the views that are successfully stamped and validated, and any errors, if applicable.
Figure 10. Stamp Views results
6
Click Finish.
The Stamp Views dialog box closes.
Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating