Altova MobileTogether Designer

The Signature Field control enables the signature of an end user to be stored as a graphic file. This is useful, for example, in courier-business solutions, where signatures are used to acknowledge receipt of a couriered item. As the end user starts drawing his signature in the signature field, the signature is written in Base64 image encoding to a page source node. When the page source is saved, the Base64 image data is saved in it, in the node designated for it.

 

The signature image has the following default properties. Its background-color is the inverse of the page background-color. The signature itself is the same color as the page background-color. The image width is the smaller of the device's viewport dimensions. The image height is half of its width. How these values are calculated with XPath expressions is shown in the table below, together with the control properties you can use to customize these settings.

 

Signature property

Default value

Custom value via control property...

Signature color

$MT_PageBackgroundColor

Text Color

Signature background-color

mt-invert-color ($MT_PageBackgroundColor)

Background Color

Signature image width

min ($MT_CanvasX, $MT_CanvasY)

Signature Creation Width

Signature image height

min ($MT_CanvasX, $MT_CanvasY) div 2

Signature Creation Height

 

The main settings for the signature field are:

 

a page source link, which is the page source node where the signature image data is stored. Drag a page source node onto the control to create/modify the control's page source link. Delete the page source link to clear the association (see Notes below).

the Signature Creation Width and Signature Creation Height properties; these specify the dimensions of the image that will be created

the Text Color and Background Color properties; these specify the colors of the signature text and its background

some Save action that saves the signature image data to the page source; till such an action is executed, the data is stored only in the temporary XML tree

 

 

 

Enabling the end user to edit a signature

The end user's signature is created as an image in a page source node. This being the case, an end user can only add data to a signature drawing that has been started. If the image needs to be edited—for example, if the end user has drawn the signature unsatisfactorily—then the image data must be removed from the node (or the node itself must be deleted), and the signature must be re-drawn. The simplest way to implement this functionality is to create a button control that deletes the node. Do this as follows:

 

1.Create a button control near the signature field control (see screenshot below).

2.Add a Delete Node action as the button's OnClick event, and set the signature's page source node as the node to delete.

Click to expand/collapse

3.Test the button in a simulation. In the screenshot above, notice that the signature is drawn and the image data is saved to the Signature node. The screenshot below was taken after the button was clicked. Notice that the node has been deleted and the signature field has therefore been cleared.

Click to expand/collapse

4.If a signature is now drawn in the signature field, then the Signature node is re-created with the image data of the new signature.

 

 

Note:Alternatively, you can set the button action to update the signature's page source node with the empty string (see the Update Node action). This would delete the image data from the node and therefore clear the signature field, but the node itself would not be deleted.

 

Signature Field events

There is no event associated with the Signature Field control.

 

Signature Field properties

The control's properties are available in the Styles & Properties Pane, and are listed below in the order in which they appear.

 

 

© 2017-2023 Altova GmbH