Document Automation Tool - Comprehensive User Manual

Table of Contents

Contents

Document Automation Tool - Comprehensive User Manual 1

Table of Contents. 1

Key Capabilities. 3

Getting Started. 3

System Requirements. 3

Installation and Setup. 3

First Steps. 3

Core Features. 4

Document Viewer. 4

Content Controls Panel 4

Visual Field Types. 4

Document Processing. 4

Supported File Types. 4

Document Loading Process. 4

Document Structure Analysis. 5

Field Management 5

Field Types. 5

Field Operations. 6

Advanced Field Features. 7

Template Engine. 7

Template Processing. 7

Conditional Content 7

Template Variables. 8

Optional Content Management 8

Visual Markers. 8

Managing Optional Content 9

Email Integration. 9

HTML Email Conversion. 9

Email Templates. 10

Advanced Features. 10

Chatbot Integration. 10

Automation Workflows. 11

Performance Optimization. 11

Developer API 12

Field Update API 12

Document Processing API 12

Utility Functions. 13

Event Handling. 13

Troubleshooting. 13

Common Issues. 13

Error Messages. 15

Debug Mode. 15

Support Resources. 15

Technical Specifications. 16

Technology Stack. 16

Browser Support 16

Performance Specifications. 16

Security Considerations. 17

API Compatibility. 17

Conclusion. 17

The Document Automation Tool is a sophisticated web application designed to process, edit, and automate Microsoft Word (DOCX) documents. It provides advanced document automation capabilities with content control management, template processing, and real-time field updates.

Key Capabilities

•           Document Processing: Load and process DOCX files with intelligent content control recognition

•           Field Management: Create, edit, and manage document fields with real-time updates

•           Template Engine: Advanced template processing with conditional sections and dynamic content

•           Content Control Creation: Convert selected text into manageable fields

•           Optional Content Management: Control visibility of optional sections and text

•           Email Integration: Convert documents to HTML email format

•           Real-time Updates: Efficient field updates with visual feedback

Getting Started

System Requirements

•           Modern web browser (Chrome, Firefox, Safari, Edge)

•           JavaScript enabled

•           Internet connection for initial setup

•           DOCX files for processing

First Steps

1.   Launch the Application: Click "New Automation" on the main page

2.   Upload Document: Select a DOCX file from your computer

3.   Document Processing: The application will automatically process your document

4.   Start Editing: Begin working with fields and content controls

Core Features

Document Viewer

The main document viewer provides:

•           High-Fidelity Rendering: Preserves original document formatting

•           Editable Mode: Direct text editing with field management

•           Side Panel: Content controls and field management interface

•           Real-time Preview: Instant visual feedback for changes

•           Export Options: Download modified documents

Content Controls Panel

Located on the right side of the interface, the panel shows:

•           Auto-Generated Fields: Fields detected from bracket notation {fieldName}

•           Modal-Generated Fields: Fields created through the field creation modal

•           Native Content Controls: Existing Word content controls

•           Sysero Controls: Special Sysero integration fields

•           Field Statistics: Count of different field types

Visual Field Types

Fields are color-coded for easy identification:

•           Auto-Generated: Blue highlighting for bracket-detected fields

•           Modal-Generated: Green highlighting for manually created fields

•           Sysero Controls: Orange highlighting for Sysero integration

•           Optional Content: Dark yellow dotted borders for optional text

Document Processing

Supported File Types

•           DOCX: Microsoft Word 2007+ format (primary support)

•           DOC: Legacy Word format (limited support)

Document Loading Process

1.   File Selection: Choose document via file input

1.   Parsing: Document structure is parsed from OOXML

2.   Content Analysis: Text content and formatting are analyzed

3.   Field Detection: Automatic detection of bracketed fields {fieldName}

4.   Control Registration: Content controls are registered in the system

5.   Rendering: Document is displayed with interactive elements

Document Structure Analysis

The application analyzes:

•           Paragraphs: Text blocks and formatting

•           Runs: Individual text segments with formatting

•           Content Controls: Word's native field mechanism

•           Tables: Structured data presentation

•           Headers/Footers: Document metadata sections

•           Styles: Formatting and appearance rules

Field Management

Field Types

2.   Auto-Generated Fields

Detection: Automatically found from bracket notation {fieldName}

Characteristics:

•           Blue visual highlighting

•           Editable through side panel

•           Real-time updates

•           Preserved in exported documents

Example:

Dear {customerName},
 Your order #{orderNumber} has been processed.

