Configuring a Form Infolet to Display Values for Multiple Fields

This topic describes how to configure a form infolet to display values for multiple fields for a business component – for example, the following image shows the Information infolet with the following values: Customer Tier: Gold, Customer Since: 7/12/2020, Profitability: 4. This topic is part of Configuring Data Visualization Components. In this example, one control is created for the applet title and three fields (the maximum) are configured for display in the form infolet.

To configure a form infolet to display three field values

1. Create a new workspace.

2. Create a new applet.

3. Configure the applet properties as shown in the following table – note that this is the generic applet configuration:

   Property Name	Value	Comment
   Name	<AppletName>	The name of the applet. In this example, the applet name is FINS Contact Information Applet.
   Business Component	<BusComp>	The name of the business component containing the fields whose data is to be displayed. The business component must be defined in the business object specified for any view that uses this applet.
   Class	CSSSWEFrameFormInfolet	The name of a C++ class used to manage the applet. This is the infolet framework class for showing multiple field values. The framework constructs the CSS class based on the business component mapped to the applet.
   Type	Standard	By default, the type is Standard.

   The following image shows this sample configuration for the FINS Contact Information Applet:

   

4. For this new applet, navigate to Controls, then create and configure a control for the applet title configuration. In this example, the caption is Information. For details, see Configuring an Infolet to Display a Value for a Field.

   Note: In this configuration example, you create a total of four controls: AppletTitle and three controls that each specify a business component field.

5. For this new applet, create and configure three controls (that will specify the business component fields) with the properties shown in the following table.

   Property	Value	Comment
   Name	<Control Name>	The name of the control.
   Field	<BC Field Name>	The business component field, which is mapped at the applet level. This field value is exposed in the infolet. In this example, the three controls are configured to display data from these business component fields: Customer Tier Created Customer Value
   Field Type	BC Field	The field type, which must be BC Field to display the value of a business component field.
   Caption	<Caption>	The field label for the field. In this example, the three controls are configured to use these captions: Customer Tier Customer Since Profitability
   HTML Type	PlainText	The HTML type for the controls you create. This must be PlainText.

   The following image shows this sample configuration for the controls for the applet FINS Contact Information Applet:

   

To map the applet web template and web template items

1. For this applet (FINS Contact Information Applet), create a new applet web template.

2. Configure the properties for the new applet web template as shown in the following table – note that this is the generic applet web template configuration for this type of infolet.

   Property	Value	Comment
   Name	<Name>	The name of the applet web template.
   Type	Edit List	The type of applet web template. In this case, the Type must be Edit List.
   Web Template	CCAppletFormInfoletTile	The type of web template for this applet web template. The Web Template must be CCAppletFormInfoletTile.

3. For the new applet web template, navigate to Applet Web Template Item, then create applet web template items with the values shown in the following table.

   Name	Control	Item Identifier	Description
   <Web Template Item 1>	<Title Control Name>	184	<Title Control Name> is the control created for showing the applet title. 184 is the item identifier specified in an infolet web template for mapping the applet title.
   <Web Template Item 2>	<Control 2>	501	The web template item for the first control configured for field value display in the form infolet. 501 is the item identifier specified in an infolet web template for mapping the first value within the infolet.
   <Web Template Item 3>	<Control 3>	502	The web template item for the second control configured for field value display in the form infolet. 502 is the item identifier specified in an infolet web template for mapping the second value within the infolet.
   <Web Template Item 4>	<Control 4>	503	The web template item for the third control configured for field value display in the form infolet. 503 is the item identifier specified in an infolet web template for mapping the third value within the infolet.

   The following image shows the sample configuration of the applet web template and web template items, for the FINS Contact Information Applet infolet.

   

To map the presentation model

1. Navigate to Administration - Application screen, then the Manifest Administration view.

   You must register the new applet (such as FINS Contact Information Applet) with presentation model settings. This task is needed for automation support and for supporting a custom CSS style class for infolets. This procedure is the same as the one in Configuring an Infolet to Display a Value for a Field, but in this case the Files record you create specifies the file siebel/forminfoletpm.js.

2. In the UI Objects list, create a new record with the values shown in the following table.

   Type	Usage Type	Name
   Applet	Presentation Model	<AppletName>

3. In the Object Expression list, create a new record with the value shown in the following table.

   Level
   1

4. In the Files list, create a new record with the values shown in the following table.

   Level	Name
   1	siebel/forminfoletpm.js

To map the physical renderer

1. Navigate to Administration - Application screen, then the Manifest Administration view.

   You must register the new applet (such as FINS Contact Information Applet) with physical renderer settings. This task is needed for automation support and for supporting a custom CSS style class for infolets. This procedure is the same as the one in Configuring an Infolet to Display a Value for a Field, but in this case the Files record you create specifies the file siebel/forminfoletpr.js.

2. In the UI Objects list, create a new record with the values shown in the following table.

   Type	Usage Type	Name
   Applet	Physical Renderer	<AppletName>

3. In the Object Expression list, create a new record with the value shown in the following table.

   Level
   1

4. In the Files list, create a new record with the values shown in the following table.

   Level	Name
   1	siebel/forminfoletpr.js

About Vertical Styling for Form Applets

The framework for form infolets supports automatic vertical styling of the elements. If the data coming from the business component field is too large to fit into the infolet layout, then the framework automatically changes the layout to "Vertical" and the data is shown in a vertical (stacked) fashion as follows, and shown in the following image.

First Name
   DianaMariaRobert
Customer Since
   7/12/2020
Profitability
   5

Vertical styling is handled by the framework itself and requires no custom configuration.