Form Items 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.

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.
   
   
   
   The Form Definition List appears.
   
   
   
   
2. Right-click the NEW_BENEFICIARY_FORM and select the Edit Form option.
   
   
   
   The Edit Form page appears.
   
   
   
   

3. 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 icon.
   
   
   
   The Event Wiring window appears.
   
   
   
   The listed events are: Change, Value Change, AJAX Success and AJAX Failure.
   
   

   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 events of Change, Value Change, AJAX Success and AJAX Failure appear. The events vary significantly for other form items, based on its attributes.

   
   
   
   

4. 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.
   
   
   

   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, and when the established communication with the server gets failed, then you can select the AJAX Failure event.

   
   

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

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

   
   

   
   
   The icons, on the left side, comprise of various actions; that can be assigned for the different set of events.
   
   
   
   The if classallows 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.
   
   
   
   Theicon represents Favorites category. The actions, categorized under the section of Favorites, have been depicted in the following screen shot.
   
   
   
   Theicon represents Add category. The actions, categorized under the section of Add, have been depicted in the following screen shot.
   
   
   
   Theicon represents Display Configuration (DisplayConfig) category. The actions, categorized under the section of DisplayConfig, have been depicted in the following screen shot.
   
   
   
   Theicon represents Data Configuration/Reset (DataConfig/Reset) category. The actions, categorized under the section of DataConfig/Reset, have been depicted in the following screen shot.
   
   
   
   Theicon represents Enable/Show category. The actions, categorized under the section of Enable/Show, have been depicted in the following screen shot.
   
   
   
   Theicon represents Disable/Hide category. The actions, categorized under the section of Disable/Hide, have been depicted in the following screen shot.
   
   
   
   Theicon represents Action/Launch category. The actions, categorized under the section of Action/Launch, have been depicted in the following screen shot.

   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. Configuring Fetching View Data action
   2. Configuring Publish the Action

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

6. To configure the if class, clickicon. Select the event, Change. Click Select drop-down list to select a form item, e.g. TEXT_FIELD226 (Account Number).  
   
   

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

   
   
   
   

7. 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, e.g. equal. 
   
   
   
   
8. After selecting the appropriate value, proceed to select another form item from the drop-down box, e.g. TEXT_FIELD491 (Confirm Account Number). 
   
   
   
   
9. Click Save to save the rule.
   
   
   
   The created rules are categorized under the segment of Rules List, which appear on the right side of the window.
   
   
   
   Several actions can be applied for a single event. You can configure different actions for the same event.
   
   
10. To disable a form item, select the Disable form items in form action. 
    
    
    
    The Disable form items in form page appears.
    
    
    
    
11. Click the Field Name and select a form item, e.g. (TEXT_FIELD340). You can even select multiple form items.
    
    
    
    
12. Click Save.
    
    
    
    
13. To edit the rule, clickicon, whereas to delete it, clickicon. 
    1. Click Save to save the rule.
    
    
    
    The newly created rule appears under the category of Rules List, which can be found on the right side of the window.
    
    
    
    
14. To assign an action involving launch types, click Action/Launchicon.
    
    
    
    The list of actions, categorized under the section of Action/Launchappears.
    
    
15. Click Launch a form with Container in Modal window.
    
    
    
    The Launch a form with Container in Modal window page appears.
    
    
    
    
16. Click the Form Id option and select the form of your choice from the list of available forms, e.g. PAYEE_FORM. 
    
    
    
    
17. 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.g, PAYMENTS_FORM_CONTAINER. 
    
    
    
    

18. To enable the 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.
    
    

    The toggle fields of Full Screen Ind, Close-On Esc, Modal Dialog, and Draggable are optional. The callback text field is optional too.

    
    
    
    

19. To edit the rule, clickicon, whereas to delete it, clickicon.
    1. Click Save to save the rule.
       
       
       
       
20. Clickicon to exit the page.
    
    
    
    
21. Click Saveto save the form.
    
    
    
    A confirmation message, indicating a successful save appears.
    
    
    
    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 a name, entered in the Name of the Beneficiary text field, e.g. Lucy. 
    
    
    
    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 disabled the Name of the Beneficiary text field.
    
    
    
    

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