How to configure Copy Data Task in Designer 2.0?

I’d like to accomplish the following scenario: I aim to showcase both the phone number and the number entered by the user on one screen. Then, I intend to exhibit this same information on the subsequent screen, formatted as ‘OTP sent to [Phone Number] for user [Name].’

8 Likes

@Vikas_Malik could you help on this?

1 Like

@Jay_Sharma Can you help here ?

5 Likes

Copy Data Task and Configure Service Task

Configure Service task helps users to integrate API services on the vDesigner 2.0

Consider the following scenario: User aim to showcase both the phone number and the number entered by the user on one screen. Then, I intend to exhibit this same information on the subsequent screen, formatted as ‘OTP sent to [Phone Number] for user [Name].’

Steps to replicate above example on the vDesigner 2.0:

Step 1: Design Interface in vDesigner

  • Launch vDesigner 2.0.
  • Drag and drop an input field element onto the canvas and name it ‘Mobile Number’ for reference.
  • Drag and drop a button element onto the canvas and name it ‘Send OTP’ for reference. By default, this button should be disabled.
  • Select the input type as ‘Regex’ from the input field property panel and add the regex expression ^[6-9]\d{9}$ under the data validation section. This regex will allow users to enter only valid phone numbers.
  • Configure an event on the completion of the input field, which is ‘Data Validation’ and ‘Enable/Disable Task.’

Fig 1: This fig represents the input field having a valid regex of phone number on vDesigner 2.0

Fig 2: This fig represents the Data Validation task configuration on vDesigner 2.0

Fig 3: This fig represents the Enable/ Diable task configuration on vDesigner 2.0

Step 2: Adding the configure Service Task

  • Once a user enters a valid phone number, the ‘Send OTP’ button will trigger the associated task.
  • Add a ‘Configure Service’ task to the ‘Send OTP’ button element.
  • Select the API service, which is ‘SEND_SMS_DIY’ from the listing.
  • Enter the JSON object inside the body of the task and map the ‘Mobile Number’ input field with the JSON object.
  • Store the complete response in the data model.
  • Review the configuration and save the task.
  • Add a navigation task on the same button.

Fig 4: This fig represents the Configure Service task selection for the API listing

Fig 5: This fig represents the Configuration of JSON Object inside the body of configure Service task

Fig 6: This fig represents the mapping of the JSON Object with the element inside the body of configure Service task

Fig 7: This fig represents the mapping of the response with the Data Modeler entity inside the configure Service task

Fig 8: This fig represents final review state of the configure service task

Step 3: Auto fetching the Mobile Number on the next page

  • Drag and drop a Text element onto the canvas.
  • Map it with the ‘Mobile Number’ input field in the default value smart selector. This will auto-fetch the number entered by the user.

Fig 9: This fig represents mapping of Mobile Number input field in the default value smart selector inside the text element property panel

9 Likes