3.   Modal-Generated Fields

Creation: Created through the field creation modal

Process:

1.   Select text in the document

2.   Right-click or use field creation button

3.   Enter field name and properties

4.   Field is created with green highlighting

4.   Native Content Controls

Source: Existing Word content controls in the document

Features:

•           Preserved original formatting

•           Compatible with Word's native field system

•           Editable through panel interface

5.   Sysero Controls

Purpose: Special integration fields for Sysero systems

Identification: Fields with "Sysero\_" prefix or similar naming

•           Styling: Orange highlighting with gear icon

•           Functionality: Specialized processing for Sysero workflows

Field Operations

Creating New Fields

Method 1: Text Selection

1.   Select text in the document viewer

2.   Click "Create Field" button or right-click

3.   Enter field name and alias

4.   Choose field properties

5.   Click "Create" to convert text to field

Method 2: Field Creation Modal

1.   Click "Add Field" in the side panel

2.   Enter field details:

•           Display Name: Human-readable name

•           Alias: Internal field identifier

•           Default Value: Initial field content

•           Description: Field purpose/notes

1.   Choose insertion point in document

2.   Click "Create Field"

Editing Field Values

Real-time Updates:

•           Type in field input boxes in the side panel

•           Changes appear instantly in the document

•           Visual flash animation confirms updates

6.   need to save - changes are automatic

Bulk Updates:

javascript
 // Update multiple fields at once
 await FieldUpdater.updateMultipleFields({
   customerName: "John Doe",
   orderNumber: "12345",
   orderDate: "2024-01-15",
 });

Field Management Actions

For each field, you can:

•           Edit Value: Update field content

•           Rename Field: Change display name or alias

•           Delete Field: Remove field from document

•           View XML: Inspect underlying XML structure

•           Export Data: Export field values to JSON

Advanced Field Features

Field Tooltips

•           Hover over fields to see:

•           Field alias/name

•           Current value

•           Field type (auto/modal/native)

•           Creation source

Field Highlighting

•           Temporary Highlighting: Draw attention to specific fields

•           Update Animation: Visual confirmation of value changes

•           Type-specific Colors: Different colors for different field types

Field Search and Navigation

•           Find Fields: Search by name or alias

•           Navigate to Field: Click to scroll field into view

•           Bulk Operations: Select multiple fields for operations

Template Engine

Template Processing

The template engine supports:

•           Variable Substitution: Replace placeholders with actual values

•           Conditional Sections: Show/hide content based on conditions

•           Loop Processing: Repeat sections with dynamic data

•           Nested Templates: Complex document structures

Conditional Content

Section Controls

Start/End Markers:

[section-start:optionalSection]
 This content can be shown or hidden
 [section-end:optionalSection]

Visibility Toggle:

•           Use the side panel to show/hide sections

•           Visual markers indicate optional content

•           Changes affect final document export

Paragraph-Level Conditions

Optional Paragraphs:

•           Entire paragraphs can be marked as optional

•           Controlled through visibility settings

•           Dotted yellow outline indicates optional content

Template Variables

Syntax: Use curly braces {variableName}

Examples:

Dear {customerName},
 
 Your {productType} order #{orderNumber}
 has been {orderStatus} on {orderDate}.
 
 {conditionalContent}

Dynamic Processing:

•           Variables are replaced during document processing

•           Values can be updated in real-time

•           Changes are reflected immediately in preview

Optional Content Management

Visual Markers

Optional content is marked with consistent visual indicators:

Content Types

1.   Optional Text: Dark yellow dotted border around inline text

2.   Optional Paragraphs: Dark yellow dotted outline around entire paragraphs

3.   Hidden Content: Same markers with reduced opacity (40%)

4.   Section Markers: Special styling for section start/end controls

Visual Indicators

•           Optional Content Marker: border: 2px dotted #b8860b

•           Hidden Optional Content: Same border with opacity: 0.4

•           Optional Paragraph: outline: 2px dotted #b8860b

•           Section Controls: Special highlighting for boundaries

Managing Optional Content

Visibility Controls

Section Toggle:

1.   Locate section controls in the side panel

2.   Use toggle switches to show/hide sections

3.   Visual feedback confirms changes

4.   Export reflects current visibility state

Paragraph Controls:

1.   Right-click on optional paragraphs

2.   Choose "Show" or "Hide" from context menu

3.   Paragraph opacity changes to indicate state

Advanced Options

Bulk Visibility:

•           Show/hide multiple sections at once

•           Save visibility presets

