Chat now with support
Chat with Support

Foglight Evolve 9.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
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.
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.

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.
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.

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

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:

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.

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.
5
Select the timeRange and host check boxes, and click Next.
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.
9
Click Finish.
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.

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