Forms Lab (User Input Form)

Owned by Hammad Shahid
Last updated: Oct 22, 2023
6 min read

Objective

Create a Form

  1. Has only one tab: Person info

  2. Has only one section: Person Details

  • Person Details section should include these fields:
    first name, last name, email, and department where the department is a dropdown list that is bound to a static data source.

Credentials:

User ID: Test

Password: P@$$w0rd

  1. Start the 20331B-NYC-DC-05 virtual machine. Wait for the virtual machine to display the Desktop.

  2. On your Desktop, Right-click Workflow Studio (WFS), and then click Run as administrator.

  3. Wait for WFS to start and enter your credentials.

 

  1. In Solution Explorer, right-click on the Developer Packages folder, create a new folder called DemoLabs, and click the Ok button.

 

  1. Add New Folder dialog box will appear from it; select the following options

  • User Interface > Lookup Control

  • User Interface > Forms

  • User Interface > UI Pages

  • Workflows > Applications

And click the Ok button.

  1. Expand the Developer Packages folder, find the DemoLabs folder, expand it under the DemoLabs folder, expand the User Interface folder, right-click on the Forms folder, hover your mouse on the New User Interface option and Click on Form.

  1. Wait for the Form designer to be loaded.

 

  1. Click on the Save button to save your Form and give it the name PersonForm.

 

  1. Right-click on the Form Data then click on Add Object and go to Rbac Components tab from there select the Person component and click on Add button.

 

 

  1. Double-click on Person1 and rename it to Person only.

  1. Now expand the person component and drag and drop the following fields/columns on the Form Designer.

  • FirstName

  • Last Name

  • Email

  • Department

 

  1. Now double-click on Tab1 and rename it to Person Info, then double-click on Tab1 Section1 and give it the name Person Details. Lastly, double-click on FirstName and LastName fields and put a space between them.

 

  1. Now right-click on the Department field and click on the Edit option.

  1. It will bring up the Field Configuration dialog box from there go to the Control Types tab and uncheck the Use Default Control Template checkbox a list of controls will become enabled select the DropdownList control and click Ok.

  1. Now right-click on the Data Sources and then click on Add Data Source.

  1. From the Add New Data Source dialog box select Create New Data Source option and click on the Next button

  1. In the Data Source Name textbox write dsDepartment from the DataSource Type and select the Custom List option and then click on Add button and add the following field

Name Value

  • IT IT

  • Marketing Marketing

  • Sales Sales

Click on the Finish button.

 

  1. Now again right click on the Department field and click on the Edit option then go to DataSources tab from there uncheck the Use Default Datasource checkbox look for your newly created datasource and select it.

  1. Now go to the Standard Properties tab and in the Display Field dropdown select Name and in the Selected Value Path dropdown select the Value and click on the Ok button.

  1. Now click on publish button to publish your Form. The publishing dialog box will appear, click on the Next button twice to Publish the Form.

  1. Once publish successfully click on the Ok button.

  1. Now it will ask you to restart the workflow studio, click on the Yes button.

  1. Expand the Developer Packages folder, find the DemoLabs folder expand it under the DemoLabs folder, expand the Workflows folder right click on the Applications folder, hover your mouse on the New Workflow option and Click on Flow Chart Workflow

  1. Wait for the Workflow Designer Pane to be loaded. Once loaded, click on the save button to save your workflow.

  1. Give your workflow a name in this case PersonForm_WF.

  2. Once saved, drag and drop your Form control activity onto the designer pane of Workflow.

  3. Keep the activity selected. If not selected, then select it, and on the right-hand side change its (Name) property to PersonActivity.

  4. Now click on the start circle, drag the line from it, connect it with your PersonActivity and similarly connect the lines that will come out from your activity to the End circle.

  5. Now click on the publish button to publish your workflow; a dialog box will appear. Click on the Next button twice. Once saved successfully, click on the Ok button.

  6. Open internet explorer or Edge or whichever browser is installed on your machine and go to this URL: Login using EmpowerID (empoweriam.com)

  7. It will ask you to put your credentials, and provide them with your username and password given to you by your lab instructor.

  8. It will take you to your EmpowerID dashboard page. On the left-hand side, click on Low Code/No Code Workflows, and Underneath it, click on Low Code Workflows.

  9. It will take you to the RequestWorkflow page, on the right-hand side of your page, we have an actions pane under it click on the Publish Workflow Studio Item.

  10. On the PublishWorkflowStudioItem page, click on choose file select the .pub file for PersonForm and then click open file, and it will get selected now click on the Submit button.

  11. You will get this message which tells that deployment is successful.

  12. Now click on the Publish Workflow Studio Item again, and this time select the PersonForm_WF published file and hit on the submit button to publish it.

  13. Close your browser and workflow studio and reset the IIS on your machine. Make sure you open Command Prompt in Administration mode.

  14. Now open the EmpowerID on the browser again, expand the Low Code/No Code Workflows, and Underneath it, click on Low Code Workflows.

  15. In the search box, type your workflow name PersonForm_WF and, hit the search button. Your workflow will appear, click on it under the Run column.

  16. Now you can see your Form Control

  17. End