Foglight 7.3.0 - Web Component Tutorial

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 functions to add and remove items from the list of managers. For more information, see Defining the Functions for Adding and Removing a Manager.

•

Create the Add Manager function.

•

Create the Remove Manager function.

•

Create labels for Bean Input fields. For more information, see Defining the Labels.

•

Create the Bean Input components. For more information, see Defining the Bean Input Components.

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

The function creates a new manager entry and saves it, and the Previous flow (with Update checked) updates the table.

•

Create The Company’s Management Team table to display the added managers. For more information, see Defining the Table of Managers.

Here, you configure Actions and Row(s) Selection Actions.

•

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:

In the Module Contents pane, click the drop-down list, select Types, and click Add


	IMPORTANT: Types must be defined in a system module. They are not available in User modules.

The Add Type dialog box appears.

Create two types using the information provided below. Both types must have Common:Enumeration as their Super Type.

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.

Figure 3. Manager Title type