Form Containers

Form containers are window panels that render forms and form items on the browser screen as a modal or non-modal window.

Not just a Window but the Form Container contains the following items:

Provides the Custom Action (Positive and Negative) buttons to submit form model data
Allows to use a same Form Container for different forms
Allows to create multiple Containers for a same Form

Comes with inbuilt support for pre-confirming the data and for re-authorizing the user allows to capture the data manipulation as events and to raise alerts to the entitled users.

To create a Form Container, perform the following steps:

Click Create > Form Container.
In the following pop-up window, configure the fields as required. Details of the configuration fields are specified in the following table.

Once Yes is selected to configure the action buttons, the following corresponding fields shown in the screenshot will be enabled for configuration.

Enabling Swipe action for Action Buttons

To enable swipe action for the action buttons in a form container, you have to specify the JSON structure of the swipe action for the action buttons of the appropriate form container in the APPLICATION_CONFIG column present in the FORM_CONTAINER_ACTION_MAP table in the Canvas schema. The following code snippet serves as a sample reference:

{
  "additionalProperties": {},
  "enableSwipeBtn": true,
  "labelBeforeSwipe": "Swipe",
  "labelAfterSwipe": "Unswipe",
  "iconBeforeSwipe": "locker",
  "iconAfterSwipe": "unlocked"
}

The sample DB entries to be provided in the FORM_CONTAINER_ACTION_MAP table for enabling the swipe action for the action buttons in a form container, are listed as follows:

In the following example, the provided DB entries are associated with the MySQL database. However, the following listed DB entries are applicable for other databases like Oracle, Postrgre and MSSQL.

Column Names	Column Values
APPLICATION_ID	MODELHOUSE
ACTION_ID	PAY_SUBMIT
ACTION_TYPE	POSITIVE
EVENT_ID	(NULL)
BLOCK_POSITION	LEFT
POSITION	1
CONTAINER_ID	PAYMENTS_FORM_CONTAINER
PRECONFIRMATION_REQD	N
PAGE_CODE	(NULL)
REAUTHENTICATION_REQD	N
CHANNEL_ID	A
APPLICATION_CONFIG	{ "additionalProperties": {}, "enableSwipeBtn": true, "labelBeforeSwipe": "Swipe", "labelAfterSwipe": "Unswipe", "iconBeforeSwipe": "locker", "iconAfterSwipe": "unlocked" }
LST_UPD_DT	2021-08-03 17:05:37

The following screen shot showcases an enabled swipe action for the positive action button of the form container in the functional application, Modelhouse:

#	Field Name	Description
	Container Configuration Section
1	Container ID	A unique identifier to the form container.
2	Form ID	Name of the Form ID for which the container is applicable. Select the form from the pop-up window.
3	Window Title	Form window title.
4	Bundle Key	Name of the bundle key associated with the form labels property files.
5	Window Height	Height of the Form in pixels.
6	Window Width	Width of the Form in pixels.
7	Applicable for	Indicates the rendering channel of the form: All – All Devices Desktop – Desktop Only Tablet – Tablet Only Mobile – Mobile Only
8	Form Render Type	This should be either APP or WINDOW: App – Shows the form on the browser as one of the app. Window – Shows the form on the window on click of menu.
	Tools Configuration Section
9	Export Ind	Indicators for adding data export functionality.
10	Print Ind	Indicators for adding print functionality.
11	Help Ind	Indicator for adding help file. The help file name should be like CONTAINER_ID + _FORM_help.htm
12	Modal Ind	Selected – Displays as Modal window. De-Selected – Displays as non-Modal window.
13	Closed Ind	Indicators for closed form.
	Action Button Configuration
14	Action ID	A unique identifier to the action button.
15	Action Type	Type of the action that it stands for: POSITIVE – All the actions that take the data in the form for processing such as Save, Update, and Delete. NEGATIVE – Quits or clears the data in the form such as Close, Reset, Exit, and Back.
16	Event ID	This provides event that should be raised on click of the action defined.
17	Block Position	Position in the Form button bar where the button should appear: LEFT RIGHT
18	Position	Position of button within the block position.
19	Pre-Confirmation	A flag that decides whether to show all the form data in view mode to the user as confirmation before submitting the AJAX request. Y – Pre-Confirmation Required N – Pre-Confirmation not Required
20	Page Code	A value used as the ScreenCode in the corresponding forward XML file to identify the action class.
21	Re-Authentication	A flag that decides whether to authenticate the user or not: Y – Required N – Not Required
22	Events Configured?	Y – Events configured N – Events not configured
23	Add Icon	This option allows you to choose an icon for the action buttons of the form container. Selected: The icon will appear. De-Selected: The icon will not appear. To select an icon for the action buttons of a form container, perform the following steps: 1. Click the iconto select an icon for the action buttons of the form container. A screen, comprising various icons appears. 2. Default, Active and Disabled are the three available options, categorized under the field, Choose icons for different state. To find an icon, type the name of the icon in the Search box to find it. You can assign separate icons for the three different states of Default, Active and Disabled. Default indicates the default icon of the action buttons, whereas Active and Disabled depict the active and disabled states of the action buttons respectively. 3. For customized icons, click Custom tab. 4. Click Browse Files button to select an image from your local drive. You can even drag and drop the customized image file directly. 5. After selecting the image, provide unique names for Class Tag and Search Tag. The Image Name gets assigned automatically. In case, if you wish to change the Image Name, then you can modify it. The name, which you provide in Search Tag, will be detrimental, when you perform a search. Use the name, provided in the Search Tag to find the customized icon. Click Ok to upload the customized icon. If you upload a customized icon for the action button of a form container, ensure that you restart the app server, after saving the form container. Make sure to log out from Canvas Studio and close the Studio application, before restarting the app server. If you do not restart the app server, the uploaded custom icon will not appear as the assigned icon for the selected action button of the form container. 6. For any changes or modifications, click the icon. The appearance of the icon takes the shape of the previously selected default icon. If any changes are applied, then the newly selected icon appears. 7. To remove an existing icon of the form container's action buttons, clickicon.
24	Add Labels	The Add Labels feature paves the way for managing the display names of the container title and action button labels.