Tutorial

60 vFoglight
Web Component Tutorial
Objectives of Tutorial 3
The objectives of this tutorial are to place components on a drilldown page whose
content depends on the particular choice made in the parent page, and also to introduce
three new components for you to work with.
The tasks you will complete are:
• Add a drilldown Grid page that presents information about the chosen host.
This first exercise is similar to Tutorial 2, but in this case you will populate the
drilldown page with components that you configure rather than simply choosing a
pre-built view.
• Add a Row-Oriented Table of alarms for the chosen host.
The first column of the Row-Oriented Table will show the severity of the alarm
and the second column will present an informative message about the alarm.
• Add a Key-Value Listing component that presents selected information about the
host.
• Add a chart component that shows CPU utilization.
This exercise introduces you to using a chart as a visualization component.
Charts that display information that depends on the context in which they are
launched are an essential UI component.
• Add a Drop-Down List.
Frequently, a user may be looking at a page that displays information about one
host and then decides to look at another host. This exercise shows you how to
place a chooser on the page that allows viewing a different host.
• Add a Label that provides an active link back to the parent page.
That is what the history trail (breadcrumbs) at the top of the page is for, but since
this is a tutorial, you will see how to define a flow on a label.
• Add a Customizer to the page.
This exercise introduces you to another linking mechanism, the Customizer.
Note While investigating Time Range settings is not an objective of this tutorial, ensure that the
default timeRange context key is set to its default value for all the components in this
exercise:
Key: timeRange, Usage: Required, Data Type: Time Range.