Electronic records (21 CFR Part 11)

E-Signature `<smart-esignature>`

ESignature provides the electronic signature dialog described in 21 CFR Part 11.

JavaScript TypeScript Angular React Vue Blazor

<smart-esignature> · 16 properties, 9 methods, 6 events · source/modules/smart.esignature.js

Usage in Blazor

The Razor component is <ESignature> in Smart.Blazor.Industrial: every property is a parameter in PascalCase, every event an EventCallback<Event> named On<Event> whose ev["Detail"] is the typed detail class, and the methods are called on the @ref. String choices are enums. In a Blazor Web App (.NET 8 and later) the page needs an interactive render mode, for example @rendermode InteractiveServer; a statically rendered component stays empty.

@using Smart.Blazor.Industrial
@* .NET 8 and later: an interactive render mode, on the page or for the whole app *@
@rendermode InteractiveServer

<ESignature @ref="esignature" Meaning="approved"
    OnSignRequest="OnSignRequest" />

@code {
    ESignature esignature;

    void OnSignRequest(Event ev)
    {
        ESignatureSignRequestEventDetail detail = ev["Detail"];
    }

    // Task<object> Sign()
    void Call() => esignature.Sign();
}

Properties

Parameter	Type, default	Description
`Record` record	object	Sets or retrieves the record being signed, as { id, title, fields: [{ label, value }] } or any object. The record is shown in the panel and the whole object is hashed into the signature. The panel takes a copy and its hash together, so what is signed is what was shown: a record assigned while the application is verifying a submitted signature does not change that signature (its recordId and recordHash stay those of the record submitted) and is shown once the request is answered.
`Meaning` meaning	string	Sets or retrieves the meaning of the signature. Empty asks the signer to choose.
`Meanings` meanings	IEnumerable<object>	Sets or retrieves the meanings offered, as ids or { id, label }. Empty offers approved, reviewed, authored, responsible, verified and witnessed.
`LockMeaning` lockMeaning	bool false	Determines whether the meaning is shown as fixed text instead of a selection, for a step whose meaning is always the same, such as a release that is always an approval.
`RequireReason` requireReason	bool false	Determines whether a reason must be given before the request is raised.
`Reasons` reasons	IEnumerable<object>	Sets or retrieves preset reasons, shown as a list. Empty gives a free text field.
`SessionUserId` sessionUserId	string	Sets or retrieves the signed-in user, when the application knows one. Pre-fills the user ID and, with continuousSession, is the user whose repeat signings need the password only.
`SessionUserName` sessionUserName	string	Sets or retrieves the printed name of the session user, used in the continuous-session hint and as the signer's name when the signer is the session user and the application's accept() gives no name.
`ContinuousSession` continuousSession	bool false	Determines whether a repeat signing by the session user within sessionTimeout of the last asks for the password only. The first signing always uses both components.
`SessionTimeout` sessionTimeout	int 900000	Sets or retrieves how long after a signing the next one by the same user counts as the same session, in milliseconds.
`MaxAttempts` maxAttempts	int 3	Sets or retrieves the number of rejections after which the panel is locked. 0 disables the lock. reset() unlocks the panel.
`AutoClose` autoClose	int 2500	Sets or retrieves how long the manifestation stays after a signing before the panel closes, in milliseconds. 0 keeps it open until Close.
`IsOpened` opened	bool false	Determines whether the panel is shown. sign() opens it; cancel(), Escape and the close button close it. After a signing the manifestation stays for autoClose milliseconds, or until Close is pressed when autoClose is 0.
`Modal` modal	bool true	Determines whether the open panel is a modal dialog: aria-modal is true, Tab and Shift+Tab stay inside the panel, and when it closes - by Cancel, Escape, Close or after autoClose - the keyboard returns to the element that had it when the panel opened. Set to false for a panel that is part of the page.
`Label` label	string	Sets or retrieves the panel's title. Empty shows 'Electronic signature'.
`Density` density	ESignatureDensity normal	Sets or retrieves the target size. touch makes the fields and buttons 48px high.

Methods

Method	Description
`Task<object> Sign()`	Opens the panel for a record and returns a promise of the signature. The promise resolves when the application calls accept(), and rejects with { reason: 'cancel' \| 'lockout' \| 'superseded' } otherwise. `record` object Replaces the record property when given. `options` object { meaning, reason } for this ceremony.
`Task<object> Accept()`	Called by the application after it has verified the credentials. Builds the signature as { id, userId, userName, meaning, meaningLabel, reason, at, recordId, recordHash }, where recordId and recordHash are those of the record that was submitted, shows the manifestation, raises the signed event and resolves the promise. Returns the signature, or null when no signing was pending. `verification` object { userName, userId, at, id } - the printed name, and the application's values where they are to replace the panel's.
`void Reject()`	Called by the application when the credentials could not be verified or the signer is not authorised. Counts the attempt, shows the rejection and locks the panel after maxAttempts. `reason` string Shown to the signer after 'Signature refused:'.
`void Cancel()`	Closes the panel without signing, raises the cancel event and rejects the promise. Does nothing while the panel is closed.
`void Reset()`	Clears the failed attempt count and the lock. Intended to be called by the application, not by the signer.
`void ResetSession()`	Clears the last signing, so that the next signing asks for both signature components again.
`Task<int> Attempts()`	Returns the failed attempts since the last successful signing or reset().
`Task<bool> IsLocked()`	Returns whether the panel is locked.
`Task<bool> IsContinuous()`	Returns whether the next signing needs the password only.

Events

Every event is an EventCallback<Event>; Event is a dictionary and ev["Detail"] converts to the detail class named under the event.

Event	Description and detail
`OnSignRequest` signRequest ESignatureSignRequestEventDetail	This event is triggered when the signer submits. The application verifies the credentials and calls accept() or reject(). The password is in this event and nowhere else. record is the copy that was shown and recordHash its hash - the signature accept() builds carries the same. `UserId` string The user ID entered, or the session user's. `Password` string The password entered. `Meaning` string The meaning chosen. `Reason` string The reason given, or ''. `Record` object The record being signed. `RecordHash` string SHA-256 of the record, computed when the panel opened or the record property last changed. `Continuous` bool Whether this was a password-only signing. `At` string When it was submitted, ISO 8601 with offset.
`OnSigned` signed ESignatureSignedEventDetail	This event is triggered when the application accepts. `Signature` object { id, userId, userName, meaning, meaningLabel, reason, at, recordId, recordHash }.
`OnRejected` rejected ESignatureRejectedEventDetail	This event is triggered when the application rejects. `Reason` string The reason given, or ''. `Attempt` int How many refusals so far. `Remaining` int Attempts left before the lock, or -1 when maxAttempts is 0.
`OnLockout` lockout ESignatureLockoutEventDetail	This event is triggered when the refusals reach maxAttempts. The application enforces the same on the server. `UserId` string The user ID in the field at the time. `Attempts` int The refusals counted.
`OnOpen` open no detail	This event is triggered when the panel opens.
`OnCancel` cancel no detail	This event is triggered when the panel is closed without signing.

Types

`enum ESignatureDensity`

ESignatureDensity.Normal "normal" ESignatureDensity.Touch "touch"

CSS variables

The component declares 9 CSS variables; the CSS page shows how to set them.

--smart-esign-size --smart-esign-background --smart-esign-header-background --smart-esign-border --smart-esign-primary --smart-esign-primary-text --smart-esign-error-text --smart-esign-ok-text --smart-esign-readout-font