Chat now with support
Chat with 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

Defining the Dialog

To create the Form for adding a new company manager:
1
Still in the view editor, create a Form Dialog view using the following values.
Figure 17. Form Dialog settings
The storage type for the manager object is none, which means that each time the Form Dialog view is rendered, a new manager object is created, but this object is not saved. It is only when the company object is updated and saved that the data gathered here is written into that object, which contains a list of manager objects. See the Web Component Guide for information about the available storage mechanism choices.
2
Create an Action as shown below.
Notice that the Action is Add Manager, accessed by choosing Invoke Function. A key (addManager) must be supplied, but in this tutorial it is not used anywhere but in the Flow type editor.
The required parameters for Add Manager (company and newManager) are associated with the context keys that supply the required values.
The Flow type is set to Previous, and the Update option is selected. When the popup is disposed, the table’s data is updated to show the new information.
Figure 18. Flow type settings

Defining the Table of Managers

To create The Company’s Management Team table:
1
Still in the view editor, create a Row Oriented Table using the following values.
Figure 19. Row-Oriented Table settings
2
Create an Action as shown below.
 
* 
IMPORTANT: Three nested dialogs are necessary to complete this step. In the third, the Available Views dialog (not shown), you choose the Form for adding a new company manager.
Figure 20. Editing flow actions
3
Create the Row(s) Selection Action as shown below.
 
* 
IMPORTANT: Five nested dialogs are necessary to complete this step. In the second (Edit) dialog, you choose Invoke Function, and in the third (not shown), you choose Remove Manager from the available list of functions. Back in the Edit - Context Entry “removed” dialog, you choose selectedManager and company as input keys in the Edit - Parameter dialogs (also not shown).
Figure 21. Editing flow actions

Defining the Top-Level Dashboard

In most designs, the table appears in a grid that holds the table along with other related views. We place the table in such a grid to complete the tutorial. Creating a dashboard is not covered in previous tutorials, so all that needs explaining here is the context entry. A structure is needed to hold the list of managers. By creating an instance of a company object in the dashboard, we also create a manager array that is initially null. Nonetheless, we can get a reference to it and create an empty list of managers the first time the Add Manager function is called. After that, manager entries can populate the list.

To create a Company Personnel Grid Layout to hold the table:
1
In the view editor, create a Grid Layout using the following values.
Figure 22. Grid Layout Component settings

Note that the storage type for the company object is user, which means each different logon name has a different company object that is kept until the server is restarted. See the Web Component Guide for information about the available storage mechanism choices.

Summary

Bean Input components

This tutorial introduces the usage of Bean Input components as a way of collecting data. Notice that very few context keys were declared, which makes it a much more efficient mechanism for collecting and storing data, especially when large amounts of data inputs are required.

Related Documents

The document was helpful.

Select Rating

I easily found the information I needed.

Select Rating