Chat now with support
Chat mit Support

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

Control the state of the Save button

The Save button should only be enabled if the table is not empty. Thus, the Save button should be disabled before any managers are added, enabled when there is at least one manager, and disabled again if all rows are removed. Create the function as shown in the figure:

Figure 24. Enable/Disable Save Button function settings

In the Save action, invoke the Enable/Disable Save Button with the key number, and use an input key of company and path managers. Set the return type to Count All.

 
* 
NOTE: The final version of this tutorial is available in Dashboard Support > Tutorials > Tutorial 7 > Company Personnel if you give the module an Allowed Role of Dashboard Designer by editing the module in the Configuration > Definitions > Definitions pane.

Tutorial 8: Renderers

As their name implies, renderers are used to give the final appearance to the object that they display. All data types in the framework have default renderers associated with them, but there are times when you need to choose a different representation. In this case, choose either an existing renderer other than the default, or create a specialized version of one of the following renderer types:

•
Date
•
Error*
•
Host Name
•
Icon
•
List
•
Metric Bar
•
Metric Baseline
•
Null Image*
•
Null String*
•
Number
•
Number Bar
•
Number Percent
•
Number Unit
•
Progress
•
Severity
•
Severity Counts
•
Sparkline
•
SQL
•
Style
•
Text
•
Timeline
•
Time Range

In most cases, the names of these renderers are sufficient to indicate their function, but you can read the full description, and see a sample image, in the Web Component Reference.

 
* 
NOTE: Most renderers have an input value that uses a context setting whose key is value (if it is set) as its input value. Otherwise, it uses its own default value. For details, see Input value.Renderers marked with an asterisk (*) do not have configurable input values.

By now you are familiar with using the Definitions editor to configure components by setting their properties. This tutorial dispenses with step-by-step procedures and leaves the configuration up to you. You are encouraged to build the necessary components as you proceed through the tutorial.

•
Text Renderer
•
Date Renderer
•
Number Bar Renderer and Number Unit Renderer
Objectives of Tutorial 8

These are the main topics in this tutorial:

•
Show how to use a Text renderer to modify a text style. For more information, see Text Renderer.
•
Show the different styles possible with a Date renderer. For more information, see Date Renderer.
•
Show examples of Number and Number Unit renderers. For more information, see Number Bar Renderer and Number Unit Renderer.
Input value

Many renderer types support the concept of an Input Value. This is the value to be rendered and is made available in the context under the key value.

If you edit a renderer that supports Input Values, you can specify on the General tab the Value Data Type, and through Value List whether the value is a list. You can then refer to the Input Value through a Context Selection binding by setting the key to value. You can also drill down on the context entry in order to access sub-properties of that type.

The following figure shows an example of a List renderer.

Figure 1. List renderer settings

Another example, this time for a Date Renderer, shows that if you set the Value Data Type to Monitoring:Alarm, then you can edit the Date property to set it to a Context Selection Binding with an Input Key of value, and Path of createdTime in order to render the Created Time property of an alarm as a date.

Figure 2. Date renderer settings

The default values of Value Data Type depend on the renderer component. The default value of Value List is False, except for the List and Severity counts renderers.

Text Renderer

Each component that presents text has a default renderer associated with it. The renderer specifies the properties, such as font size and font style, that the component uses to display the text.

If you need to display text in a component in a manner that is different from the default, you can create your own renderer.

To configure a new renderer:
1
Create a new Text renderer.
2
Change the renderer properties, as applicable.
Figure 3. Text renderer settings
 
* 
IMPORTANT: It is recommended to associate colors by using themes (for details about color themes, see the Web Component Guide). Do not define the renderer color by setting the Color property in the Configuration tab, as this may result in colors clashing with the background or the text disappearing entirely, if a user changes the theme.
3
Edit your component, for example, a Label. When configuring the Label property that displays the label text, associate it with your custom text renderer.
The following figure shows the differences among three components:
•
Text Field
•
Label component and its default renderer
•
Label component and its custom renderer with the Font Size set to Much Larger and Font Style to Deemphasized
Figure 4. Displaying newly created renderers

Working with the Text Renderer

The properties and their allowed values are described in the Renderer Components pages of the Web Component Reference. If you look up Font Size, you see that it is an enumerated type with four allowed values. You can set the property to one of these as a static value using Set to Enum Value, or you can use bindings in Set to Binding. If you use Set to Binding you must take care that the binding does supply one of the allowed values.

You can limit the number of characters that the renderer displays and you can insert an ellipsis (…) to indicate that the string is truncated.

You can use the Max Chars No Whitespace property to insert a space in extra long strings, which may help you to format the output in certain cases.

Verwandte Dokumente

The document was helpful.

Bewertung auswählen

I easily found the information I needed.

Bewertung auswählen