Chat now with support
Chat with Support

Foglight 6.3.0 - Web Component Tutorial

Using the Web Component Tutorial Tutorial 1: Drag and Drop Tutorial 2: Creating a Dashboard Tutorial 3: Adding a Drilldown Page Tutorial 4: Adding Views Tutorial 5: Using a Grid Tutorial 6: Reports Tutorial 7: Creating a Form Tutorial 8: Renderers Tutorial 9: Adding Questions and Answers Tutorial 10: Sending Messages to Other Users

Flowing Monitored Hosts to Host Details T3

All that remains is to edit Monitored Hosts to flow to the newly-created dependent page.

To edit Monitored Hosts to flow to Host Details T3:
1
In the Module List pane, ensure your tutorial module is selected.
1
Open the Monitored Hosts view for editing, and open its Flow tab.
2
On the Flow tab, click the Single-row Selection row, and in the View box, replace Host Monitor with Host Details T3.
3
Test the Monitored Hosts page by navigating to Dashboards > My Dashboards > All Hosts.
4
Click a row in the table to initiate the flow action.
5
The dependent page, Host Details T3, appears.

Adding a Customizer

A customizer component is a handy way to add a link from to parent page to open a related view. When you add a customizer to a Portlet view , the link appears at the top right of the component’s area.

A customizer is not as useful for top level views with a Page designation, where it shows up in the action panel. If you add a customizer to a Page that is not a top-level view, it is visible only if the view’s title bar appears in the container.

To add a customizer to a page:
1
In the Module List pane, ensure your tutorial module is selected.
2
Open the Host Details T3 view for editing, and open its Configuration tab.
3
On the Configuration tab, select the Show Advanced Properties check box.
4
In the list of properties, locate and expand the Customizer node.
5
Under Customizer, in the View row, in the Value column, click Edit .
6
In the Edit - View dialog box that appears, select any view that has host set as a Context Input key.
For example, you can choose Alarms > All Alarms Chart.
7
Click Set to close the Edit - View dialog box.
8
On the Configuration tab, under Customizer, in the Icon row, ensure that the Value column is set to None.
9
In the Show Title row, ensure that the Value column is set to true.
10
In the Label row, in the Value column, click Edit .
11
In the Edit - Label dialog box that appears, in the String value box, type Customizer Test.
12
In the view editor, click Save.
When you view this page, a link to the view defined in the Customizer appears on the action panel as the first item under Actions.
Figure 11. Viewing the newly created page

A Customizer has many useful purposes. It can be used as:

•
a filter—for example, an Alarm Filter for alarms tables
•
a selector—for example, a Category Selector for Services pages or a Host Selector in a Hosts Table

For views purposed as Dashboard or Page, alternatives to the Customizer are the two choices under Configuration > Page Options: Navigation Panel Views and Page Panel Views, by which you can add views directly to the left and right panels. These choices appear only when the parent page is being viewed.

Adding Nested Views

The Add button on the Layout tab of a container launches a wizard whose first page contains two choices:

•
Select existing view
•
Create a nested view

After choosing Create a nested view, the next page of the Add view wizard allows you to select a view component just as you did when you chose Select existing view in previous examples.

To add a Label component to Host Details T3 as a nested view:
1
Continue editing Host Details T3 in the Layout tab.
2
Click Add button.
3
In the Add View wizard that appears, select Create a nested view and click Next.
The next page of the Add View wizard allows you to choose a label component.
4
Choose Common > Label, and click Next.
A dialog that contains the context inputs already defined for the container appears with check boxes beside them, allowing you to select any that you want as inputs to your nested view.
5
Select the timeRange and host check boxes, and click Next.
This ensures that these context inputs are set without having to configure them in the Context tab.
The next page of the Add View wizard appears.
6
In the Row box, type 0 and in the Column box, type 2.
7
Click the Vertical Alignment box and choose Middle from the list that appears.
8
Leave the other default values unchanged.
9
Click Finish.
The Definitions pane refreshes, showing the nested Label component in the view editor.
10
Open the Configuration tab.
11
In the Label row, in the Value column, click Edit , and choose Set to Binding > String Template from the list that appears.
12
In the Edit - Label dialog box that appears, in the String Template Binding box, type CPU Utilization for {0}.
13
In the table below, in the Parameter {0} row that appears, in the Value column, click Edit , and choose Context from the list that appears.
14
In the Edit - Parameter {0} dialog box that appears, click the Input Key box, and choose host (Host) from the list that appears.
15
Click the Path box, and choose Name - String from the list that appears.
16
Click Set to close the Edit - Parameter {0} dialog box, then in the Edit - Label dialog box, click Set to close it.
17
In the view editor, click Save.

Summary

In this tutorial you learned how to use parameters in queries and about some new components.

At this point you can begin building more complex designs by consulting the Web Component Framework, available from the Foglight® online help.

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating