Skip to main content

Arbeitsberichte konfigurieren

Sie können sowohl das Template als auch den Inhalt der Arbeitsberichte frei konfigurieren. Dazu sind Kenntnisse in HTML und JSON erforderlich. Interne und externe Arbeitsberichte können unabhängig voneinander konfiguriert werden.

Im Template können Sie bspw. festlegen, ob und welche Unterschriften mit Arbeitsabschluss eingetragen werden müssen, welche Formularfelder wo im Arbeitsbericht enthalten sind, ob Notizen als solche dargestellt werden und ob Notizen Bildanhänge im Text oder als Dateianhänge enthalten. Auch die Angabe von fest vorgegebenen Texten ist möglich.

Die Konfiguration erfolgt mittels der nachfolgenden Konfigurationsschlüssel.

KIXMobileApp::WorkReport::External::Default

Template und Inhalt externer Arbeitsberichte

Definiert die Struktur interner Arbeitsberichte, die von der KIX Field Agent App erstellt werden, wenn eine Ticketzuweisung geschlossen wird. Wenn leer oder ungültig, verwendet die App einen internen Fallback.

Sie können für jede Sprache ein gesondertes HTML bereitstellen, welches als Template für den Arbeitsbericht dient.

Eine Vorlage für ein Template finden Sie unter: Das Template konfigurieren.

Sie können feste Werte oder Text vordefinieren, welche bei Verwendung angezeigt werden. Für variable Werte, welche zur Laufzeit durch reelle Werte ersetzt werden, muss der Platzhalter {{VALUE}} angegeben werden.

Der HTML-String muss JSON-Encodiert, d. h. maskiert, sein. Dabei können Ihnen diverse Online-Editoren wie bspw. https://jsonformatter.org/json-encode helfen.

{"HtmlTemplate":{
  "de":"JSON-Encodierter HTML-String",
  "en":"JSON-Encodierter HTML-String"
  }
}

KIXMobileApp::WorkReport::Internal::Default

Template und Inhalt interner Arbeitsberichte

Definiert die Struktur interner Arbeitsberichte, die von der KIX Field Agent App erstellt werden, wenn eine Ticketzuweisung geschlossen wird. Wenn leer oder ungültig, verwendet die App einen internen Fallback.

Sie können für jede Sprache ein gesondertes HTML bereitstellen, welches als Template für den Arbeitsbericht dient.

Eine Vorlage für ein Template finden Sie unter: Das Template konfigurieren.

Sie können feste Werte oder Text vordefinieren, welche bei Verwendung angezeigt werden. Für variable Werte, welche zur Laufzeit durch reelle Werte ersetzt werden, muss der Platzhalter {{VALUE}} angegeben werden.

Der HTML-String muss JSON-Encodiert, d. h. maskiert, sein. Dabei können Ihnen diverse Online-Editoren wie bspw. https://jsonformatter.org/json-encode helfen.

{"HtmlTemplate":{
  "de":"JSON-Encodierter HTML-String",
  "en":"JSON-Encodierter HTML-String"
  }
}

