Self Help - Dynamic Form - Use Case

Last modified on 2022/12/20 11:49

  To help you set up this use case, you can download the relevant documentation and sample project.  Open url.png See List of files to download.

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 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 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.
User journey Display
1. The user selects the Service Manager option.
  • The Service Manager logo will appear.
  • The form will remain on the page.
Example - Dynamic form - One choice.png
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.
Example - Dynamic form - Two choices.png

Prerequisites

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

Best Practice icon.png  Create a folder called Resources > Images to store the logos so that you can locate them easily.

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.

  • The Conception pane will appear.
  • The first cell in the form will appear.

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

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.

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

  • Click Add icon.png at the bottom of the form to add a row. 
  • Repeat the procedure for these logo options.
             Form - Elements created.png
    The form elements will appear in the Explorer pane in the User Choice folder.
             Form - Elements tree.png

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.
         Create library variable.png

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.

          Library variables created.png

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 Step type icon - Start.png and select Insert a Step > Insert an Action from the contextual menu.

3. Name the step, Compute Content.
The Description pane will appear.
         Compute content procedure created.png
 

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.

<Project variable for saving the user's selected logo option> = <Input variable of the form element proposing the same selection of logo options>

example  Associate the Service Manager logo option

  • Click and drag the SMLogo project variable to row 1. This variable will save the Service Manager) logo option when it is selected.
  • Press the = operator to map the variables.
  • Click and drag the service_manager input variable and place it just after the operator. This input variable proposes the Service Manager) logo option.
    Macro tab - Drag and drop instructions.png

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

          Macro tab - Instructions created.png

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

Best Practice icon.png  Create a folder called Resources > Images to store the logos so that you can locate them easily.

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.
             Html Content - Drag and drop logo.png

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

          Html Content - Logo page display created.png

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 Step type icon - Start.png and select Insert a Step > Insert a Page from the contextual menu.

3. Name the step, Logos.
The Description pane will appear.
         Display procedure created.png
 

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.

          Display procedure - Drag and drop form.png
 

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.

          Display procedure - Drag and drop Compute content procedure.png

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

  • Click the outline of the procedure.
  • Click Presentation options icon.png and Presentation options - Procedure opening options icon.png in the toolbar.
    Presentation options will appear.
             Display procedure - Drag and drop Compute content procedure - Add presentation option.png
             Display procedure - Drag and drop Compute content procedure - Properties procedure opening.png
  • 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.
         Display procedure - Drag and drop Html contents.png

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 Open eye icon.png in the toolbar.
             Display procedure - Html content - Add visibility condition.png
    The properties window of the visibility condition will appear.
             Display procedure - Html content - Properties visibility condition.png
  • Click Select expression icon.png 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
    Display procedure - Html content - Example visibility condition.png

  • 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 Save disk icon.png 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 User procedure access icon.png icon will appear after the procedure label.

3. Display the procedure in the Conception pane and click User procedure access icon.png 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

Tags:
Powered by XWiki © EasyVista 2022