Editor - SignatureInk
Description
Predefined editor for capturing signatures as Ink data
Video: Capturing Signatures using the SignatureInk Editor
A common requirement when using the FormView control is capturing a signature. Alpha Anywhere has a Signature control, but this control captures signatures as bitmaps and is not ideal for use in a FormView control. The Ink control is better suited for this use case.
In this video we show how a FormView control is configured to use the built-in SignatureInk editor.
Download the component shown in the video.
Create A FormView with an Editor-Signature Ink Control.
In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [List] option to add a list control to the component.
Highlight the list control in the controls tree. In the properties list on the right click on the 'List properties' property in the 'List Properties' section. The List Builder should open.
On the List Builder's 'Data Source' pane set the 'Data Source Type' to be 'Static'.
Click the [...] button next to the 'Static data' property in the 'Static Data' section of the Data Source pane.
In the 'Static Choices' dialog click on the 'Sample data' button.
Click on the 'Name and addresses' option to add this data set to the Sample Data dialog. Select the 'CR-LF format' radio button and click OK.
In the title row of the data add a pipe '|' character and a fifth field named 'Signature' and click OK. The title row should look like this:
Firstname|Lastname|City|State|Signature
Open the 'List Layout' pane. Highlight the five static data fields and use the blue > arrow to move them from the 'Available Fields' list to the 'Columns in List' section.
Open the 'Fields' pane. Highlight the 'Signature' field. In the properties list on the right set the 'Control type' property in the 'Client-side' section to be 'Ink'.
In the 'Ink Control Properties' section set the 'Ink width' property to 100. Click OK to close the List Builder.
Highlight the list control. Open the Other Controls menu. Select the [Form View] option to add a form view control to the component.
Highlight the form view control in the control tree. Open the 'Containers' menu and click on the [Container] option.
From the 'Container Type' list select the 'EditorSet' option. Click 'Insert After'.
Highlight the EditorSet in the control tree. Open the 'Defined Controls' menu and select the Editor-SignatureInk option. Leave the editor's default name EDITOR_1 and click OK.
Highlight the Form View control. In the properties list on the right click on the [...] button next to the 'Form properties' property. The Form View Builder will open.
On the 'Data Source' pane set the 'Datasource type' property to 'List'
Set the 'List name' property to be 'list1'.
Open the 'Form Layout' pane. Click the 'Add item' button.
In the 'Select Control Type' dialog select 'Data Controls' in the Category section. In the Control section choose [Label]. Highlight the 'Firstname', 'Lastname', 'City', and 'State' fields and click OK.
Click the 'Add item' button again.
In the 'Category' list select 'Data Controls'. From the 'Control' list select [Ink-DataBound]. In the fields on the right highlight the 'Signature' field and click OK.
Highlight the [Ink-DataBound: Signature] item in the items list.
In the 'Ink Properties' section of the item properties list set the 'Ink width' to 100.
Click the 'Add item' button a third time.
In the 'Category' list select the 'Pre-defined Controls' option. In the 'Control' list select the [Save Form Edits/Cancel Edits Button] option.
Open the 'Fields' pane and highlight the 'Signature' field.
In the Field Properties section of the properties list set the 'Field type' to be 'Ink'.
Click the [...] button next to the 'Editor set' property in the 'Editing' section.
In the Editor Set menu highligh 'EDITORSET_1'. In the Editor list highlight 'EDITOR_1' and click OK.
Click OK to close the Form View Builder. Run the component in Live Preview.
Click on one of the rows in the list control. The Form View should open.
Click on the Signature item in the Form View. The Editor-SignatureInk control should open.
Create a signature in the editor. Click 'Accept' to add the signature to the Form View and the 'Save' button to add the Form View data to the list.
See Also