•           Export with specific visibility configurations

Conditional Logic:

•           Set visibility based on field values

•           Create dynamic content rules

•           Automate content inclusion/exclusion

Email Integration

HTML Email Conversion

The application can convert documents to HTML email format:

Conversion Process

1.   Document Processing: Current document state is processed

2.   HTML Generation: Word content is converted to HTML

3.   CSS Styling: Inline styles are applied for email compatibility

4.   Image Handling: Images are processed for email clients

5.   Output Generation: Clean HTML suitable for email systems

Email Features

Supported Elements:

•           Text formatting (bold, italic, underline)

•           Paragraph styles and spacing

•           Basic tables and lists

•           Inline images (converted to base64)

•           Links and hyperlinks

Email Client Compatibility:

•           Outlook (desktop and web)

•           Gmail

•           Apple Mail

•           Other major email clients

Usage

javascript
 // Convert document to HTML email
 const htmlEmail = await convertDocumentToEmail(documentData);
 
 // Send email with converted content
 await sendHtmlEmail({
   to: "recipient@example.com",
   subject: "Document Content",
   body: htmlEmail,
 });

Email Templates

Template Variables in Emails:

•           All field variables are processed before email conversion

•           Dynamic content is resolved to final values

•           Optional sections respect visibility settings

Advanced Features

Chatbot Integration

The application includes an AI-powered chatbot for document assistance:

Chatbot Capabilities

•           Document Analysis: Analyze document structure and content

•           Field Suggestions: Recommend field creation opportunities

•           Content Optimization: Suggest improvements to document structure

•           Template Assistance: Help create and modify templates

•           Troubleshooting: Provide guidance for common issues

Using the Chatbot

1.   Access: Click the chat icon in the interface

2.   Ask Questions: Type questions about your document

3.   Get Suggestions: Receive AI-powered recommendations

4.   Apply Changes: Implement suggested improvements

Automation Workflows

Batch Processing

Multiple Documents:

•           Load multiple DOCX files

•           Apply same field updates to all

•           Export batch results

•           Save processing configurations

Template Application:

•           Apply saved templates to new documents

•           Bulk field population

•           Consistent formatting across documents

Integration APIs

External System Integration:

javascript
 // Connect to external data sources
 const customerData = await fetchCustomerData(customerId);
 
 // Update document fields with external data
 await updateFieldsFromData(customerData);
 
 // Export processed document
 const processedDoc = await exportDocument();

Performance Optimization

Efficient Updates

The application uses advanced update strategies:

•           DOM Manipulation: Direct updates without full re-rendering

•           Change Detection: Only update modified elements

•           Batch Operations: Group multiple updates for efficiency

•           Visual Feedback: Immediate user feedback while processing

Memory Management

•           Document Caching: Intelligent caching of document data

•           Garbage Collection: Automatic cleanup of unused resources

•           Load Balancing: Distribute processing across available resources

Developer API

Field Update API

Core Functions

javascript
 // Update single field
 await updateField(fieldAlias, newValue, options);
 
 // Update multiple fields
 await updateMultipleFields({
   field1: "value1",
   field2: "value2",
 });
 
 // Update with highlighting
 await updateAndHighlightField(fieldAlias, newValue);

Advanced Operations

javascript
 // Find fields by name
 const fields = FieldUpdater.findFieldsByName("customer");
 
 // Get all field elements
 const allFields = FieldUpdater.getAllFieldElements();
 
 // Highlight specific field
 await FieldUpdater.highlightField(fieldAlias, {
   duration: 3000,
   color: "blue",
 });

Document Processing API

javascript
 // Load document
 const document = await loadDocument(file);
 
 // Process content controls
 const controls = await processContentControls(document);
 
 // Apply templates
 const processed = await applyTemplate(document, templateData);
 
 // Export document
 const exportedDoc = await exportDocument(document, options);

Utility Functions

javascript
 // XML manipulation
 const element = createWordElement("w:p", content);
 const properties = insertRPrInCorrectOrder(element, properties);
 
 // Content analysis
 const text = getParagraphText(paragraph);
 const isInside = isNodeInside(childNode, parentNode);
 
 // Validation
 const isValid = validateContentControl(controlXml);

Event Handling

javascript
 // Document events
 document.addEventListener("fieldUpdated", (event) => {
   console.log("Field updated:", event.detail);
 });
 
 // Processing events
 document.addEventListener("documentProcessed", (event) => {
   console.log("Document ready:", event.detail);
 });

Troubleshooting

