Event Wiring

Form Items Event Wiring enables the users to assign different actions for different events, associated with the form items of the form. The coding requirements have been eliminated and the functionality of Event Wiring paves the way for easier and effective configurations.

...

...

Event Wiring

To manage the features of Form Items Event Wiring, perform the following steps in Canvas Studio

...

:

Let us assume that a form, with a form ID, NEW_BENEFICIARY_FORM has already been created.

1. On the home page of Canvas Studio, click Form Definition on the left navigation pane.
   

...

1. 
   Image Added
   
   The Form Definition List appears.
   

...

1. 
   Image Added
   
   
2. Right-click the NEW_BENEFICIARY_FORM and select the Edit Form option.
   

...

1. 
   Image Added
   
   The Edit Form page appears.
   

...

1. 
   Image Added
   
   

2. Click any one of the form items in the form, e.g. Name of the Beneficiary text field and then proceed to click the Event Wiring

   Image Removed

   Image Added icon.
   

...

1. 
   Image Added
   
   The Event Wiring window appears.
   

...

1. 
   Image Added
   
   The listed events are: Change, Value Change, AJAX Success and AJAX Failure.
   
   

   Note

...

1. The listed events differ for each and every form item, based on its attributes. Since text field is depicted in the following screen shot, the

...

1. events of Change, Value Change, AJAX Success and AJAX Failure appear. The events vary significantly for other form items, based on its attributes.

...

1. 
   Image Added
   
   

2. Type the name of the actions in the search box of Search APIs. The rule text box is an editable field and you can assign the name of your choice, as the rule name. For more information, refer Form and Form Item APIs.
   

...

1. 
   Image Added
   

   For the events of AJAX Success and AJAX Failure, you must upload appropriate JSON files. When the mode of communication with the server is successful, then you can select the AJAX Success event

...

1. , and when the established communication with the server gets failed, then you can select the AJAX Failure event

...

1. .

   
   

2. To upload the JSON file, click the option of Choose file and select the apt JSON file.
   
   

   Note

...

1. The configuration screens are same for both the events of AJAX Success and AJAX Failure.

...

1. 
   Image Added

   
   
   The icons, on the left side, comprise of various actions; that can be assigned for the different set of events.
   

...

1. 
   Image Added
   
   The if class

...

1. Image Addedallows you to assign configurable values for the form items. Using AND, OR gates, you can assign the specific set of configurable values. The Add group and Add rule functionalities pave the way for you to add groups and rules respectively.
   

...

1. 
   Image Added
   
   The

...

1. Image Addedicon represents Favorites category. The actions, categorized under the section of Favorites, have been depicted in the following screen shot.
   

...

1. 
   Image Added
   
   The

...

1. Image Addedicon represents Add category. The actions, categorized under the section of Add, have been depicted in the following screen shot.
   

...

1. 
   Image Added
   
   The

...

1. Image Addedicon represents Display Configuration (DisplayConfig) category. The actions, categorized under the section of DisplayConfig, have been depicted in the following screen shot.
   

...

1. 
   Image Added
   
   The

...

1. Image Addedicon represents Data Configuration/Reset (DataConfig/Reset) category. The actions, categorized under the section of DataConfig/Reset, have been depicted in the following screen shot.
   

...

1. 
   Image Added
   
   The

...

1. Image Addedicon represents Enable/Show category. The actions, categorized under the section of Enable/Show, have been depicted in the following screen shot.
   

...

1. 
   Image Added
   
   The

...

1. Image Addedicon represents Disable/Hide category. The actions, categorized under the section of Disable/Hide, have been depicted in the following screen shot.
   

...

1. 
   Image Added
   
   The

...

1. Image Addedicon represents Action/Launch category. The actions, categorized under the section of Action/Launch, have been depicted in the following screen shot.

   Info
   To apply data filters for the date format, refer Applying Data Filters for the Date format.  To configure Fetching View Data and Publish the Action, refer the following sections:  1.

...

1. Configuring Fetching View Data action 2. Configuring Publish the Action

   
   Image Added
   
   The

