Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 32 Current »

FBO One can be used to electronically capture client approval signatures. Any form or report can be signed, such as the receipt or a custom report.

Signing documents works best on mobile devices with touch screens. To quickly get started with the "Sign Receipt" task, run the following install script, using Administration | Script Editor.

Install sign receipt script
using FboOne.Scripts.Sign;
using ServiceStack;
using System.Linq;
using System;
 
public class Script
{
  public void Main()
  {
    const string productAndWorkflowName = "Sign Receipt";
    var unit = FboOne.Client.UnitOfMeasureRepository.Get()
      .Where(u => new string[] { "item", "unit", "each", "occ" }.Contains(u.UnitCode))
      .First();

    var fbos = FboOne.Client.FboLocationRepository.Get();
    var signTransitionConfig = SignDocumentWorkflowSetup.DefaultSignTransitionConfig();
    signTransitionConfig.SignReceipt = true;
    signTransitionConfig.SignHandlingConfirmation = false;
	signTransitionConfig.OnPageSignatureX = 0.15; // 15% from left 
	signTransitionConfig.OnPageSignatureY = 0.85; // 85% from top
    signTransitionConfig.SignatureSizeRelativeToPage = 0.15; // 15% 
    signTransitionConfig.BoundingBoxWidthRelativeToPage = 0.15;
    signTransitionConfig.BoundingBoxHeightRelativeToPage = 0.1061; // Makes a square on a portrait page
    signTransitionConfig.ShowOnPageBoundingBoxBorder = false; // set to true to see the bounding box outline of the signature 

    var config = new SignDocumentWorkflowSetup.Config
    {
      WorkflowName = productAndWorkflowName,
      SignTransitionConfigString = signTransitionConfig.ToJson(),
    };

    new SignDocumentWorkflowSetup().Main(config.ToJson());

    foreach (var fbo in fbos)
    {
      var signProductConfig = new SignDocumentProductSetup.Config
      {
        FboLocationShortName = fbo.ShortName,
        ProductCode = $"{productAndWorkflowName} {fbo.ShortName}",
        WorkflowName = productAndWorkflowName,
        UnitCode = unit.UnitCode
      };

      new SignDocumentProductSetup().Main(signProductConfig.ToJson());
    }
  }
}

After the setup script has executed, a product named "Sign Receipt" is added to each FBO location. Test it by adding the Sign Receipt task to an order:

Choosing the Sign Now option shows the Sign Document screen. At this point, you can give the screen to your client.

Below the preview of the document, the client is prompted for remarks, and their name and email-address. These prompts can be left out or changed, as outlined later.

Finally, tap the 'Open signature pad' button to place a signature for approval. The signature pad displays full screen. The client can draw with their finger or a mouse.


After signing, the client should be asked to return the screen to the FBO staff member.

After saving by clicking OK, the signed document is saved on the order's bulletin board. Each page of the PDF file will be stamped with the signature, and an extra Signature page is added, that contains the prompted values. 

Download the signed receipt from the bulletin board:

The receipt has the signature in the bottom left corner of each page, and has a signature page at the end.

Sign the receipt after payment

After taking a payment you can sign the authorized payment receipt directly from the 'payment completed' screen. 

Workflow configuration

The setup script creates a workflow and a product. The workflow is defined as follows:

The workflow can be viewed and edited using Administration | Service Workflows. 

The signature screen is displayed by the 'React.SignDocument', as can be seen in the image above in the field 'Transition action screen'.

The action screen can be configured by a configuration string. It is a JSON-encoded string. To ease editing, you can copy it into a code editor such as Visual Studio Code or Notepad++.

Configuration string
{
    "signaturePageTitle": "Approval",
    "prompts": [
        {
            "title": "Remarks",
            "isRequired": false,
            "defaultValue": "",
            "lines": 3
        },
        {
            "title": "Full name",
            "validations": [
                {
                    "javaScriptRegex": ".{3,}",
                    "message": "Please enter a name of at least 3 characters"
                }
            ],
            "isRequired": true
        },
        {
            "title": "Email address",
            "validations": [
                {
                    "javaScriptRegex": "^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$",
                    "message": "Invalid email address"
                }
            ],
            "isRequired": false
        }
    ],
    "signReceipt": true,
    "signHandlingConfirmation": false,
    "addSignatureToEachPage": true,
    "signatureSizeRelativeToPage": 0.18,
    "onPageSignatureX": 0.8,
    "onPageSignatureY": 0.88,
    "boundingBoxWidthRelativeToPage": 0.15,
    "boundingBoxHeightRelativeToPage": 0.1061,
    "showOnPageBoundingBoxBorder": false
}
Signature without email
{
    "signaturePageTitle": "Approval",
    "prompts": [
        {
            "title": "Full name",
            "validations": [
                {
                    "javaScriptRegex": ".{3,}",
                    "message": "Please enter a name of at least 3 characters"
                }
            ],
            "isRequired": true
        }
        ],
    "signReceipt": false,
    "signHandlingConfirmation": false,
    "addSignatureToEachPage": true,
    "signatureSizeRelativeToPage": 0.20,
    "onPageSignatureX": 0.20,
    "onPageSignatureY": 0.71,
    "boundingBoxWidthRelativeToPage": 0.15,
    "boundingBoxHeightRelativeToPage": 0.1061, 
    "showOnPageBoundingBoxBorder": false 
}


The configuration string has the following elements:

ElementDescription
signaturePageTitle
The title of the signature page that is appeneded to the document
addSignatureToEachPage
A boolean indicating if the signature page is to be appended or omitted. If omitted, only the signature image is added to the document.
signReceipt

A boolean indicating that the receipt must be signed.
To sign a custom report as opposed to the receipt of handling confirmation, assign a custom Report Template in the 'Attach order report' drop down field of the workflow transition.

signHandlingConfirmation
A boolean indicating that the handling confirmation report must be signed.
prompts
A set of prompts to be displayed to the client
prompt.title
The caption of the prompt. For example: "Additional services"
prompt.isRequired
A boolean indicating if entering a value is required
prompt.defaultValue

Useful to display a strike-trough or tick-box type prompt, that can easily be edited by the user. For example:

"Also a approved: GPU / Water / Lav Service"

prompt.lines
By default prompts display as a single line text box. Change the height of the text box using the lines property.
prompt.validationsA set of validation rules that the value entered by the user must comply to
prompt.javaScriptRegexThe regular expression that must be matched. For sample expressions see, see Google or http://www.regular-expressions.info/examples.html
prompt.messageThe error message displayed if the value does not match the expression

Setting up a custom report for signing

  1. Create a report using the RDL Report Builder
  2. After uploading the report, set it up as an order-report
  3. Set access permissions to the order report for the appropriate roles. Note that by default, no-one has access.
  4. Test the report by previewing it from the the Print menu in the order detail screen.
  5. Adjust the script from the top of the page. The following lines must be updated:
    1. const string signReceiptWorkflowName = "Sign Receipt"; // Change this to reflect the name of your report
    2. const string fboLocationShortName = "AMS"; // update for your location
      
    3. signTransitionConfig.SignReceipt = false; // must be false
    4. ProductCode = "Sign Receipt", // Change this to reflect the name of the task
  6. Run the script

  7. Link the order report to the three sign transitions of the workflow, using Administration | Service Workflow. Do this by editing each transition and selecting a value in the 'Attach order report' drop down field.
    1. The 'sign now' start-transition
    2. The 'sign now' transition from the 'Awaiting signature' state.
    3. The 'sign again' transition from the 'Signed' state.
  • No labels