Common Issues

Document Loading Problems

Issue: Document won't load

Solutions:

•           Verify file is valid DOCX format

•           Check file size (max 50MB recommended)

•           Ensure file isn't password protected

•           Try re-saving document in Word

Issue: Formatting appears incorrect

Solutions:

•           Check browser compatibility

•           Clear browser cache

•           Verify document doesn't use unsupported features

•           Try high-fidelity rendering mode

Field Management Issues

Issue: Fields not updating

Solutions:

•           Refresh the page and reload document

•           Check JavaScript console for errors

•           Verify field names don't contain special characters

•           Try manual field update via API

Issue: Field values not persisting in exports

Solutions:

•           Ensure efficient updates are enabled (default)

•           Check that updates have completed before export

•           Verify field mappings are correct

•           Try force refresh before export

Performance Issues

Issue: Slow document processing

Solutions:

•           Close other browser tabs

•           Try with smaller documents first

•           Check available system memory

•           Use efficient update mode (enabled by default)

Issue: Browser crashes or freezes

Solutions:

•           Reduce document complexity

•           Process document in sections

•           Increase browser memory allocation

•           Try different browser

Error Messages

Common Error Codes

ERR_DOC_INVALID: Document format is not supported

•           Solution: Ensure file is valid DOCX format

ERR_FIELD_NOT_FOUND: Specified field doesn't exist

•           Solution: Check field alias spelling and existence

ERR_UPDATE_FAILED: Field update operation failed

•           Solution: Check field is editable and try again

ERR_EXPORT_FAILED: Document export failed

•           Solution: Check document state and try re-processing

Debug Mode

Enable debug mode for detailed logging:

javascript
 // Enable debug logging
 window.DEBUG_MODE = true;
 
 // View detailed field information
 console.log(window.FieldUpdater.getAllFieldElements());
 
 // Check document processing state
 console.log(window.DocumentProcessor.getStatus());

Support Resources

•           Documentation: Refer to this manual and inline help

•           Console Debugging: Use browser developer tools

•           Community Support: Check project repository for issues

•           Technical Support: Contact development team

Technical Specifications

Technology Stack

Frontend

•           React 19: User interface framework

•           TypeScript: Type-safe JavaScript development

•           Tailwind CSS: Utility-first CSS framework

•           FontAwesome: Icon library

•           Lucide React: Additional icon components

Document Processing

•           docxtemplater: DOCX template processing

•           pizzip/jszip: ZIP file handling for DOCX

•           fast-xml-parser: XML parsing and manipulation

•           xmldom: XML DOM manipulation

Utilities

•           axios: HTTP client for API calls

•           file-saver: File download handling

•           web-vitals: Performance monitoring

Browser Support

Fully Supported:

•           Chrome 90+

•           Firefox 88+

•           Safari 14+

•           Edge 90+

Limited Support:

•           Internet Explorer 11 (basic functionality only)

•           Older mobile browsers

Performance Specifications

Document Size Limits:

•           Recommended: Up to 10MB DOCX files

•           Maximum: 50MB DOCX files

•           Field Count: Up to 1000 fields per document

Processing Speed:

•           Small documents (< 1MB): < 2 seconds

•           Medium documents (1-10MB): 2-10 seconds

•           Large documents (10-50MB): 10-30 seconds

Memory Usage:

•           Base application: ~50MB RAM

•           Document processing: +10-100MB per document

•           Field operations: Minimal additional memory

Security Considerations

Data Privacy:

•           All processing occurs client-side

7.   document data sent to external servers

•           Local storage used for temporary data only

File Security:

•           Documents processed in browser memory

8.   server-side file storage

•           Export creates new file without modification of original

Code Security:

•           TypeScript for type safety

•           Input validation for all user data

•           XSS protection for rendered content

API Compatibility

OOXML Standards:

•           ECMA-376 compliant content control creation

•           ISO/IEC 29500 standard adherence

•           Microsoft Word compatibility maintained

Export Formats:

•           DOCX (primary)

•           HTML (email conversion)

•           JSON (field data export)

Conclusion

The Document Automation Tool provides comprehensive document processing capabilities with advanced field management, template processing, and real-time updates. Its intuitive interface combined with powerful automation features makes it suitable for both individual users and enterprise workflows.

For additional support or feature requests, please refer to the project repository or contact the development team.

Last Updated: June 2025

Version: 0.1.0

