Valence Developer Diaries #011 - Creating Interactive Forms
Channel: CNX Corporation
Date: 19/06/2020

In this week's session we returned to development tips and tricks, this time focused on creating interactive forms using the Form Helper template program. We demonstrated  hiding/showing, disabling/enabling and focusing/setting form fields and values based on the current state of the form.

00:10 - Going over the wireframes for a new Form Widget in NAB
3:10 - An overview of a Basic Form in NAB
3:37 - Helper Program in NAB Form widget - overview
5:15 - Default Template Program review in RDI (Helper Variables: gMode, gField)
7:00 - Previewing the Form widget in the Refine tab
7:38 - Setting and previewing the Helper Program "At Form Creation"
9:10 - Form Helper Program - reviewing calls in the Chrome Developer Tools
11:15 - Creating and reviewing another Helper Program in RDI - restricting user to enter the same company name in the form twice
13:00 - Reviewing calls in the Chrome Developer Tools for the above helper program
15:05 - Creating a form with a dynamic combo box (FilterCombo) - reviewing wireframes
17:40 - Creating a Form widget in NAB with a dynamic combo box
19:30 - Adding a Form Helper to disable some of the Form fields (State, City, Zip) - Chrome Developer Tools review
23:00 - NAB examples included in Valence
25:48 - Creating a Form widget with a combo box of products with dynamic buttons - reviewing wireframes
27:40 - Creating a Form widget in NAB with combo box and dynamic buttons
28:20 - Making a field editable and a dropdown in a Form widget
29:15 - Adding the form helper program to the 3rd form - reviewing network traffic in Chrome Developer Tools
30:40 - Including Form widgets in a NAB application
33:00 - Adding buttons to a Form widget
33:50 - Setting app variables on a NAB - Form Widget buttons
36:12 - Coding NAB buttons as Features using Security Section
38:57 - NAB Form  with Buttons / Features - RDI review
40:09 - Reviewing Network Traffic in Chrome Developer Tools for Form - Buttons