`

Process Template - Prints

The "Print" section in a process template within Team assistant allows users to define and generate print layouts for various process-related documents, including the Case Overview. This section supports customization using HTML & CSS or React.js (combining HTML and JavaScript).

Purpose

The "Print" section is used to configure printable documents for the process, ensuring that users can generate structured outputs that align with business requirements. This feature is useful for creating:

  • Case summaries
  • Approval forms
  • Reports
  • Other document-based outputs

Supported Technologies

  • HTML & CSS + Javascript: For simple, static document layouts.
  • React.js: For dynamic content rendering, conditional logic, and reusable components.

Implementation

1. HTML & CSS Approach

If you prefer a static layout, use pure HTML and CSS. Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; }
        .header { font-size: 20px; font-weight: bold; }
        .content { margin-top: 10px; }
    </style>
</head>
<body>
    <div class="header">Case Overview</div>
    <div class="content">
        <p>Process Name: {processName}</p>
        <p>Case ID: {caseId}</p>
    </div>
</body>
</html>

Note: Placeholders like {processName} and {caseId} will be replaced by actual process variables.

2. React.js Approach

For more advanced print layouts, React.js allows conditional logic and reusable components. Example:

import React from 'react';

const PrintCaseOverview = ({ processName, caseId }) => {
    return (
        <div>
            <h1>Case Overview</h1>
            <p><strong>Process Name:</strong> {processName}</p>
            <p><strong>Case ID:</strong> {caseId}</p>
        </div>
    );
};

export default PrintCaseOverview;

Usage: Ensure that the component is rendered in an environment that supports React.js.

Configuration

To configure the "Print" section:

  1. Navigate to the Template.
  2. Locate the Print section.
  3. Insert your custom HTML & CSS or React.js code.
  4. Save and test the output to ensure correct formatting.

Best Practices

  • Keep layouts simple for better print performance.
  • Use Scripts for your general components.
  • Optimize images and fonts for clear print quality.
  • Use React.js when dynamic content or logic is required.

Troubleshooting

Issue

Solution

Content not displaying correctly

Ensure all placeholders ({variable}) are properly replaced with actual data.

Print styles not applied

Use @media print in CSS to customize print appearance.

React component not rendering

Ensure React is properly integrated into the Team assistant environment.

Process documents can be printed to PDF (can also be saved as a case document) or HTML format

Anna Gernát Updated by Anna Gernát

Contact

Syca (opens in a new tab)

Powered by HelpDocs (opens in a new tab)