Signature component

The signature component is not really a UI component of it's own, but rather an attribute data field. To add a signature component, you need to add a Signature attribute to an entity, and the signature component will be shown in the data fields when defining a view.

When defining the page layout, you should see the following.

The component renders as a drawing field, and its size depends on the available space. The size ratio is always 3:1. After drawing the signature with a mouse, tablet, or a finger on a touchscreen device, click Save. After updating the entity the signature will be saved as a new revision in the entity data field.

The signature will be saved as a PNG image.

You can add signature to the template using:

@{
    var img = "";
    if (Model.Signature != null && Model.Signature.HasAnyRevision())
    {
        var signatureBytes = Model.Signature.GetLatestRevision().Content;
        var base64Signature = Convert.ToBase64String(signatureBytes);
        img = $"<img src=\"data:image/png;base64,{base64Signature}\" style=\"max-width: 300px; max-height: 100px;\" />";
    }
}
@Html.Raw(img)