This use case describes a dynamic form that displays the different logos of EasyVista products on a given page depending on the user's options and to refresh the page based on the user's selected options.

Overview

The implementation of the use case is performed in several phases:

• Phase 1: Create the form displaying a selection of logos.
  • Each logo option is displayed using an Input field. 
  • The element is defined as a dynamic field with the Checkbox display mode.

• Phase 2: Create the project variables for saving the user's logo options.
  • Each project variable is associated with one logo option.
  • The variable is used to save the user's option (based on the selected or unselected checkbox for each logo) in a Self Help project library variable so that it can be used in the computing procedure.

• Phase 3: Create the computing procedure.
  • The procedure runs a script contained in a macro in an Action step. This is transparent to users.
  • It is used to save the user's options in the dedicated project variables.

• Phase 4: Create HTML content to display the logos on screen.
  • Each HTML content is used to display one logo image.

• Phase 5: Create the procedure for displaying the form.
  • The procedure only consists of one step, Page.
  • It contains all of the resources created in the previous phases.
  • It is used to create the visibility conditions for the logos in order to refresh the page with the user's selected options.

• Phase 6: Test the workability of the form.
  • Run the procedure for displaying the form.
  • Select a few logo options displayed in the form to check that the relevant logos are correctly displayed.
     

User journey	Display
1. The user selects the Service Manager option. The Service Manager logo will appear. The form will remain on the page.
2. The user selects two options, Service Manager and Service Bots. The page will be refreshed. The Service Manager and Service Bots logos will appear.

Prerequisites

1. Copy the images of EasyVista logos to the Self Help project library in which you want to create your form.

Phase 1: Create the form displaying a selection of logos.

Step 1: Create the form.

1. Expand the tree structure in the Explorer pane for the Self Help project in which you want to create your form.

2. Right-click the folder where the new form should be created and select New > Form from the contextual menu.
The form will be inserted in the Explorer pane. Its name will be <New form>.

3. Rename the form, User Choice.

Step 2: Create the form elements.

1. Double-click the form in the Explorer pane.

2. Click  in the cell and select Add > Input field from the contextual menu.
The properties window of the new element will appear.
         

3. Define the new element.

• Enter the label of the first logo option: Show me the Service Manager logo.
• Define the form element as a checkbox by selecting the Boolean value in the Input type field.
• Modify the names of the input and output parameters to service_manager so that you can identify them easily.
• Click Finish.
  • The new form element will be inserted in the Conception pane.
  • The Description pane will appear.

• Select the Type and Validation tab in the Description pane.
• Select the Dynamic Field box.

4. Specify the other form elements for the other logo options.

• Click  at the bottom of the form to add a row. 
• Repeat the procedure for these logo options.
           
  The form elements will appear in the Explorer pane in the User Choice folder.
           

Phase 2: Create the project variables for saving the user's logo options.

Step 1: Create the project variable.

1. Right-click the Library folder in the Explorer pane for the Self Help project in which you created your form and select New > Variable from the contextual menu.
The properties window of the new project variable will appear.
         

Step 2: Specify the properties of the project variable.

1. Enter the label of the first project variable associated with the first logo option: SMLogo.

2. Select the True/False (Boolean) value in the Data type field to indicate that the variable is associated with the Checkbox display mode.

3. Select False in the Default value section to indicate that the variable is associated with an element that is not selected by default when the form is opened.

4. Click Finish.

5. Repeat the procedure to create the other project variables associated with the other logo options.
The variables will appear in the Explorer pane in the Project Variables folder.

Phase 3: Create the computing procedure.

Step 1: Create the procedure.

1. Right-click the Self Help project in which you created your form and select New > Procedure from the contextual menu.
The procedure will be inserted in the Explorer pane. Its name will be <New procedure>.

2. Rename the procedure, Compute Content.

Step 2: Create an Action step.

1. Double-click the procedure in the tree structure of the Explorer pane.
The procedure will appear in the Conception pane.

2. Right-click the Start step  and select Insert a Step > Insert an Action from the contextual menu.

3. Name the step, Compute Content.
The Description pane will appear.
         
 

Step 3: Associate the input variables of the form elements with the corresponding project variables.

1. Select the Macro tab in the Description pane.

2. Click and drag variables from the Explorer pane to the Macro tab to define the association as shown below.

3. Repeat the procedure to associate the variables for each logo option. Press <Enter> to insert a new row for each association.

Phase 4: Create HTML content to display the logos on screen.

Step 1: Create the HTML Content resource.

1. Right-click the Self Help project in which you created your form and select New > Content from the contextual menu.
The resource will be inserted in the Explorer pane. Its name will be <New content>.

2. Rename the resource, Service Manager.
 

Step 2: Define the resource contents.

1. Double-click the resource in the tree structure of the Explorer pane.
The resource will appear in the Conception pane.

2. Define the page contents to be displayed when the user selects the Service Manager logo option.

• Enter the following text, Here is the Service Manager logo.
• Click and drag the logo image from the Resources > Images folder to the Conception pane.
           

3. Repeat the procedure for each HTML content displaying one logo option. Remember to create a new resource each time.

Phase 5: Create the procedure for displaying the form.

Step 1: Create the procedure.

1. Right-click the Self Help project in which you created your form and select New > Procedure from the contextual menu.
The procedure will be inserted in the Explorer pane. Its name will be <New procedure>.

2. Rename the procedure, Display Logos.

Step 2: Create a Page step.

1. Double-click the procedure in the tree structure of the Explorer pane.
The procedure will appear in the Conception pane.

2. Right-click the Start step  and select Insert a Step > Insert a Page from the contextual menu.

3. Name the step, Logos.
The Description pane will appear.
         
 

Step 3: Add the User Choice form to the step content.

1. Select the Content tab in the Description pane.

2. Enter the following text, Choose the logo you wish to display.

3. Click and drag the form from the Explorer pane to the Content tab.

Step 4: Add the Compute Content procedure to the step content.

1. Click and drag the procedure from the Explorer pane to the Content tab, and place it just after the form.

2. Specify that the procedure is a computing procedure used to display results using dynamic fields.

• Click the outline of the procedure.
• Click  and  in the toolbar.
  Presentation options will appear.
           
           
• Select the Computing procedure box.
• Click Finish.
   

Step 5: Add the HTML content for displaying logo images to the step content.

1. Click and drag the HTML content from the Explorer pane to the Content tab, and place it in a new row at the bottom of the page.
         

2. Specify that the HTML content should appear only when the user selects the relevant logo option in the form, using a visibility condition.

• Click the outline of the HTML content.
• Click  in the toolbar.
           
  The properties window of the visibility condition will appear.
           

• Click  in the Expression field to select the project variable and define the condition as shown below.

  <Project variable for saving the user's selected logo option> = True

  example  Condition associated with the Service Manager HTML content for the user's logo option, Show me Service Manager Logo
  

• Click Finish.

3. Repeat the procedure for each HTML content displaying one logo option by specifying each time the visibility condition.

Phase 6: Test the workability of the form.

1. Click  in the toolbar of the Conception pane to save the Display Logos procedure.

2. Make the procedure available to users.

• Right-click the procedure in the tree structure of the Explorer pane and select Allow launch by users from the contextual menu.
  The  icon will appear after the procedure label.

3. Display the procedure in the Conception pane and click  in the toolbar.
The form will appear in a new Web browser tab.

4. Check that no logo is displayed by default when the form is opened, as you did not select any checkbox in the Default Value section.

5. Select a few logo options and check that the corresponding logos are correctly displayed.

List of files to download

• PDF file for the use case

• Example project