...

1. Image Addedicon represents Remove category. The actions, categorized under the section of Remove, have been depicted in the following screen shot.
   

...

1. 
   Image Added
   
   

2. To configure the if class, click

   Image Removed

   Image Addedicon. Select the event, Change. Click Select drop-down list to select a form item, e.g. TEXT_FIELD226 (Account Number).  
   
   

   Note
   The option, isFormValid prompts the user to assign a possible value, which is either true or false.

...

1. 
   Image Added
   
   

2. Once, you select the text field of your choice, a couple of drop-down lists appear. From the list of options, provided in the drop-down list, choose an appropriate value, as shown in the following screen shot.

...

1. e.g. equal. 
   
   Image Added
   
   
2. After selecting the appropriate value, proceed to select another form item from the drop-down box, as shown in the following screen shot.

...

1. e.g. TEXT_FIELD491 (Confirm Account Number). 
   
   Image Added
   
   
2. Click Save to save the rule.
   

...

1. 
   Image Added
   
   The created rules are categorized under the segment of Rules List, which appear on the right side of the window.
   

...

1. 
   Image Added
   
   Several actions can be applied for a single event. There are no restrictions placed on the limits. You can configure different actions for the same event. For instance, if you wish to
   
   
2. To disable a form item; then click , select the Disable form items in formform action. 
   

...

1. 
   Image Added
   
   The Disable form items in form page appears.
   

...

1. 
   Image Added
   
   
2. Click the Field Name and select a form item, e.g. (TEXT_FIELD340). There are no restrictions placed on the selection of form items and you You can even select multiple form items.
   

...

1. 
   Image Added
   
   
2. Click Save.
   

Image Removed

1. 
   Click Save to save the rule. Image Added
   
   
2. To edit the rule, click Image Removed Image Addedicon, whereas to delete it, click Image Removed Image Addedicon.

...

1.  
   1. Click Save to save the rule.
   
   Image Added
   
   The newly created rule appears under the category of Rules List, which can be found on the right side of the window.
   

...

1. 
   Image Added
   
   
2. To assign an action involving launch types, click Action/Launch Image Removed Image Addedicon.
   

...

1. 
   Image Added
   
   The list of actions, categorized under the section of Action/LaunchImage Modifiedappears.
   
   
2. Click Launch a form with Container in Modal window.
   

...

1. 
   Image Added
   
   The Launch a form with Container in Modal window page appears.
   

...

1. 
   Image Added
   
   
2. Click the Form Id option and select the form of your choice from the list of available forms, e.g. PAYEE_FORM. 
   

...

1. 
   Image Added
   
   
2. Click the Container Id option and select a form container, from the list of available form containers. The selected container should be relevant to the previously selected form, e.

...

1. g, PAYMENTS_FORM_CONTAINER. 
   
   Image Added
   
   

2. To enable the

   aforementioned

   toggle options of Full Screen Ind, Close-On Esc, Modal Dialog, and Draggable, click the respective toggles to enable them. You can enter the callback function in callback text field. In case, if you do not want to enable any of these functions, proceed to click Save.
   

...

1. 
   

   Note
   The

...

1. toggle fields of Full Screen Ind, Close-On Esc, Modal Dialog, and Draggable are optional.

...

1. The callback text field is optional too.

...

1. Click Save to save the rule.

   
   

   Image Added
   
   

