Adding widgets

You can add multiple widgets in a screen. When you are adding widgets, you can also rearrange the widgets as needed.

1. Log on to Sterling Call Center. The Home page opens.
2. From the application header, click the Development Tools icon , and select Customize from the list.

   Alternatively, you can select Customize from Outline. The Select screen to Extend window opens. The list of screens present in the current screen is displayed. For example, if you open the Order Search screen, the tree displays Order Search, Order List Screen, and others present in this screen.

   From the tree, select the screen that you want to customize, and click Extend Screen.

   Note:

   • If you cannot customize the selected screen, an appropriate message is displayed.
   • You cannot use the customize option to customize screens that contain iframes, such as the Print PDF Container screen.
   • If multiple instances of the same screen are found, by default, the first instance of the screen is selected for customization.
3. Select the screen to which you want to add widgets.
   Note:

   • After you select a particular screen to add extensions, you cannot select any other screen. To select another screen, click Close.
   • If you cannot apply extensions for the selected screen, an appropriate message is displayed.
4. Click the Layout tab, if necessary.

   By default, the Layout tab is selected.

5. From Widget Palette panel, select and drag the widget to the Screen Outline panel and place the widget in the appropriate position. The <selected widget>: Basic Properties window opens.
   Note: While you are positioning the selected widget, green color indicates that you can place the widget in the selected position. Red color indicates that you cannot place the widget in the selected position. You can also rearrange widgets by placing the selected widget either before, after, or within a widget.
