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.

JavaScript TypeScript Angular React Vue Blazor

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

Usage in Angular

The Angular wrapper is SignatureBlockComponent from SignatureBlockModule: every property is an input, every event an output named on<Event>, and the methods are called on the component reference from @ViewChild. A method that returns a value returns a Promise of it, resolved once the component has rendered; its ...Sync() twin returns the value at once, or null before the component has rendered. Unknown bindings are rejected at compile time.

import { SignatureBlockModule, SignatureBlockComponent } from 'smart-industrial/angular/signatureblock';

<smart-signature-block #signatureBlock [showUserId]="true"></smart-signature-block>

@ViewChild('signatureBlock', { read: SignatureBlockComponent }) signatureBlock!: SignatureBlockComponent;
// methods are called on the component reference; this one returns a Promise
const result = await this.signatureBlock.text();

Properties

Input	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.
`[showReason]` showReason	boolean true	Determines whether the reason is shown.
`[showUserId]` showUserId	boolean true	Determines whether the user ID is shown beside the printed name.
`[showHash]` 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(): Promise<any>` and `textSync(): 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(): Promise<any>` and `verifiedSync(): 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