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

Configuring a Label with an Action

There are times when you may find it useful to add a link back to a previous page even though there are built-in ways, such as the history list (breadcrumbs) at the top of a page, for accomplishing this task.

We will use a label with an action in this tutorial to show another choice for a flow.

1
On the navigation panel, under Dashboards, choose Configuration > Definitions.
The Add View dialog box appears.
4
In the Add View dialog box, on the Create a Blank View tab, choose Common > Label.
5
6
In the Definitions pane, on the General tab, populate the settings using the following values.
1
Open the Configuration tab.
2
In the Label row, in the Value column, click Edit , and choose Set to Value > String from the list that appears.
3
In the Edit - Label dialog box that appears, in the String Value box, type Return to Parent, and click Set to close the dialog box.
4
On the Configuration tab, in the Title row, in the Value column, click Edit , and choose Set to Binding > String Template from the list that appears.
5
In the Edit - Title dialog box that appears, in the Value box, type Return to Hosts, and click Set to close the dialog box.

The Localized String template should be used if other languages besides English are supported.

When you add this component to the Grid container you can choose to show the title. Otherwise, only the text string defined by the Label property appears.

1
Open the Flow tab.
2
Click the Selection row.
The Edit - Selection dialog box appears.
3
In the Edit - Selection dialog box, ensure that the Leave unspecified check box is cleared.
4
Click the Flow type drop-down box and choose Previous from the list that appears.
TIP: By assigning Previous to the flow type, you create a link back to the page that invoked the current page.
5
Click Save to save your changes and close the Edit - Selection dialog box.
6
Click Save on the toolbar to save the changes to the Label component.

Configuring the Drilldown Page

Now that you have some component views configured, you need a page to hold them. This section shows you how to create a page and place the required components in it. As we have done before, we use a Grid container.

Follow the instructions in Tutorial 3, Create a dependent page up to but not including Define a flow, only in this case use Host Details T3 as the component name when defining the flow, and ensure that you set a host context.
Use A details page for the selected host as the component description.

Populate the dependent page

The first component we add is the Time Plot Chart.

1
With the Host Details T3 view open for editing, open its Layout tab.
2
Click Add.
3
In the Add View dialog box that appears, choose Select existing view and click Next.
4
Ensure the Filter By: purpose and validity check boxes are selected.
5
Choose Dashboard Development > Support > Tutorials > Tutorial 4 > CPU Memory Utilization Chart T3, and click Next.
6
In the refreshed Add View dialog, set the width to 400 px and height to 350 px.
7
In the Row and Column boxes, type 0.
8
Select the Show title and Show border check boxes.
10
Click Finish.
2
Click Add.
3
In the Add View dialog box that appears, choose Select existing view and click Next.
4
Ensure the Filter By: purpose and validity check boxes are selected.
5
Choose My Views > Alarm Table for Host T3, and click Next.
6
In the refreshed Add View dialog, set the width to 425 px and height to 400 px.
7
In the Row box, type 1, and in the Column box, type 0.
This places the newly added view immediately under the CPU Memory Utilization Chart T3 view.
8
Select the Show title and Show border check boxes.
10
Click Finish.

Placing a table under a chart may take up more vertical space than is available on your monitor. Next, to ensure that the label and drop-down list components can be accessed, we add a vertical scroll bar to the Host Details T3 page.

1
With the Host Details T3 view open for editing, open its Configuration tab.
2
On the Configuration tab, select the Show Advanced Properties check box.
4
In the Scrollbars row, in the Value column, click Edit , and choose either Vertical or Auto from the list that appears.

Now add the label and drop-down list components.

1
With the Host Details T3 view open for editing, open its Layout tab.
2
Click Add.
3
In the Add View dialog box that appears, choose Select existing view and click Next.
4
Ensure the Filter By: purpose and validity check boxes are selected.
5
Choose My Views > Return to Hosts Page T3, and click Next.
6
In the refreshed Add View dialog, set the width to 350 px and height to Automatic.
7
In the Row box, type 2, and in the Column box, type 0.
8
Select the Show title and Show border check boxes.
10
Click Finish.

Configuring a Drop-Down List

This example illustrates another way of changing the contents of a page. In this case, the page updates with information about another host that you choose from a Drop-Down List component.

1
On the navigation panel, under Dashboards, choose Configuration > Definitions.
The Add View dialog box appears.
4
In the Add View dialog box, on the Create a Blank View tab, choose Context Inputs > Drop-Down List.
5
6
In the Definitions pane, on the General tab, populate the settings using the following values.
Ensure a Host object a required input. For instructions, see the procedure in Adding columns to the table (under To set the context:).
1
With the Host Chooser DDL T3 view open for editing, open its Configuration tab.
2
In the Items row, in the Value column, click Edit , and choose Query from the list that appears.
The Edit - Items dialog box appears.
3
In the Edit - Items dialog box, click the Query box and choose My Queries > Active Hosts from the list that appears.
4
Click Set to close the Edit - Items dialog box.
5
On the Configuration tab, select the Show Advanced Properties check box.
6
In the Label row, in the Value column, click Edit , and choose Set to Binding > Context from the list that appears.
The Edit - Label dialog box appears.
7
In the Edit - Label dialog box, click the Input Key box and choose currentItem from the list that appears.
8
Click the Path box and choose name from the list that appears.
9
Click Save to close the Edit - Label dialog box.
1
With the Host Chooser DDL T3 view open for editing, open its Flow tab.
2
Click the Selection row.
3
In the Edit - Selection dialog box that appears, clear the Leave unspecified check box.
4
Click the Flow type box and choose Next Page from the list that appears.
5
Click the View box and choose My Views > Host Details T3 from the list that appears.
6
Under Context Mappings, in the Selected Item box, type host.
7
Click Save to close the Edit - Selection dialog box.
8
In the view editor, click Save to save your work so far.
1
Open the Host Details T3 view for editing, and open its Layout tab.
2
Click Add.
3
In the Add View dialog box that appears, choose Select existing view and click Next.
4
Ensure the Filter By: purpose and validity check boxes are selected.
5
Choose My Views > Host Chooser DDL T3, and click Next.
6
In the refreshed Add View dialog, set the width to 350 px and height to Automatic.
7
In the Row box, type 2, and in the Column box, type 1.
8
Select the Show title and Show border check boxes.
10
Click Finish.
Related Documents