Chat now with support
Chat with Support

Foglight Evolve 9.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

Overview for creating the components

The following is a brief overview of the steps that we take to build this tutorial. Along with listing the necessary components, pointers indicate the actions for collecting, displaying, and storing the user’s input.

Create the enumerated types Manager Title and Staff Title, with Common: Enumeration as their Super Type. For more information, see Defining the Enumerated Types for Manager and Staff.
Create the Manager and Staff types, each consisting of a First Name, Last Name, Title, and Employee ID. For more information, see Defining the Manager and Staff Types.
Create a Company type consisting of a Name, list of Managers and list of Staff Members. For more information, see Defining the Company Type.
Create the Add Manager function.
Create the Remove Manager function.
A Bean is set using its Path to Value property. A manager context key is used to set this path.
Create the Grid Layout (Bean Data Fields for Manager) for the manager data fields. For more information, see Defining the Grid Layout.
Create the add manager Form Dialog (Form for adding a new company manager) to hold the Bean Data Fields for Manager grid. For more information, see Defining the Dialog.
Here is where you set an additional context key (manager) using Writable Data Object to create a new instance of a Manager data object whose storage property is none. This transitory object holds the data fields set in the dialog. A new Manager object is created each time the dialog box appears. Because the storage type is none, the Manager object must be copied into the company structure to persist it, which is accomplished by calling company.save() in the Add Manager function.
The defined Action, whose flow type is Previous, calls the Add Manager function, which requires two parameters:
company, of type Company, from context key company
newManager, of type Manager, from context key manager
Create The Company’s Management Team table to display the added managers. For more information, see Defining the Table of Managers.
The Add Manager action displays the Form for adding a new company manager as a modal dialog.
The Remove Manager row selection action is used to update the table after selecting a row and calling the Remove Manager function, which requires two parameters: context keys for the selected row and a reference to the company object.
Create a Company Personnel Grid Layout to hold the table. For more information, see Defining the Top-Level Dashboard.
It is in the Additional Context of this component that you use a Writeable Data Object to create the company object which creates a null manager object. 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.

Next, the following contain screen captures that show you all the information you need to construct the types, functions and views for creating a functioning forms example.

Defining the Enumerated Types for Manager and Staff

To create the enumerated types Manager Title and Staff Title:
The Add Type dialog box appears.
The first figure displays the definition of the Manager Title type in edit mode and the second figure displays Staff Title after it is saved. We will not be using Staff Title in this tutorial—it is only there as a placeholder.

Defining the Manager and Staff Types

Still in the types editor, define two more types: Manager and Staff with the settings displayed below, and save them as usual.
Figure 5. Manager type
Figure 6. Staff type

Defining the Company Type

Still in the types editor, define the Company type with the settings displayed below, and save it.
Figure 7. Company type
Related Documents