• FormView Control
• Displaying Captured Images using a Form View
• Displaying Calculated Values on a FormView
• Built-in List Control Editors in a Form View
• Annotation on Form View Controls
• Using Ink on a Form View to Capture Signatures and User Input
• Form View Builder

Using Ink on a Form View to Capture Signatures and User Input

Description

Ink controls allow users to draw on a screen. It can be used to capture signatures, sketches, and more. It is easy to add an Ink control to a Form View Control and a minor step to then save the data entered into the Ink control to a list control. This guide explains how to do this.

Using Ink on a Form View to add a signature to a list control

For a visual explanation on how to implement Ink controls in a Form View, watch the following video.

• Watch Video

Implementing an Ink Control in a Form View

1. In the UX Builder, open the Controls page. In the Data Controls menu click [List] to add a list control to the component.

   

2. In the control's properties list, in the List Properties section, click on the 'List properties' property to open the List Builder.

   

3. In the List Builder's Data Source pane select 'Static' in the Data Source Type' menu.

   

4. Click the [...] button next to the Static data property.

   

5. In the Static Choices dialog click the 'Sample data' button in the lower left corner.

   

6. Add the 'Name and addresses' data and click OK.

   

7. In the first row of the data add a fifth field named 'InkNotes'. Your Static Choices data should look like this, click OK:

   

8. Open the Fields pane of the List Builder. Highlight the 'InkNotes' field that you just defined. In the field properties list on the right in the Client-side section locate the Control type property. Change the Control type from 'Label' to 'Ink'.

   

9. Open the List Layout pane of the List Builder. Use the blue > arrow to move the five static data fields from the 'Available Fields' list to the 'Columns in List' section. Click OK to close the List Builder.

   

10. On the UX Controls page open the 'Other Controls' menu. Click on [Form View] to add a form view control to the component.

    

11. Highlight the Form View control and click on the 'Form properties' property on the right to open the Form View Builder.

    

12. In the Form View Builder's Data Source pane, set the Datasource type property to be 'List'. Click on the [...] button next to the List name property and select the list control that was just defined, in this case list1.

    

13. Open the Form View Builder's Form Layout pane and click the 'Add item' button in the lower left.

    

14. The Select Control Type dialog will open. In the Category menu select 'Data Controls', in the Control menu select [Label], and in the fields list highlight the Firstname, Lastname, City, and State fields. Click OK to add these fields as items.

    

15. Click the Add item button again.

    

16. In the Select Control Type dialog's Category menu again select 'Data Controls'. This time in the Control menu select the [Ink-DataBound] control. In the fields list on the right select the InkNotes field and click OK.

    

17. Click the 'Add item' button one final time. In the Category menu select the Pre-defined Controls option, then in the Control menu choose [Save Form Edits/Cancel Edits Button] and click OK. Then click OK to close the Form View Builder.

    

18. On the UX Controls page open the Containers menu and click on the [Container] option.

    

19. From the Insert Container's 'Container Type' list select 'Editor Set' and then click the 'Insert After' button.

    

20. In the UX Controls page open the Defined Controls menu on the left. Find the Editor-Ink option and click on it to add it inside the editor set.

    

21. Highlight the Form View control and click on the Form properties property again to open the Form View Builder.

    

22. Open the 'Fields' pane of the Form View Builder and highlight the InkNotes field.

    

23. View the field's properties list on the right. Under the Field Properties section change the Field type property from Unspecified to Ink.

    

24. In the Editing section click on the [...] button next to the 'Editor set' property.

    

25. In the Select Editor dialog's Editor Set menu select EDITORSET_1. In the Editor menu select EDITOR_1 and click OK. Click OK to close the Form View Builder.

    

26. Run the Component in Live-Preview. At first you should just see the list control. Click on a row in the list control and the form view will open. Click on the Inknotes field in the formview and the ink editor should open. Make a doodle in the ink editor and click save to place it in the form view. Click the save button with the disk on it to place the doodle into the list control.

    
    In order to keep this example simple the form view uses basic HTML. See the Default template in the Form View Builder's Form Properties pane to make the Form View look more like the list control.