Button

Button is a typical button item, which will appear within the form.

Form Items >Action >Button

Enabling Swipe action for Button form item

To enable swipe action for the Button form item, you have to specify the JSON structure of the swipe action for the button form item in the APPLICATION_CONFIG column present in the FORM_ITEM_DEFINITION 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_ITEM_DEFINITION table for enabling the swipe action in the Button form item 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
FORM_ID	SAMPLE_FORM
ITEM_ID	BUTTON
PARENT_ID	SAMPLE_FORM
POSITION	1
ITEM_TYPE	16
DISPLAY_NM_KEY	(NULL)
PLAIN_LBL	Button Field
LAYOUT	(NULL)
ANCHOR	100
BUNDLE_KEY	common
MIN_LENGTH	(NULL)
MAX_LENGTH	(NULL)
MAX_NUM_LINES	(NULL)
MAX_CHAR_PER_LINES	(NULL)
TOTAL_COLS	(NULL)
ROW_SPAN	(NULL)
COL_SPAN	(NULL)
VALIDATION_TYPE	(NULL)
RAW_KEYS	(NULL)
RAW_VALUES	(NULL)
INCLUDE_SELECT_IND	N
CONTAINER_IND	N
VISIBLE_IND	N
EDITABLE_IND	N
READ_ONLY_IND	N
REQUIRED_IND	N
LOOKUP_IND	N
COLLAPSIBLE_FIRST_IND	N
DS_VIEW_IND	(NULL)
DS_KEY_COLUMN_ID	(NULL)
DS_VAL_COLUMN_ID	(NULL)
WIDGET_ID	(NULL)
CONDITIONAL_IND	N
CACHE_DATA_IND	N
VALIDATE_ON_SWITCH_IND	N
CRITERIA_ID_REQ_IND	N
CONTEXT_CONTAINER_IND	N
HIDE_LABEL	Y
MULTI_LANG_IND	N
UPLOAD_FILE_FORMATS	(NULL)
RESIZABLE_IND	N
LINKED_CURR_COL	(NULL)
LABEL_ALIGN_TYPE	top
APPEND_CURRENCY_MODE	(NULL)
INITIAL_MULTIPLICITY	(NULL)
PRINT_REQUIRED_IND	Y
TOGGLE_IND	N
CHANNEL_ID	A
LABEL_CHAR_COUNT	(NULL)
HELP_ICON_IND	N
COPY_PASTE_IND	N
PRODUCT	(NULL)
SUB_PRODUCT	(NULL)
FUNCTION_CODE	(NULL)
INPUT_ACTION	(NULL)
APPLICATION_CONFIG	{ "additionalProperties": {}, "enableSwipeBtn": true, "labelBeforeSwipe": "Swipe", "labelAfterSwipe": "Unswipe", "iconBeforeSwipe": "locker", "iconAfterSwipe": "unlocked" }
EVENT_CONFIG	(NULL)
VALIDATION_CONFIG	(NULL)
LOV_CATEGORY	(NULL)
LOV_PARENT_ID	(NULL)
LST_UPD_DT	2021-07-23 15:31:34

The following screen shot showcases a button form item with the swipe action in the functional application, Modelhouse:

The following table provides information about the properties that are applicable to the button form item:

#	Property	Description	Sample Values
1	Form ID	Unique ID of the Form on which you want to place the Form Item.	NEW_PAYEE_FORM
2	Item ID	Unique ID to the Form item. This value is automatically configured once the form is selected from the pop-up window.	BUTTON_FIELD1
3	Item Type	To identify the item type in a form.	BUTTON
4	Channel	Assigns the form item compatibility for various devices.	Desktop / Tablet / Mobile
5	Bundle Key	Name of the key associated with the property file which provides the localized label text for the current form item. Form item bundle key supersede the form level bundle key. If this value is blank, form level bundle key will be used to find label keys.	common
6	Plain Label	Text entered in Plain Label field appears as the label of the form item without the resource bundle key translation. 18.1: If you are using the property files, leave the Plain Label field as blank. See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions. Display Name Key is the property-driven label key for the form item. See About Display Name Key and Plain Label till 18.1 for more details about this property and the related conditions. 19.1: In Canvas 19.1, the Display Name Key field is a configuration-driven label key for the form item. See About Display Name Key and Plain Label from 19.1 and Managing Display Names for Forms for more information.
7	Display Name Key		SUBMIT
8	Visibility	Selected: Shows the form item on the Form. De-Selected: Hides the form item from the form, but the data will still be in active.	Selected
9	Help	Selected: Renders the form item with a help icon. De-Selected: Renders the form item without a help icon. Refer the Configuring Help Messages and Tooltips for Form Items section for more information on configuring help text.	Selected
10	Anchor	Defines the size of the form item in terms of percentage (without % symbol).	50
11	Add Icon	By making use of Add Icon option, you can add an icon to the form item. Perform the following steps for adding an icon to a form item: Clickicon to add an icon to the field. By default, the Left option gets selected, which paves the way for the icon to get placed on the left side of the form item's label, whereas if the option Right is chosen, then the icon gets placed on the right side of the form item's label. Click icon to choose an icon for the form item. Icons and Custom are the two available tabs. From the list of icons in Font Awesome, you can choose an icon of your choice. Click Search text field and type the name of the icon, which you wish to choose. Default, Active, Disabled and Error are the four available options, categorized under the field, Choose icons for different state. You can assign separate icons for the four different states of Default, Active, Disabled and Error. Default indicates the default icon of the form item, whereas Active and Disabled depict the active and disabled states of the form item. When the selected form item is active, the chosen icon for Active state gets displayed and similarly, the icon, chosen for Disabled state, gets displayed, if the form item is in a disabled state. When an error occurs, the icon, which was selected for Error, gets displayed. To add a customized icon, click Custom tab. Click Browse Files button to select an image from your local drive. You can even drag and drop the customized image file directly, without any fuss. The customized image appears under the category of Custom Images. If you upload a customized icon for the form item, ensure that you restart the app server, after saving the form. 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 form item.	Selected
12	No text	By making use of No text option, you will be able to remove the text of the button label. Click icon to remove the text, assigned as the button label. The button label is removed and the following screen shot showcases a button, with no text, displayed as its label. Note The No text option appears, only after you select the option of Add Icon. Initially, the No text option doesn't appear on the Primary ribbon. If you do not use the option of Add Icon, then you cannot make use of No text option.	De-Selected
13	Button Style	Enables the users to choose the style of the button. There are two types of button styles, namely, Primary and Outline Primary. The Primary style is the default one, while Outline Primary presents a simple look to the button, with a plain background.	Primary
14	Print	Selected: Allows printing the form item while printing the form. De-Selected: Does not print the particular form item while printing the form.	Selected
15	Switch	Enables you to switch from one form item to another form item along with the applicable properties and their values. To switch from one form item to another form item, execute the steps that follow: Select the form item in the form designer area. Click the Switch icon ( ) on the primary ribbon. Select another form item to switch the existing form item.	NA
16	Clone	Enables you to create a duplicate of the selected form item along with its applicable properties except for the Item ID.	2
17	Event Wiring	The Event Wiring option enables you to assign various events for different set of actions. For detailed information on Event Wiring, refer Form Items Event Wiring.