Editor-Camera

Description

Inserts an 'Editor' for capturing an image using the Camera. IMPORTANT: This control MUST be inserted inside an Editor-Set control.

images/ec39.png
An editor-camera (lower left) sets images in a form view (top right) that adds them to a list.

Editors are frequently used to update information in a Form control, which displays information using HTML. As with other editor controls, once one image capture device is defined it can be used in multiple areas of the form view to add images to fields without having to create a new Editor-Camera control. Images can be 'captured' from a camera or 'captured' by navigating to the file that contains the image.

Create an Editor-Camera that Updates Images. 

  1. In the UX Builder's UX Controls page open the 'Data Controls' menu. Select the [List] option to add a list control to the component.

    images/ec2.png
  2. Highlight the List control in the controls tree. In the properties list on the right click the [...] button next to the 'List properties' property in the List Properties section. The List Builder will open.

    images/ec3.png
  3. On the List Builder's 'Data Source' pane set the 'Data Source Type' to 'Static'.

    images/ec4.png
  4. Click the [...] button next to the 'Static data' property on the Data Source pane.

    images/ec5.png
  5. Add some static data to the 'Static Choices' definition. Use the following or create a similar list of choices for images on your device. Click OK.

    name|image
    day lily|-
    buttercup|-
    geranium|-
    aster|-
    daisy|-
    trillium|-
    violet|-
    images/ec6.png
  6. Open the 'List Layout' pane. Use the blue > arrow to move the 'name' and 'image' fields from the 'Available Fields' list into the 'Columns in List' section.

    images/ec7.png
  7. Open the 'Fields' pane and highlight the 'image' field.

    images/ec8.png
  8. In the properties list on the right click the [...] button next to the 'Control type' property in the 'Client-side' section. Select the 'Image' option.

    images/ec9.png
  9. Click the [...] button next to the 'In-line style' property in the 'Client-side' section.

    images/e10c.png
  10. In the Style Editor set the 'Width' and 'Height' properties in the Positioning and Size section to be 1.5in and click OK.

    images/ec11.png
  11. Click on the 'Image Data type' dropdown list in the Image Properties section. Select the 'Base64' option. Click OK To Close the List Builder.

    images/ec12.png
  12. On the Controls page open the 'Other Controls' menu. Select the [Form View] option to add a form view control to the component.

    images/ec13.png
  13. Open the 'Containers' menu and click on the [Container] option.

    images/ec14.png
  14. Select the 'EditorSet' option from the 'Control Type' list and click 'Insert After'.

    images/ec15.png
  15. Highlight the EditorSet control. Open the Defined Controls menu, select the Editor-Camera option, and click OK.

    images/ec16.png
  16. Highlight the Form View control. In the control's properties list on the right click on the [...] button next to the 'Form properties' property to open the Form View Builder.

    images/ec17.png
  17. On the 'Data Source' pane set the 'Datasource type' property to be 'List'

    images/ec18.png
  18. Click the [...] button next to the 'List name' property and select list1.

    images/ec19.png
  19. Open the 'Form Layout' pane. Click the 'Add item' button.

    images/ec20.png
  20. On the 'Select Control Type' dialog select the 'Data Controls' option in the 'Category' list. Select the [Label] option in the 'Control' list. Highlight the 'name' field in the list on the right and click OK.

    images/ec21.png
  21. Click the 'Add item' button again.

    images/ec22.png
  22. In the 'Category' list select the 'Data Controls' option. This time in the 'Control list select the [Image-Databound] option. In the list on the right highlight the 'image' field and click OK.

    images/ec23.png
  23. Click the 'Add item' button again. In the 'Category' list select the 'Pre-defined Controls' option. In the 'Control' list select the [Save Form Edits/Cancel Edits Button] and click OK.

    images/ec24.png
  24. Open the 'Fields' pane and highlight the 'image' field.

    images/ec25.png
  25. In the properties list under the 'Field Properties' section click the drop-down list next to the 'Field type' property and select 'Image'.

    images/ec26.png
  26. In the properties list on the right click the [...] button next to the 'Editor set' property in the 'Editing' section.

    images/ec27.png
  27. In the 'Select Editor' dialog set the 'Editor Set' to be 'EDITORSET_1' ane the 'Editor' to be 'EDITOR_1'. Click OK.

    images/ec28.png
  28. In the 'Image Field Properties' section click the dropdown next to the 'Data type' property and select 'Base 64'.

    images/ec29.png
  29. Check the 'Allow image capture' property checkbox.

    images/ec30.png
  30. Open the 'Form Layout' pane a second time and highlight the [Image-DataBound: image] item.

    images/ec31.png
  31. Check the 'Allow image capture' property checkbox in the 'Camera/Image Capture' section.

    images/ec32.png
  32. In the properties list set the 'Image capture method' property to 'TapOnImage'. This property should be under the 'Camera/Image Capture' section.

    images/ec33.png
  33. Click OK to close the 'Form View Builder'. Run the component in 'Live Preview'.

    images/ec34.png
  34. Highlight a row in the list control. You should see the Form View appear.

    images/ec35.png
  35. Click on the blank 'image' item in the Form View. The Editor-camera should appear.

    images/ec37.png
  36. Navigate to a file that uses an image you want to insert, highlight the image, and click Open.

    images/ec36.png
  37. Click the Form View's 'Save' button to add the image to the list control.

    images/ec38.png