Foglight Evolve 9.2 - Web Component Tutorial

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:

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:

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.

These are the main topics in this tutorial:

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.

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.

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.

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.

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.