6. In the Unique identifier field, enter the unique identifier for the widget.
7. If you add multiple widgets to the screen, click Apply to view your changes.

   If you encounter any error during customization, the error log is displayed in the Problem tab. To view warning messages, if any, click the Problem tab.

   The following table provides the mandatory and minimum widget properties:

   Table 1. Widget properties and description

   Widget properties	Metadata name	Description
   Editable widgets
   Checkbox
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Field label	label	The label of the widget.
   Checked value	CheckedValue	Present in the Binding tab. The value that is populated by the check box when selected is displayed.
   Unchecked value	UncheckedValue	Present in the Binding tab. The value that is populated by the check box when cleared is displayed.
   Source	SourceBinding	Displays data on the screen.
   Target	TargetBinding	Transmits data from the screen to a mashup.
   Checkbox List
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Field label	label	Displays the label of the widget.
   Source	SourceBinding	Displays data on the screen. It is suggested that you add source binding for all the widgets.
   Target	TargetBinding	Transmits data from the screen to a mashup. It is suggested that you add target binding for all the widgets.
   Options	OptionsBinding	Present in the Binding tab. Displays all the check boxes from data.
   Date Textbox
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Source	SourceBinding	Displays data on the screen.
   Target	TargetBinding	Transmits data from the screen to a mashup.
   Field label	label	Displays the label of the widget.
   Filtering Select
   Field label	label	Displays the label of the widget.
   Options	OptionsBinding	Present in the Binding tab. Displays all the options applicable for the widget.
   Source	SourceBinding	Displays data on the screen.
   Target	TargetBinding	Transmits data from the screen to a mashup.
   Number Textbox
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Field label	label	Displays the label of the widget.
   Source	SourceBinding	Displays data on the screen. It is suggested that you add source binding for all the widgets.
   Target	TargetBinding	Transmits data from the screen to a mashup. It is suggested that you add target binding for all the widgets.
   Radiobutton Set
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Field label	label	Displays the label of the widget.
   Options	OptionsBinding	Present in the Binding tab. Displays all the radio buttons applicable for the widget.
   Source	SourceBinding	Displays data on the screen.
   Target	TargetBinding	Transmits data from the screen to a mashup.
   Textarea
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Field label	label	Displays the label of the widget.
   Source	SourceBinding	Displays data on the screen.
   Target	TargetBinding	Transmits data from the screen to a mashup.
   Textbox
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Field label	label	Displays the label of the widget.
   Source	SourceBinding	Displays data on the screen.
   Target	TargetBinding	Transmits data from the screen to a mashup.
   Currency Text Box
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Field label	label	Displays the label of the widget.
   Source	SourceBinding	Displays data on the screen.
   Target	TargetBinding	Transmits data from the screen to a mashup.
   Currency	CurrencyBinding	Displays the currency symbol.
   Non-editable widgets
   Button
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Field label	label	Displays the label of the widget.
   onClick event	Not applicable	Present in the Events tab. This event is called on clicking any button on the screen.
   Data Label
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Source	SourceBinding	Present in the Binding tab. Displays the label. Note: Do not use the label attribute.
   Field label	label	Displays the label of the widget.
   Value	value	Provides the display text for the label.
   Label
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Value	value	Provides the display text for the label.
   Hidden Field
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Source	SourceBinding	Displays data on the screen. It is suggested that you add source binding for all the widgets.
   Target	TargetBinding	Transmits data from the screen to a mashup. It is suggested that you add target binding for all the widgets.
   Image
   Image	ImageBinding	Present in the Binding tab. Provides the image details from data to be rendered.
   Link
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Value	value	Provides the display text for the link.
   Source	SourceBinding	Present in the Binding tab. Provides the display text for the link from data.
   onClick event	Not applicable	Present in the Events tab. This event is called on clicking the link.
   Containers
   Content Pane It is suggested that you add at least one widget within a Content Pane.
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Supported Layouts	Not applicable	Only table layout is supported. Table layout can be added by clicking the Add button. Table layout can be added for new widgets added in extension. After you add a table layout, you cannot delete it.
   Field title	title	Displays the title of the tab when added inside a Tab Container.
   Repeating Screen ID	repeatingscreenID	Identifier of a screen that is repeated based on the data.
   Repeating Screen Data	Not applicable	Present in the Binding tab that populates screens specified using Repeating Screen ID widget property.
   Table Layout: Columns	cols	The number of columns in a table layout.
   Table Layout: Repeating Screen ID	repeatingscreenID	Identifier of a screen that is repeated based on the data.
   Table Layout: Repeating Screen Data	Not applicable	Present in the Binding tab that populates screens specified using Repeating Screen ID widget property.
   Tab Container Add at least one Content Pane as a child widget and enter the appropriate properties.
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Title Pane
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   Field title	title	Displays the title that is specified for a panel.
   Supported Layouts	Not applicable	Only table layout is supported. Table layout can be added by clicking the Add button. Table layout can be added for new widgets added in extension. After you add a table layout, you cannot delete it.
   Table Layout: Columns	cols	The number of columns in a table layout.
   Table Layout: Repeating Screen ID	repeatingscreenID	Identifier of a screen that is repeated based on the data.
   Table Layout: Repeating Screen Data	Not applicable	Present in the Binding tab that populates screens specified using Repeating Screen ID widget property.
   Special Widgets
   Screen Reference
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   packageName	packageName	The package name of the screen, and is mandatory.
   className	className	The class name of the screen, and is mandatory.
   Source mappings	SourceMapping	Present in the Binding tab, which is a forward binding to populate data from the parent screen.
   Target mappings	TargetMapping	Present in the Binding tab, which is a forward binding that is used to send data to the parent screen.
   Handle Init	handleInit	Indicates whether the screen inside the screen reference is automatically initialized. When you load a custom screen within this widget, ensure that the value is set to false, if necessary. By default, the value is set to false.
   Dynamic Loading	dynamicLoading	Indicates whether the content of the widget is loaded by using a custom code. If the value is set to true, the contents are not displayed on loading the widget. To display the content of the widget, ensure to write a custom code by using the ControllerUtils.showChildScreen() and ScreenUtils.showChildScreen() methods.
   Grid		By default, one GridColumn is added. You can edit the GridColumn, and enter the appropriate properties.
   Unique identifier	uId	Mandatory: The unique identifier for the widget. Prefix the identifier with extn_.
   noDataMessage	noDataMessage	Displays appropriate message when data is not found.
   Modules	Not applicable	Modules control different behavior or features such single row select or multiple row select of a grid. For more information about modules, see the JavaScript documentation.
   Source	SourceBinding	Displays data on the screen.
   Target	TargetBinding	Transmits data from the screen to a mashup.
   Grid Column
   Field	field	Present in the Binding tab. Unique attribute for columns that corresponds to the column data.
   Source	SourceBinding	Displays data on the screen.
   Target	TargetBinding	Transmits data from the screen to a mashup.
   Column name	name	Displays the column header.
   Hidden	hidden	Hides a column in a grid.
   Is editable	editable	Used to mark a column as editable. Ensure that the grid is also marked editable.
   Editor type	widgetType	The widget type is displayed when the cell is in editable mode.
   Editor properties	EditorProps	Properties that are passed to the widget type. For instance, if you want to mark it mandatory, ensure that the property is selected as required, type Boolean, and value true.

8. Click Save to save all your extensions.
   Note: It is suggested that you refresh or reload the application after you save your extensions.
9. Click Close.