• Prerequisite
• Check/Uncheck Interaction
  • Steps for using the Check/Uncheck Interaction:
• Redirect Interaction
  • Steps to use the Redirect interaction:
• Set Current Record Interaction
  • Steps to use the Set Current Record interaction:
  • Steps to test the Current Set Record interaction:

Prerequisite

Users should review and understand the Basic Interactions prior to utilizing this document.

Check/Uncheck Interaction

The example covered in these steps below shows how to use the Check and Uncheck interactions to place or remove a checkbox on a field on a form.

Steps for using the Check/Uncheck Interaction:

1. Create a check box field on the form.
   
   
   
   
2. Highlight the whole form by clicking the Parent component icon (the up arrow in the form frame).
   
   
   
   
3. Click on the Interactions tab.
   
   
   
   
4. Click Create new interaction. Our example is to have a check/uncheck on the ‘Is new account’ field whenever we click the field.
   
   
   
   
5. Select "Click."
   
   
   
   
6. Click on the "Select Component Function" arrow to see selections available.
7. Select the "Check/Uncheck" option.
   
   
   
   
8. Click the "Select Target Component" arrow to select an option.
   
   
   
   
9. Select Checkbox input.
   
   
   
   
10. Click Save.
    
    
    
    
11. Test your new interaction by compiling your page.
    
    
    
    
12. Below is an enlarged view focusing on the checkbox field to test. Click anywhere on that field.
    
    
    
    

    Clicking anywhere on the field or the highlighted field will place a Check mark on the check box or remove the check mark on the check box if the checkbox is already marked.
    
    

Redirect Interaction

A redirect interaction allows users to be redirected to a different page other than the current page that the user is on. Users can be redirected from one page to another page on action success. An example is where a user has created two pages: "Project overview" and "Create New Project" pages. A user can use the redirect interaction to redirect users to the Project overview page when a new Project is successfully created.

Steps to use the Redirect interaction:

1. Click the Select Parent Component record icon to select the whole form.
   
   
   
   
2. Click on the Interaction tab.
   
   
   
   
3. Click Create new interaction.
   
   
   
   
4. Click “More” button.
   
   
   
   
5. Click the drop-down arrow on Select event field.
   
   
   
   
6. Select “onActionSuccess” from the list.
   
   
   
   
7. Click the drop-down arrow on Select Component Function.
   
   
   
   
8. Scroll down and select “redirect”.
   
   
   
   
9. Click the “Select a page” button to select the page where you want users to be redirected to.
   
   
   
   
10. Our example is to redirect users to the Project overview page. Select “Project overview” from the list and click the "Select page" button.
    
    
    
    
    
    
11. Note that the "Redirect to" now reflects the Projects overview. Click Save.
    
    
    
    
12. Click the Compile icon to move your changes to the front end.
    
    
    
    

    You will be taken to the front end (user view) of the application.
    
    

    Complete the form and click “Send” and on “onActionSuccess” (meaning if there is no error on the form),
    
     
    
    you will be taken to the Project Overview page as shown on the screenshot below:
    
    

Set Current Record Interaction

Users can use the “set current record” interaction to pass data from one page component to another. When Users do not want to overload their application with unnecessary actions, users can use the set current record interaction to delete projects from the “Project overview” page.

Steps to use the Set Current Record interaction:

1. Ensure that the project overview page contains a data table with a list of projects as shown on the screenshot below.
   
   
   
   
2. Add an action button to enable users to delete each project separately. Reference: guide to creating a delete button. The screenshot below shows an action button named “Delete project” created.
   
   
   
   
3. Add a “dialog” component anywhere outside the table and add a data container to the dialog window. You will delete the existing “submit” button on the dialog window and replace it with an action button that will hold the delete functionality. Note: choose “project id” in pass value to action option. Refer to this video showing how to complete this step.
   
   The example below shows the new action button added after deleting the existing submit button is named “Project delete 2”.
   
   
   
   
4. Select the “Project Delete 2” button and click the edit pencil icon to add a delete functionality to this action button on the dialog window using these directions.
   
   
   
   Below is a screenshot of the configured “Project Delete 2” action button.
   
   
   
   Note: Rename your action and update the permissions to allow users to utilize the action. Example allow admin and web user as shown in the screenshot below:
   
   
   
   
5. Click anywhere on the page and select “visible in builder” to make the dialog invisible.
   
   
   
   
6. Click on the “Delete Project” button created in step 2. This button should also have the delete functionality configured along with renaming the action name to your choosing. The action permissions should be set to allow web user and admin to utilize it. Below is a screenshot of the Delete Project button's action configured with permissions set to allow web user and admin.
   
   
   
   
7. Select the “Delete Project” button and click on the Interactions tab.
   
   
   
   
8. Click the Create new interaction button. 
   
   
   
   
9. Select “Click”, select “Show” on Select Component Function, and Select “Dialog” on Select Target Component as shown on the screenshot below and click Save.
   
   
   
   
10. Click “Create new interaction” to configure the set current record interaction.
    
    
    
    
11. Select "Click," select “setCurrentRecord” on Select Component Function, and Click on the model icon.
    
    
    
    
12. Scroll to locate “Project Id” and select it.
    
    
    
    

13. Select “DataContainer” on the Select Output Component field, select “Current. Record” on the Select Output Option field and click Save.

    Note: If you named your DataContainer a different name, select that name from the drop-down options in the Select Output Component field. Refer to screenshot shown below.

    
    
    The Set current record interaction is ready to be used.
    
    Note: To make your application have a better user experience, we recommend adding two more interactions when using this set current record example listed above:
    1. “On action success” – Hide the Dialog.
    2. “On action success” – Refetch – Data table
       
       
     Below are screenshots of what the two recommended interactions should look like:
    
    
    
    

Steps to test the Current Set Record interaction:

1. Click the “Compile” icon shown on the screenshot below to move all changes to the front end.
   
   
   
   Below is an example of the screenshot displayed to user after clicking the compile icon.
   
   
   
   
2. Pick any row and click the “Delete Project” button.
   
   
   
   The third row was selected on the screenshot above.
   
   Note: User will observe a dialog immediately appear and the third-row record will be deleted immediately.Also, because the Hide Dialog and Refetch data table interactions are added in this scenario for better user experience, user will be shown an updated data table with the first two rows untouched. Below is the screenshot of the result.