Sign3x › User Documentation

Sign3x — Simple Electronic Signature for MODX 3

Sign3x is a MODX 3 component that provides storage, management, and signing of PDF documents using a Simple Electronic Signature (SES). Each signature records the signer's full name, job title, exact date/time, and a unique SHA-256 hash key that can be used to verify the document's authenticity.

1. Requirements

2. Installation

1. Install the package via the MODX Package Manager (or copy files manually).
2. After installation, two database tables are created automatically:
   • sign3x_documents — documents
   • sign3x_profiles — signer profiles
3. Go to System Settings → Namespace: sign3x and configure the options (see System Settings).
4. Required: create signer profiles in the Employees tab for all users who need signing rights.

3. System Settings

All settings are located in the sign3x namespace. Navigate to: Administration → System Settings → filter by "sign3x".

General

Visual PDF Stamp

4. Administration

Open the Sign3x panel via: Extras → Sign3x. The interface has two tabs.

4.1. Employees Tab

This tab manages signer profiles — records that link a MODX user account to the full name and job title that will appear in the signature.

Exception: users with the sudo flag (super-administrators) skip the group membership check — a profile alone is sufficient.

4.2. Documents Tab

A table of all uploaded documents with search, pagination, and colour-coded status.

• Grey row — draft (status = 0, not signed)
• Green row — signed (status = 1)

Search works across: document name, signer's full name, and hash key.

Available actions:

4.3. Signing Workflow

1. Click the Sign button next to the desired document.
2. A modal dialog opens showing:
   • Document name and a link to preview the PDF
   • Your full name, job title, and the signing date/time
   • A warning that the action cannot be undone
3. Click Confirm. The system will:
   • Record the full name, job title, and exact signing timestamp in the database
   • Generate a unique SHA-256 hash key
   • Set the document status to "Signed"
   • Add a visual stamp to the PDF file (if the PDF stamp is enabled)

5. Sign3x Snippet

The snippet outputs signed documents (status = 1) on the front end with an electronic signature icon and signer information.

5.1. Snippet Parameters

Placeholders Available in Templates

5.2. Usage Examples

<!-- Output the 20 most recent signed documents, default template -->
[[!Sign3x]]

<!-- With a custom limit -->
[[!Sign3x? &limit=`5`]]

<!-- A single specific document -->
[[!Sign3x? &id=`3`]]

<!-- Custom chunk (MODX syntax) -->
[[!Sign3x? &tpl=`sign3x.doc.bs5`]]

<!-- Custom chunk (Fenom syntax, requires pdoTools) -->
[[!Sign3x? &tpl=`sign3x.doc.bs5.fenom` &fenom=`1`]]

<!-- Inline Fenom template -->
[[!Sign3x? &tpl=`@INLINE <a href="{$file_url}">{$name}</a>` &fenom=`1`]]

6. Built-in Chunks

The component ships with six ready-to-use template chunks:

All chunks are editable via Elements → Chunks and can be freely copied and customised to match your design.

All chunks include:

• The Sign3x SVG signature icon
• A tooltip with full signature details: full name, job title, date, hash key
• A link to the PDF document
• ARIA attributes for accessibility

7. Fenom Templates

Fenom is a template engine with {$var} syntax and conditionals like {if}...{/if}. It is provided by the pdoTools component and does not depend on the MODX "Allow Fenom on pages" setting.

Syntax Comparison

Example Fenom chunk with a conditional:

<div class="sign3x-document">
    <span class="sign3x-stamp" aria-label="{$aria_label}">
        <img src="{$assets_url}components/sign3x/img/sign3x.svg" width="32" height="32" alt="">
    </span>
    <a href="{$file_url}">{$name}</a>
    {if $signer_position}
        <small>{$signer_position}</small>
    {/if}
</div>

Snippet call with a Fenom chunk:

[[!Sign3x? &tpl=`sign3x.doc.default.fenom` &fenom=`1`]]

8. CSS and Styling

The built-in stylesheet is loaded automatically when the sign3x_frontend_css setting is not empty (default: assets/components/sign3x/css/frontend.css).

To disable the built-in styles and use your own CSS, clear the sign3x_frontend_css setting.

Key CSS Classes

9. Visual PDF Stamp

When sign3x_pdf_stamp is enabled, a visual stamp is added to the PDF file upon signing. The FPDI and TCPDF libraries are included in the package.

Stamp Modes

When a stamped file is created successfully, the original file is replaced with the signed version and the path is updated in the database. If an error occurs (e.g. the file is protected or a library fails), the document is saved without the stamp and the error is logged in the MODX error log.

10. Signature Verification

Every signature comes with a unique SHA-256 hash key generated from the following data:

SHA-256(id|name|file_path|fio|position|signed_at|salt)

The hash key is displayed:

• In the Documents table in the admin panel
• In the tooltip on the front end when hovering over the signature icon
• In the PDF stamp (if enabled)

Sign3x — a component for MODX 3. This documentation corresponds to the current version of the component.