Page Comparison

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

...

Info
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:

Code Block

language	actionscript3

{
  "additionalProperties": {},
  "enableSwipeBtn": true,
  "labelBeforeSwipe": "Please 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:

Note
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": "Please 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:

Image Added

#

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 iconImage Modifiedto select an icon for the action buttons of the form container.

Image Modified

A screen, comprising of various icons appears.

Image Modified

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.

Image Modified

3. For customized icons, click Custom tab.

Image Modified

4. Click Browse Files button to select an image from your local drive. You can even drag and drop the customized image file directly.

Image Modified

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.

Note

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.

Image Modified

6. For any changes or modifications, click the iconImage Modified. 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.

Image Modified

7. To remove an existing icon of the form container's action buttons, clickImage Modifiedicon.

Image Modified

24

Add Labels

The Add Labels feature paves the way for managing the display names of the container title and action button labels.

...

Version	Old Version 10	New Version 11
Changes made by	Lakshminarayanan1 S CTOO	Lakshminarayanan1 S CTOO
Saved on	Oct 05, 2020	Aug 03, 2021

Page Comparison

Versions Compared

Key

Enabling Swipe action for Action Buttons