Difference between revisions of "SignatureView Options"

Revision as of 11:51, 1 March 2024

Under Construction

Overview

SignatureView sections are used for signature capture in touch enabled web/mobile Apps.

example_signatureview App

The example_signatureview App is included in the App Builder distribution to demonstrate the use of a SignatureView section. It is shown running in a web browser above.

And here in the App Builder:

Note that SignatureView sections can only be used in touch enabled web/mobile Apps. Preview live in browser to display the signature panel and try it.

The example_signatureview App has TabView Section with three tabs:

Employee: Form Section with employee details from the southwind!employees table
Employee Photo: Form Section with an Image gadget showing the southwind!employees.photo (blob) field
Employee Signature: SignatureView section to display and capture the southwind!signatures.image (blob) field

Signatures Table

The example_signatureview App uses the southwind!signatures table. Its structure is listed below. Your table can have different field names and fewer/additional fields, but must include a unique id field and a blob field to store the signature image.

Field	Field Name	Type	Width	Notes
1	ID	Character	36	Required unique key field.
3	CREATED	DateTime	8	Optional creation datetime field.
4	MODIFIED	DateTime	8	Optional modified datetime field.
5	IMAGE	Blob	8	Required field to store the signature image.

Using a Signatureview Section

In the browser, touch or click the Edit icon and the panel will be enabled. Save, Cancel and Clear icons will now be shown:

Database

Table

Filter

Image column

Keyfield

Keyfield expression

@@ Line 5: / Line 5: @@
 ==Overview==
-SignatureView Sections are used for signature capture in touch enabled web/mobile Apps.
+SignatureView sections are used for signature capture in touch enabled web/mobile Apps.
+[[{{ns:file}}:signatureview_browser2.png|800px|left|border|link={{filepath:signatureview_browser2.png}}|example_signatureview]]
+<br clear=all>
+===example_signatureview App===
+The example_signatureview App is included in the App Builder distribution to demonstrate the use of a SignatureView section.  It is shown running in a web browser above.
+And here in the App Builder:
+[[{{ns:file}}:signatureview_appb.png|800px|left|border|link={{filepath:signatureview_appb.png}}|example_signatureview]]
+<br clear=all>
+Note that SignatureView sections can only be used in touch enabled web/mobile Apps.  [[Deploying_to_Local_Directory#Preview_live_in_browser|Preview live in browser]] to display the signature panel and try it.
+The example_signatureview App has [[TabView Sections|TabView Section]] with three tabs:
+* Employee: [[Form_Section_Attributes|Form Section]] with employee details from the southwind!employees table
+* Employee Photo: [[Form_Section_Attributes|Form Section]] with an [[Image_Gadget_Attributes|Image gadget]] showing the southwind!employees.photo (blob) field
+* Employee Signature: [[SignatureView_Section_Attributes|SignatureView section]] to display and capture the southwind!signatures.image (blob) field
+====Signatures Table====
+The example_signatureview App uses the southwind!signatures table.  Its structure is listed below.  Your table can have different field names and fewer/additional fields, but must include a  unique id field and a blob field to store the signature image.
+{| class="wikitable" width="100%"
+!width="5%"|Field
+!width="10%"|Field Name
+!width="10%"|Type
+!width="5%"|Width
+!width="70%"|Notes
+|-
+|valign="top"|1||valign="top"|ID||valign="top"|Character||valign="top"|36||Required unique key field.
+|-
+|valign="top"|3||valign="top"|CREATED||valign="top"|DateTime||valign="top"|8||Optional creation datetime field.
+|-
+|valign="top"|4||valign="top"|MODIFIED||valign="top"|DateTime||valign="top"|8||Optional modified datetime field.
+|-
+|valign="top"|5||valign="top"|IMAGE||valign="top"|Blob||valign="top"|8||Required field to store the signature image.
+|-
+|}
+===Using a Signatureview Section===
+In the browser, touch or click the '''Edit''' icon and the panel will be enabled.  '''Save''', '''Cancel''' and '''Clear''' icons will now be shown:
+[[{{ns:file}}:signatureview_browser.png|800px|left|border|link={{filepath:signatureview_browser.png}}|example_signatureview]]
+<br clear=all>
 ==Database==