Electronic records (21 CFR Part 11)

Signature Block <smart-signature-block>

SignatureBlock displays the signature manifestation required by 21 CFR Part 11 §11.50: the meaning of the signature, the printed name of the signer, the date and time of signing with the UTC offset, and the reason if one was given.

<smart-signature-block> · 6 properties, 2 methods, 0 events · source/modules/smart.signatureblock.js

Usage in Vue

Vue uses the custom element directly. A property is bound with :kebab-name; an array or an object needs the .prop modifier so that Vue sets the property rather than an attribute. Events are listened to with @eventName; methods are called on the element through a template ref.

import 'smart-industrial/source/modules/smart.signatureblock.js';

<smart-signature-block ref="signatureBlock" :show-user-id="true"></smart-signature-block>

// methods are called on the element the ref holds
signatureBlock.value.text();

// an array or an object is set as a property, not converted to an attribute: use .prop
<smart-signature-block :signature.prop="signature"></smart-signature-block>

Properties

Binding	Type, default	Description
:signature signature	object	Sets or retrieves the signature to show, as { userId, userName, meaning, meaningLabel, reason, at, recordHash, id }. null shows 'Not signed'. A meaning other than the six standard ones is shown with its meaningLabel and the localized 'by' form (the byMeaning message). A missing or unreadable at is shown as 'No date and time of signing' or 'Date and time not readable' and sets the date-invalid attribute; at may be an ISO 8601 string, a Date or epoch milliseconds.
:record record	object	Sets or retrieves the record as it is now. Given, the block verifies the signature against it and says 'Record matches signature' or 'Record altered since signing', or 'Record cannot be checked' when the signature carries no record hash (the verified attribute is then 'unknown'). The record is verified again on every assignment, including the same object assigned again after it was changed in place; a change made in place without assigning the record again is not seen.
:show-reason showReason	boolean true	Determines whether the reason is shown.
:show-user-id showUserId	boolean true	Determines whether the user ID is shown beside the printed name.
:show-hash showHash	boolean false	Determines whether the record hash is shown, shortened, with the full hash as a tooltip.
:compact compact	boolean false	Determines whether the block is one line instead of a stack.

Methods

Method	Description
text(): string	Returns the manifestation as one line, for example 'Approved by Alice Smith, 2026-09-18 14:32:00 +03:00, Batch release', for a printout or a log. It is built from what the block shows: a custom meaning in its own words, and a missing date said in words.
verified(): boolean	Returns whether the record given still matches the signature: true or false, or null when no record or no signature is given, or when the signature carries no record hash and so cannot be checked.

CSS variables

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

--smart-sigblock-border --smart-sigblock-background --smart-sigblock-ok-text --smart-sigblock-error-text --smart-sigblock-warning-text --smart-sigblock-readout-font