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 TypeScript

The package ships its definitions: SignatureBlock is the element type and SignatureBlockProperties the properties, both exported from smart-industrial/source/typescript/smart.industrial. document.querySelector('smart-signature-block') is typed as SignatureBlock.

import { SignatureBlock, SignatureBlockProperties } from 'smart-industrial/source/typescript/smart.industrial';

const signatureBlock = document.querySelector('smart-signature-block') as SignatureBlock;

signatureBlock.showUserId = true;
signatureBlock.text();

Properties

Property	Type, default	Description
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	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.
showReason	boolean true	Determines whether the reason is shown.
showUserId	boolean true	Determines whether the user ID is shown beside the printed name.
showHash	boolean false	Determines whether the record hash is shown, shortened, with the full hash as a tooltip.
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