Hands On: Configure Lookup Widget (C# Experience Needed)

Step 1: Configure Custom Field in Submission Form

1.1 In your program click on Round Settings and then click Submission Form.

1.2 Click Edit under Action.

1.3 Click Manage Questions Form.

1.4 Select the Separator field.

1.5 Update your label.

1.6 Check the box to Turn on Rich Text Mode and then click Edit.

1.7 Click Source.

1.8 Enter your input HTML. Do not use the name attribute as this will error out when OpenWater reads it. When done click Source again to save.

1.9 Close out of the pop up.

1.10 Add a CSS class to all the participating fields you want to populate. When done click Save Form and then Close.

Step 2: Configure JavaScript

2.1 In OpenWater click System Settings.

2.2 Click Theme.

2.3 Click Edit.

2.4 You should only need to modify a small portion of the code. You should not add any resources for jQuery, jQuery UI, or Sweet Talk. This will cause OpenWater to error out.

2.5 The script in the footer is an important component to make the lookup api function properly.

2.6 Update your CSS Class names with matching ones on your submission form.

2.7 Click Save and Back when done.

Step 3: Download & Run Ngrok and Test

3.1 Download Ngrok from http://www.ngrok.com.

3.2 Click Download for Windows (or whatever available OS you are using).

3.3 Run Ngrok and run: ngrok http --host-header=localhost 7071

3.4 Copy the forwarding URL.

3.5 Back in your theme in OpenWaterupdate the window.ApiBaseUrl should be updated with the correct forwarding URL from Ngrok. When done click Save and Back.

3.6 Get your Direct to Program URL and test your submission form. Below is our test working properly and showing that when the drop down has a selection it auto populates our fields.

Complete and Continue