2. To edit the rule, click Image Removed Image Addedicon, whereas to delete it, click Image Removed Image Addedicon.

   ...

   1. 1. Click Save to save the rule.
         
         Image Added
         
         
   2. Click Image Removed Image Addedicon to exit the page.
      

   ...

   1. 
      Image Added
      
      
   2. Click Save Image Removed Image Addedto save the form.
      

   ...

   1. 
      Image Added
      
      A confirmation message, indicating a successful save appears.
      
      Image Modified
      
      Let's presume that the form, NEW_BENEFICIARY_FORM has been mapped to the app, New Beneficiary Form, which in turn, is mapped to the workspace, titled as Payee. The following screen shot depicts

   ...

   1. a name, entered in the Name of the Beneficiary text field, e.g. Lucy. 
      

   ...

   1. 
      Image Added
      
      When the user proceeds to enter a value in the Account Number text field, the PAYEE_FORM gets launched with a container. Since the action Launch a form with container was assigned to the event Change, the desired action occurs swiftly, once the assigned event gets triggered. The following screen shot serves as a good illustration of the output in the functional application, Modelhouse. On looking at the background of the PAYEE_FORM, it can be easily noticed that the Name of the Beneficiary text field has been disabled. The selected event type was Change, while the action, Disable form items in forms

   ...

   1.  disabled the Name of the Beneficiary text field

   ...

   1. .
      

   ...

   1. 
      Image Added
      
      

   Form items have their own set of events. The following table provides an illustration on the set of events, associated with different form items.
   

   ...

   
   

   Note
   Form Items Event Wiring is not applicable for the following form items: Rate, Independent Lookup, Form Composite, Panel, Empty Cell, Line, Hidden, Empty Row, Conditional Mandatory Text, Mandatory Text and Info Panel.

   
   

   Form Item Category	Type of Form Item	Events
   Form Items

    

    

   Data Entry

    

    

   Text Box	Change, Value Change, AJAX SUCCESS, AJAX FAILURE
   Text

   area

   Area	Change, Value Change, AJAX SUCCESS, AJAX FAILURE
   Password Field	Change, Value Change, AJAX SUCCESS, AJAX FAILURE
   Date	Change, Date Clear, AJAX SUCCESS, AJAX FAILURE
   Spinner	Change, AJAX SUCCESS, AJAX FAILURE
   Amount Field	Change, Value Change, AJAX SUCCESS, AJAX FAILURE
   HTML Editor	Click
   OTP Field	Click, Timer Starts, Timer Ends, AJAX SUCCESS, AJAX FAILURE
   Data Selection

    

    

   	Checkbox Group	Change, AJAX SUCCESS, AJAX FAILURE
   	Radio Group	Change, AJAX SUCCESS, AJAX FAILURE
   	Combo	Change, AJAX SUCCESS, AJAX FAILURE
   	Icon Combo	Click, AJAX SUCCESS, AJAX FAILURE

   AutoSuggest

   Auto Suggest	Change, AJAX SUCCESS, AJAX FAILURE
   Item Selector	Change, Value Change, Item Click, AJAX SUCCESS, AJAX FAILURE
   Lookup	After Select, Clear Lookup, Change, AJAX SUCCESS, AJAX FAILURE
   Color Picker	Change, Value Change, AJAX SUCCESS, AJAX FAILURE
   Slider Field	Validate, AJAX SUCCESS, AJAX FAILURE
   Toggle

    

    

   	Toggle	Validate, AJAX SUCCESS, AJAX FAILURE
   	Checkbox	Change, AJAX SUCCESS, AJAX FAILURE
   Action

    

    

   Button	Click, AJAX SUCCESS, AJAX FAILURE
   Upload Panel	Click, Validate, Before File Add, File Add, File Remove, Item Click, AJAX SUCCESS, AJAX FAILURE
   Display

    

    

   Title	Click
   Label	Click
   Logo	Click
   Hyperlink	Click
   Image Picker	Click
   Containers & More

    

    

   Container

    

    

   Field Set	EXPANDED, COLLAPSED
   Tab Panel	Before Tab Change, After Tab Change, Before Step Change, After Step Change, Wizard Submit, BButton Click, AJAX SUCCESS, AJAX FAILURE
   Image Panel	Click, AJAX SUCCESS, AJAX FAILURE
   Component

    

    

   Widget	Widget Cell Click, Widget Cell Double Click, Widget Row Click, Widget Row Double Click, Widget Cell Data Change, Selection Change, BButton Click, AJAX SUCCESS, AJAX FAILURE
   Form	Click
   Multi Form	Click
   Tree View	Click, Change, Validate, Expanded, Collapsed

   ...