Das Template konfigurieren

  1. Öffnen Sie einen Text-Editor Ihrer Wahl (z. B. Notepad++)

  2. Kopieren Sie nachfolgenden Quellcode in den Text-Editor und speichern Sie ihn als .html-Datei.

    Der Quellcode enthält das HTML-Template für einen Arbeitsbericht.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Internal Work Report</title>
    <!--
    ════════════════════════════════════════════════════════════════════════════════
                        WORK REPORT TEMPLATE SYSTEM OVERVIEW
    ════════════════════════════════════════════════════════════════════════════════
    
    This HTML template generates work report HTML that is:
      • Displayed in a WebView for preview in the mobile app
      • Uploaded to the server as article body content
    
    The template supports dynamic content rendering based on data attributes that
    control visibility, filtering, and formatting.
    
    ────────────────────────────────────────────────────────────────────────────────
    HOW IT WORKS:
    ────────────────────────────────────────────────────────────────────────────────
      1. Template sections are marked with special 'type' attributes
      2. Each section has configuration via data-* attributes
      3. {{VALUE}} placeholders are replaced with actual data during rendering
      4. Sections can be filtered, shown/hidden, and styled based on config
      5. Final HTML is displayed in WebView and uploaded as article body
    
    ────────────────────────────────────────────────────────────────────────────────
    KEY CONCEPTS:
    ────────────────────────────────────────────────────────────────────────────────
      • type="SectionType": Identifies the section renderer to use
      • data-filter: Controls which items to include (internal/external/all)
      • data-show-when-empty: Whether to display empty sections
      • {{VALUE}}: Placeholder replaced with rendered content
    
    ────────────────────────────────────────────────────────────────────────────────
    SUPPORTED SECTION TYPES:
    ────────────────────────────────────────────────────────────────────────────────
      • TicketInfo: Basic ticket metadata (number, date, agent, closure code)
      • Notes: Ticket notes with attachments and visibility filtering
      • TimeEntries: Time tracking entries with duration calculations
      • DynamicFields: Custom fields defined per ticket
      • Checklists: Task lists with hierarchical structure
      • Signature: Digital signatures from agents and customers
    
    ────────────────────────────────────────────────────────────────────────────────
    CUSTOMIZATION:
    ────────────────────────────────────────────────────────────────────────────────
      Modify data-* attributes to change behavior without code changes.
      Each section has detailed documentation above it explaining options.
    
    ════════════════════════════════════════════════════════════════════════════════
    -->
    <style>
        body { 
            font-family: Arial, sans-serif; 
            margin: 20px; 
            line-height: 1.6;
            color: #333;
        }
        .header { 
            background-color: #f0f0f0; 
            padding: 15px; 
            margin-bottom: 20px; 
            border-radius: 5px;
        }
        .section { 
            margin-bottom: 45px; 
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
        }
        .section h2 {
            margin-top: 0;
            margin-bottom: 12px;
            color: #2c5aa0;
            border-bottom: 2px solid #2c5aa0;
            padding-bottom: 5px;
        }
        .empty-state {
            text-align: left;
            padding: 10px 0;
            color: #666;
            font-style: italic;
        }
        .notes-container, .time-container {
            background-color: #fafafa;
            padding: 10px;
            border-radius: 3px;
        }
        table {
            width: 100% !important;
            border-collapse: collapse;
            margin-top: 10px;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        /* Specific column widths for time entries */
        th.col-datetime, td.col-datetime { width: 1%; white-space: nowrap; }
        th.col-duration, td.col-duration { width: 1%; white-space: nowrap; }
        th.col-description, td.col-description { width: auto; }
        th.col-visibility, td.col-visibility { width: 1%; white-space: nowrap; text-align: center; }
        .signature-section {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 2px solid #ccc;
        }
        .signature-container {
            margin-top: 10px;
        }
        .signature-section img {
            max-width: 400px;
            max-height: 200px;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: block;
        }
        .signature-name {
            margin-top: 8px;
            font-weight: bold;
            font-size: 0.95em;
            color: #333;
            text-align: right;
            display: block;
            width: 100%;
        }
        .signature-attachment {
            margin-top: 10px;
        }
        .signature-attachment a {
            color: #2c5aa0;
            text-decoration: none;
            font-size: 0.95em;
        }
        .signature-attachment a:hover {
            text-decoration: underline;
        }
        .dynamic-field {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-left: 3px solid #2c5aa0;
        }
        .dynamic-field:first-of-type {
            margin-top: 10px;
        }
        .dynamic-field-name {
            font-weight: bold;
            color: #2c5aa0;
            margin: 0 0 8px 0;
            font-size: 1.1em;
        }
        .dynamic-field-value {
            display: block;
        }
        /* Multi-selection field indentation */
        .multi-selection-value {
            padding-left: 20px;
            margin: 4px 0;
        }
        .attachment-inline {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        .attachment-inline img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
        .attachment-list ul {
            list-style-type: none;
            padding: 0;
        }
        .attachment-list li {
            padding: 5px 0;
            border-bottom: 1px solid #eee;
        }
        .wrap-text {
            white-space: normal;
            word-wrap: break-word;
        }
        td.wrap-text {
            white-space: normal;
            word-wrap: break-word;
            line-height: 1.4;
            padding: 8px 6px;
        }
        /* Checklist styling */
        .checklist-item {
            margin: 8px 0;
            padding: 8px;
            border-left: 3px solid #ddd;
        }
        .checklist-item.completed { border-left-color: #28a745; }
        .checklist-item.incomplete { border-left-color: #dc3545; }
        .checklist-item-nested {
            margin-left: 20px;
            padding: 6px;
            border-left: 2px solid #ccc;
            margin-top: 6px;
        }
        .checklist-status { font-size: 1.1em; margin-right: 5px; }
        .checklist-status.ok { color: #28a745; }
        .checklist-status.nok { color: #dc3545; }
        .checklist-status.pending { color: #ffc107; }
        .checklist-status.na { color: #6c757d; }
        .checklist-description { 
            margin-top: 4px; 
            font-size: 0.9em; 
            color: #555; 
            font-style: italic; 
        }
        .checklist-input {
            margin-top: 4px;
            padding: 4px 8px;
            background-color: #f0f0f0;
            border-radius: 3px;
            font-family: monospace;
        }
    </style>
</head>
<body>
    <!-- ────────────────────────────────────────────────────────────────────────
         TICKET INFO HEADER
         ────────────────────────────────────────────────────────────────────────
         Configuration:
           - data-visible: Control individual field visibility
             Options: true|false
             • true: Field is displayed in the report
             • false: Field is hidden from the report
         
         Available Fields:
           - TicketNumber: The ticket ID from the system
           - ReportDate: Date when the work report was generated
           - AgentName: Name of the agent who performed the work
           - ClosureCode: Final status/closure code of the ticket
         ──────────────────────────────────────────────────────────────────── -->
    <div class="header">
        <h1>Internal Work Report</h1>
        <div id="TicketNumber" type="TicketInfo" data-visible="true">
            <strong>Ticket:</strong> {{VALUE}}
        </div>
        <div id="ReportDate" type="TicketInfo" data-visible="true">
            <strong>Date:</strong> {{VALUE}}
        </div>
        <div id="AgentName" type="TicketInfo" data-visible="true">
            <strong>Agent:</strong> {{VALUE}}
        </div>
        <div id="ClosureCode" type="TicketInfo" data-visible="true">
            <strong>Closure Code:</strong> {{VALUE}}
        </div>
    </div>
    
    <!-- ────────────────────────────────────────────────────────────────────────
         NOTES SECTION
         ────────────────────────────────────────────────────────────────────────
         Configuration:
           - data-filter: Which notes to display based on visibility
             Options: internal|external|all
             • internal: Only notes marked as internal (not visible to customer)
             • external: Only notes marked as external (visible to customer)
             • all: Display all notes regardless of visibility setting
         
           - data-attachments: How to display attached files in notes
             Options: inline|attachment-list
             • inline: Embed images directly in the document
             • attachment-list: Show attachments as downloadable file links
         
           - data-attachment-columns: Number of columns for inline image grid
             Options: 1|2|3|4
             Only applies when data-attachments="inline"
         
           - data-show-when-empty: Show section even when no notes exist
             Options: true|false
             • true: Section always shown with empty placeholder message
             • false: Section hidden when no matching notes exist
         ──────────────────────────────────────────────────────────────────── -->
    <div class="section" data-show-when-empty="true">
        <div id="Notes" type="Notes" data-filter="all" data-attachments="inline" data-attachment-columns="2">
            <h2>Notes</h2>
            {{VALUE}}
            <div id="Notes-empty" class="empty-state" style="display: none;">
                No notes were recorded for this report.
            </div>
        </div>
    </div>

    <!-- ────────────────────────────────────────────────────────────────────────
         TIME ENTRIES SECTION
         ────────────────────────────────────────────────────────────────────────
         Configuration:
           - data-filter: Which time entries to display based on visibility
             Options: internal|external|all
             • internal: Only time entries marked as internal (not billable/visible)
             • external: Only time entries marked as external (billable/visible)
             • all: Display all time entries regardless of visibility setting
         
           - data-total-row: Show total time calculation at bottom of table
             Options: enabled|disabled
             • enabled: Display sum of all time entries in footer row
             • disabled: No total row shown
         
           - data-show-when-empty: Show section even when no time entries exist
             Options: true|false
             • true: Section always shown with empty placeholder message
             • false: Section hidden when no matching time entries exist
         ──────────────────────────────────────────────────────────────────── -->
    <div class="section" data-show-when-empty="true">
        <div id="TimeEntries" type="TimeEntries" data-filter="internal" data-total-row="enabled">
            <h2>Time Summary</h2>
            <table>
                <thead>
                    <tr>
                        <!-- Column showing if time entry is externally visible (Ext.) -->
                        <th class="col-visibility">Ext.</th>
                        <th class="col-datetime">Date & Time</th>
                        <th class="col-duration">Duration</th>
                        <th class="col-description">Work Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td type="time-entry-visibility" class="col-visibility">{{VALUE}}</td>
                        <td type="time-entry-datetime" class="col-datetime">{{VALUE}}</td>
                        <td type="time-entry-duration" class="col-duration">{{VALUE}}</td>
                        <td type="time-entry-description" class="col-description wrap-text">{{VALUE}}</td>
                    </tr>
                </tbody>
                <!-- Total row appears when data-total-row="enabled" -->
                <tfoot id="TimeTotal" type="TimeTotal" data-filter="internal">
                    <tr style="font-weight: bold; background-color: #f0f0f0;">
                        <td colspan="2">Total</td>
                        <td type="time-total-duration">{{VALUE}}</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
            <div id="TimeEntries-empty" class="empty-state" style="display: none;">
                No time entries recorded for this report.
            </div>
        </div>
    </div>

    <!-- ────────────────────────────────────────────────────────────────────────
         DYNAMIC FIELDS SECTION
         ────────────────────────────────────────────────────────────────────────
         Configuration:
           - data-allowed-fields: Comma-separated list of field names to include
             Only fields listed here will be displayed in this report
             Example: "FAAAttachment01,FATextField,FADateField"
         
           - data-selection-display: How to handle selection/multi-selection fields
             Options: all|selected
             • all: Show all possible options with indication of selected ones
             • selected: Show only the selected options
         
           - data-show-when-empty: Show section even when no fields exist
             Options: true|false
             • true: Section always shown with empty placeholder message
             • false: Section hidden when no dynamic fields exist
         ──────────────────────────────────────────────────────────────────── -->
    <div class="section" data-show-when-empty="true" data-allowed-fields="FAAAttachment01,FAAAttachment02,FAAAttachment03,FAAAttachment04,FADateField,FADateTimeFieldA,FADateTimeFieldB,FAMultiSelectionField,FASingleSelectionField,FATextField,FATextAreaField,FATableField">
        <div id="DynamicFields-container" type="DynamicFields" data-selection-display="all">
            <h2>Dynamic Fields</h2>
            {{VALUE}}
            <div id="DynamicFields-empty" class="empty-state" style="display: none;">
                No dynamic fields recorded for this report.
            </div>
        </div>
    </div>

    <!-- ────────────────────────────────────────────────────────────────────────
         CHECKLISTS SECTION
         ────────────────────────────────────────────────────────────────────────
         Configuration:
           - data-show-when-empty: Show section even when no checklists exist
             Options: true|false
             • true: Section always shown with empty placeholder message
             • false: Section hidden when no checklists exist
         
         Note: Checklists automatically render with hierarchical structure
               Status indicators: ✓ (OK), ✗ (NOK), ⊘ (N/A), ○ (Pending)
         ──────────────────────────────────────────────────────────────────── -->
    <div class="section" data-show-when-empty="true">
        <div id="Checklists-container" type="Checklists">
            <h2>Checklists</h2>
            {{VALUE}}
            <div id="Checklists-empty" class="empty-state" style="display: none;">
                No checklists recorded for this report.
            </div>
        </div>
    </div>

    <!-- ────────────────────────────────────────────────────────────────────────
         SIGNATURES SECTION
         ────────────────────────────────────────────────────────────────────────
         Configuration:
           - data-agent-signature: Requirement level for agent signature
             Options: required|optional|none
             • required: Agent must provide signature to complete work report
             • optional: Agent can choose to provide signature
             • none: Agent signature is not available/displayed
         
           - data-customer-signature: Requirement level for customer signature
             Options: required|optional|none
             • required: Customer must provide signature to complete work report
             • optional: Customer can choose to provide signature
             • none: Customer signature is not available/displayed
         
         Individual Signature Sections:
           - data-inline-signature: Display signature embedded in HTML document
             Options: true|false
             • true: Signature PNG embedded as base64 image in HTML (<img> tag)
             • false: Signature omitted from HTML, added as separate PNG attachment
         
           - data-show-when-empty: Show section even when no signature available
             Options: true|false
             • true: Section always shown (with empty placeholder if no signature)
             • false: Section hidden when no signature exists
         
         Note: Signatures are always stored as PNG images. The data-inline-signature
               attribute controls whether they are embedded in the HTML (as base64)
               or attached separately to the article.
         ──────────────────────────────────────────────────────────────────── -->
    <div id="signature" data-agent-signature="optional" data-customer-signature="none">
        <!-- Customer Signature Section -->
        <div class="section signature-section" data-show-when-empty="false">
            <h2>Customer Signature</h2>
            <!-- Embed signature PNG as base64 in HTML (true) or add as separate PNG attachment (false) -->
            <div id="CustomerSignature" type="Signature" data-inline-signature="true">
                {{VALUE}}
            </div>
        </div>

        <!-- Agent Signature Section -->
        <div class="section signature-section" data-show-when-empty="false">
            <h2>Agent Signature</h2>
            <!-- Embed signature PNG as base64 in HTML (true) or add as separate PNG attachment (false) -->
            <div id="AgentSignature" type="Signature" data-inline-signature="true">
                {{VALUE}}
            </div>
        </div>
    </div>
</body>
</html>

  3. Passen Sie das Template an nach Bedarf an, indem Sie den Quellcode bearbeiten.

    Beachten Sie die Notizen und Hinweise im Quellcode!

    Sie können feste Werte oder Text vordefinieren, welche bei Verwendung angezeigt werden.

    Für variable Werte, welche zur Laufzeit durch reelle Werte ersetzt werden, muss der Platzhalter {{VALUE}} angegeben werden.

  4. Optional: Speichern Sie gelegentlich Ihre Änderungen und sehen Sie sich zwischendurch das Ergebnis Ihrer Änderungen an. Öffnen Sie dazu die .html-Datei in einem separaten Browserfenster oder -tab.

  5. Bereinigen Sie den HTML-Code des Templates und entfernen Sie die Kommentare.

  6. Encodieren Sie das HTML zu JSON, damit Sonderzeichen maskiert werden.

    Sie können dazu einen Online-Editor wie https://jsonformatter.org/json-encode verwenden.

  7. Navigieren Sie im Admin Modul von KIX zu System → SysConfig.

  8. Öffnen Sie den Konfigurationsschlüssel KIXMobileApp::WorkReport::Internal::Default bzw. KIXMobileApp::WorkReport::Externalnternal::Default.

  9. Ersetzen Sie den Wert null durch den encodierten HTML-String.

    Sie können für jede Sprache einen separaten String hinterlegen.

    Konfiguration des Templates für Arbeitsberichte

  10. Speichern Sie abschließend Ihre Änderungen mit Klick auf Speichern.

  11. Klicken Sie auf Lade Frontend-Konfigurationen neu, um die Ansicht im Frontend zu aktualisieren.

Das Template ist nun angepasst und wird in der Field Agent App zur Erstellung der Arbeitsberichte verwendet.

Beispiel eines Templates für einen Arbeitsbericht und nebenstehend das verwendete Template in der Field Agent App
In diesem Abschnitt: