Skip to main content

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.


data

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

view


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.


signature


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)