Annotation on Form View Controls

Description

You can annotate form view controls such that a user can draw over captured images with an ink control and then save the modified image to a list.

images/anex.png
A form view with working image capture
images/anex2.png
Clicking the 'Annotate Image' Button lets users draw on the image.
images/anex3.png
The modified image can be saved to the form view and then back into the list control.

For a video explanation on how to implement annotations watch these two videos: Part 1, Part 2.

Implementing an Annotation 

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

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

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

    images/im3.png
  4. Click the button next to the Static data property.

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

    images/im5.png
  6. Add the 'Name and addresses' data and click OK.

    images/im6.png
  7. In the first row of the data add a fifth field named 'Picture' and a sixth field named 'Annotation'. Your Static Choices data should look like this, click OK:

    images/anon.png
  8. Open the List Builder's Fields pane. Highlight the Picture field and go to the Client-side section of that field's properties list. Change the 'Control type' property to 'Image'.

    images/anon2.png
  9. Drop down to the Picture field's Image Properties section and change the 'Image Data type' property to Base64.

    images/anon3.png
    It is important to do this before generating a template for this field
  10. Highlight the Annotation field. Change its Control type to 'Ink'.

    images/anon4.png
  11. Open the List Builder's List Layout pane. Move the Firstname, Lastname, City, State, and Picture fields from the Available Fields list into the Columns in List section using the blue > arrow. Do not move Annotation field.

    images/anon5.png
  12. Highlight the picture field in the 'Columns in List' section. In the Column Properties section click the button next to the "Template" property.

    images/anon6.png
  13. The Column Template dialog will open. Erase any current code in the dialog and click on the Template Genie. Select "Display Ink Over Image".

    images/anon7.png
  14. Select the 'Picture' field for the '' setting and the 'Annotation field for the ''setting. Click OK to close the List Builder.

    images/anon8.png
    The size of the image as it will appear on the list control is defined here (100px by default). Also note that the image source is defined here as being base64.
  15. On the UX Controls page open the Other Controls menu. Click on [Form View] to add a form view control to the component.

    images/anon9.png
  16. Next open the UX Controls page's Container menu and click on [Container]. From the Container Type list choose 'Editor Set'.

    images/anon10.png
  17. Now open the UX Controls page's Defined Controls menu. Click on the Editor-Ink option to add an Ink editor inside the editor set. Name the control EDITOR_INK.

    images/anon11.png
  18. Highlight the Form View that you defined earlier. In the Properties list click the button next to the 'Form properties' property to open the Form View Builder.

    images/anon12.png
  19. On the Form View Builder's Data Source pane select 'List' from the 'Datasource type' dropdown. Click the button next to the "List name" property and select the list that was defined earlier, in this case list1.

    images/anon13.png
  20. Highlight the Annotation field.

    images/anon20.png
  21. In the properties list change the Annotation's 'Field type' to 'Ink'.

    images/anon19.png
  22. Click the button next to the Editor set property in the Editing section.

    images/anon21.png
  23. In the "Select Editor" dialog set the 'Editor Set' to be 'EDITORSET_1' and the 'Editor' to be the ink editor you defined, in this case EDITOR_INK. Click OK

    images/anon22.png
  24. Open the Form View Builder's Fields pane. Highlight the Picture field.

    images/anon14.png
  25. In the Picture field's properties list change the 'Field type' to Image.

    images/anon15.png
  26. View the 'Image Field Properties'. Change the Data type to be 'Base64'.

    images/anon16.png
  27. Check Allow image capture

    images/anon17.png
  28. Check 'Allow image annotation'.

    images/anon18.png
  29. For the 'Annotation field name' property select 'Annotation'

    images/anon23.png
  30. Check 'Clear annotation if picture changed.

    images/anon24.png
  31. Open the Form View Builder's 'Form Layout' pane. Click the Add item button.

    images/anon25.png
  32. 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 select the Firstname, Lastname, City, and State fields. Then Click OK.

    images/anon26.png
  33. Click the 'Add item' button again.

    images/anon27.png
  34. In the Select Control Type dialog select 'Data Controls' again in the Category menu. In the Control menu select [Image-DataBound] and in the fields list select the 'Picture' field. Click OK.

    images/anon28.png
  35. Click the 'Add item' button once more. In the Category menu select 'Pre-defined Controls' and in the 'Control' menu select [Save Form Edits/Cancel Edits Button]. This will allow you to save information from the Form View control into the List Control. Click OK.

    images/anon29.png
  36. Highlight the [Image-DataBound:Picture] item in the item list.

    images/anon30.png
  37. In the Camera/Image Capture section of the properties list check 'Allow image capture'

    images/anon31.png
  38. Set Image capture method to be 'TapOnImage'.

    images/anon32.png
  39. In the 'Image Annotation' section check 'Allow image annotation'

    images/anon33.png
  40. Leave the 'Annotation button HTML' text as 'Annotate Image'.

    images/anon34.png
  41. Close the Form View Builder and run the component in Live Preview. Click on one of the List control rows to open the Form View.

    images/anon35.png
  42. Click on the empty Picture field to add an image to the form view.

    images/anon36.png
  43. Click the Annotate Image button to draw on the image using the Ink control.

    images/anon37.png
  44. Save the altered image back into the List Control.

    images/anon38.png