Founded in 1888, Castrén & Snellman is Finland’s oldest law firm. For decades, the firm has supported Finnish and international clients in transactions, dispute resolution and a wide range of other specialised facets of business law. Today, the firm has offices in Helsinki, Moscow and St. Petersburg and employs more than 250 people.

The Challenge: Doing More with Less

Castrén & Snellman (C&S) prides itself on helping clients succeed in a rapidly changing world. So, when the firm noticed a trend of clients wanting greater value and predictive control over their legal spend, they sought to improve the efficiency of legal service delivery. The Knowledge Management Team, headed by Paula Aura, gathered a project team and began looking for technology that would enable the firm to streamline document drafting, reduce risk and ultimately transform the firm’s way of working. C&S also needed to implement a knowledge management system that would enable them to easily capture and manage the firm’s collective know-how.

Aura explains: “We wanted a partner who had a deep understanding of the legal market and was willing to closely work with us to implement our vision. Sysero offered an innovative solution and a knowledgeable and collaborative team.”

The Solution: Driving Firm-Wide Efficiency 

Sysero collaborated with C&S to develop a comprehensive knowledge management system aptly named “Transformer.” The firm’s model, example and know-how documents were imported into Transformer using the iManage Workflow connector that links Sysero to the iManage document management system. Once in Transformer, the project team organised and categorised the documents by practice, work type and sector.

The team was mindful of the importance of including lawyers early in the planning process, and as such, piloted its programme with the firm’s Mergers & Acquisition team (M&A). “The M&A team are under a lot of pressure to deliver documents to clients in a more efficient manner,” says Carola Lindholm, the project owner and M&A partner.

The firm officially launched Transformer in summer 2016. The project team hosted several training events for its lawyers and used service categories’ weekly meetings as an opportunity to provide further training. Additionally, the team offered lawyers a series of on-demand training tools, including easy instructional guides and videos.

Transformer leverages a customised document automation process to help ease the workload of the firm’s lawyers. Instructed by a lawyer, a project trainee automates each document, which is then routed back to the lawyer for input and feedback. Once a document has been automated, lawyers can search Transformer for the appropriate document and complete it by answering a series of questions displayed within a user-friendly form. The final work product is filed under the client matter record in iManage, where lawyers can access it, along with other matter related files, from anywhere on any device. 

The Result: Transforming the Way Lawyers Work

The introduction of Transformer has “transformed” the way C&S lawyers approach drafting. “By automating some of the most-used documents within the firm, we´ll be able to shift lawyers’ focus from drafting to clients´ special needs and concentrate on producing added value to clients from the start,” Lindholm says.

To date, the firm has automated a number of high-profile documents, including its Share Purchase Agreement, Legal Due Diligence Report template, and Corporate Meeting Minutes to name a few. New documents continue to be automated, and the pipeline for automation keeps growing by request from the lawyers. “The best thing about Sysero’s document automation is that we can merge different model versions, such as languages or buyer and seller side, into one single automated model document,” Lindholm says. “This increases efficiency in our drafting significantly.”

Moving forward, C&S hopes to bring the advantages of automation closer to their clients. The firm already is exploring how knowledge automation can enhance the firm’s collaboration with in-house counsel and help its business clients drive greater efficiency within their own firms.

18 July 2018
Posted by Callie Sierra

We’re pleased to announce the launch of Responsive TM, a new design layout now available for Sysero systems. Responsive TM is a clean, modern design that puts flexibility and accessibility front and center for the user. The new layout incorporates a simple dashboard design, icon-based menus and scrolling process indicators to make it easier for users to access the information most relevant to them. Responsive TM also boasts an enhanced responsive platform to allow users to easily access their Sysero systems from anywhere, on any device. 

Fully Responsive Design

An improved responsive layout automatically responds to the needs of users and the device they’re using, whether it be a desktop, laptop or iPhone. The result is a fluid, consistent experience and greater accessibility across a range of devices and screens.

Beautifully Designed Dashboards

Minimal, design-led dashboards offer users a cleaner layout and quicker access to key information. The new layout also features icon-based navigation that serves as a visual guide to finding relevant information across the system.

Visual Progress Indicators

Visual, scrolling progress indicators clearly indicate the steps involved in a creating a new document, while informing users of where they are in the process.

Completely Customisable

Responsive TM can be completely customised to suit your firm’s brand and use cases. Take advantage of our design service to create a bespoke design that seamlessly integrates your corporate look and feel.

To preview or gain access to the new look, get in touch with us. We’d be happy to walk you through a demo of the new design and help you determine the best way to customise it for your firm.