Chat now with support
Chat with Support

Foglight 5.9.5 - 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

Additional activities

Notice the small i in the table’s top-right corner. Click it to see help for the table. Any text you placed in the Context Help box (see Step 13 on page 36) appears in a tooltip when the help icon is activated.

Notice the edit icon at the right-hand side of the table’s column header. Clicking it launches a customizer. It isn’t too useful right now because the table contains only one column, but if a table contains many columns this customizer gives the end user the option of temporarily hiding some of the columns. Also, the Export action allows the user to save a copy of the table in CSV, PDF, Excel and XML formats.

Because you gave the dashboard a title, it appeared at the top of the component. Experiment with giving the table another title.

2
In the row containing the Title property, in the Value column, click Edit , and from the menu that appears, choose Set to Binding > String Template.
3
In the Edit - Title dialog box that appears, in the Value box, type Hosts Monitored by Foglight.
2
On Layout tab, click anywhere in the Monitored Hosts area.
3
Click the Properties tab.
4
In the Properties dialog box that appears, clear the Show Title and Show Border check boxes.
6
Return to the Properties dialog box, select the Show Title and Show Border check boxes, save your changes and view the result. Observe the table title.

Saving the Tutorial2 module

There is a command-line option in fglcmd that allows you to export and import modules. This procedure assumes that your Foglight® installation is in the default location on a Windows® machine. Make the appropriate changes for other platforms. It also assumes that your user name is tutorial. Note that all objects in the module are saved.

For complete information about the fglcmd utility, see the Command-Line Reference Guide.

Log on to the server machine and type:
cd C:\Quest_Software\Foglight\tools
Copy fglcmd to your machine.
In the directory where you placed fglcmd, issue the command:
fglcmd -usr tutorial -pwd <password> -cmd util:uiexport -m user:tutorial -f \C:\pub\Tutorial\Tutorial2.zip.

Tutorial 3: Adding a Drilldown Page

In Tutorial 2 you created a top level dashboard that contains a table of host names. Now, in Tutorial 3, it is time to show you how to add more columns to the table and how to create a dependent page that supplies information about any host selected from the table. This is often called a drilldown page because the information it presents depends on the object selected in the parent page.

User actions that cause the view to update in some way will be covered in a subsequent tutorial.

There are two main ways of presenting visual information about a group of objects. One is to list objects on a page and to organize it so that the information about each object appears with it on the same page. We chose a table layout in Tutorial 2 with this objective in mind. We can add other bits of information to the same row as the host and keep things together that way.

The other way of presenting information is as separate pages, one for each item in the original list. This way is appropriate when the visual component presenting the information is too large to fit on the parent page.

The objectives of Tutorial 3 are:

The primary objective of this tutorial is to demonstrate the addition of a drilldown page whose content depends on the particular choice made in the parent page, and in so doing, demonstrate the use of a context and a flow. The terms context and flow are described in detail in the <Emphasis>Web Component Guide.

Preliminary Setup

You are going to build on Tutorial 2 here, but it is a good idea to keep the work you did on Tutorial 2 intact so that you can reuse it if necessary. If you want to keep the tutorials separate, create a new user and copy Tutorial 3 to the new workspace. If you are creating views as you read this tutorial, it is a good idea to start fresh and copy Tutorial 2 to Tutorial 3.

1
Create a new Foglight user (tutorial3, tut0rial), as you did for Tutorial 2.
3
On the navigation panel, choose Configuration > Definitions.
4
In the Module List pane, choose Other User Definitions > tutorial2.
7
Click Copy and from the menu that appears, choose Deep.
8
In the Copy dialog box that appears, in the Select a target module area, choose My Definitions and click OK.
Since you are logged in as user tutorial3, you now have a separate copy of the module you created in Tutorial 2. You can use this copy to continue your work in Tutorial 3 without affecting the work you did for Tutorial 2.
2
Open the Context tab.
3
In the Inputs table, click Add Input .
4
In the newly added row, in the Key column, type host.
5
Leave the Name column unchanged.
6
Click the Usage column and choose Internal from the list that appears.
Later in this tutorial, you will set a flow to Host Monitor in Monitored Hosts, and pass a key named host as the context mapping for the selected row that triggers the flow action. Setting the same context as Internal here tells the layout that one of its children supplies the value. This step is not strictly required for the current tutorial, but it is a pattern that should be followed as a matter of course because other situations require it.
7
Leave the List column set to False.
8
In the Data Type column, type Monitoring:Host.
9
Set a fallback value. Choose null and ignore the warning message because the context value will be used in a child view later on in this tutorial.
10
Click Save on the dialog box and on the tab on All Hosts’ toolbar to save your work so far.
Related Documents