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

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.

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.

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.

Edit your component, for example, a Label. When configuring the Label property that displays the label text, associate it with your custom text renderer.
Label component and its custom renderer with the Font Size set to Much Larger and Font Style to Deemphasized

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.

Related Documents