Chat now with support
Chat with Support

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

To define a Label component:
1
On the navigation panel, under Dashboards, choose Configuration > Definitions.
2
In the Module List pane, select your tutorial module.
3
In the Module Contents pane, click the drop-down list, select Views, and click Add .
The Add View dialog box appears.
4
In the Add View dialog box, on the Create a Blank View tab, choose Common > Label.
5
Click OK.
6
In the Definitions pane, on the General tab, populate the settings using the following values.
Figure 9. New label component settings
To set the label text:
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.
 
* 
TIP: The difference between a String and a String Template is that a String Template can accept parameters. There was no need to use a String Template in this example other than to familiarize you with its 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.

To set a flow action on the label:
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.

To create a dependent page called ‘Host Details T3’:
•
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.

To add the Time Plot Chart component to Host Details T3:
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.
This places the newly added view in the first cell.
8
Select the Show title and Show border check boxes.
9
Leave the other settings with their default values.
10
Click Finish.
To add the Row-Oriented Table component to Host Details T3:
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 > 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.
9
Leave the other default values unchanged.
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.

To add scrollbars to Host Details T3:
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.
3
In the list of properties, locate and expand the Page Options node.
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.

To add the Label component to Host Details T3:
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.
This places the newly added view immediately under the Alarm Table for Host T3 table.
8
Select the Show title and Show border check boxes.
9
Leave the other default values unchanged.
10
Click Finish.
11
On the view editor toolbar, click Save.

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.

To define a Drop-Down List component:
1
On the navigation panel, under Dashboards, choose Configuration > Definitions.
2
In the Module List pane, select your tutorial module.
3
In the Module Contents pane, click the drop-down list, select Views, and click Add .
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
Click OK.
6
In the Definitions pane, on the General tab, populate the settings using the following values.
Figure 10. New drop-down list component settings
To set the context:
•
Ensure a Host object a required input. For instructions, see the procedure in Adding columns to the table (under To set the context:).
To set the items for the drop-down list:
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.
To set the flow for the drop-down list:
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.
When an item in the list is selected, the view will update based on the chosen host.
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.
To add the drop-down List component to Host Details T3:
1
In the Module List pane, ensure your tutorial module is selected.
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.
This places the newly added view on the right of the Return to hosts Page T3 label.
8
Select the Show title and Show border check boxes.
9
Leave the other default values unchanged.
10
Click Finish.
11
On the view editor toolbar, click Save.
Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating