This is the most basic part. It defines the app's name and the icon that will be displayed in the header.

const pwaConfig = {
    // 1. Allgemeine App-Informationen
    appName: 'INtex Auftrag Aufgaben',
    appIcon: 'fa-list-check',
    // ...
};

This section tells the app where to find its data.

api: {
    endpoint: '../pwa/pwa_v2.php',
    table: 'aufgaben',
    clientSideFilter: (item) => item.bearbeitungsstatus !== '3 - Erledigt',
},

• endpoint: The path to the backend PHP script. This is usually the same for all apps.
• table: The logical name of the database table you want to work with (e.g., 'aufgaben', 'fahrten'). The backend resolves this to the physical table name.
• clientSideFilter: A powerful feature. This is a JavaScript function that filters the data *after* it has been received from the server. In this example, it ensures that tasks marked as "Erledigt" (Done) are immediately hidden from the list, providing a snappy user experience.

The list object configures the main screen of your app, where all the data records are displayed.

list: {
    searchableFields: ['titel', 'notiztext'],
    filterFields: ['adresse_text', 'projekt_text', 'bearbeitungsstatus'],
    sortOptions: [
        { key: 'prioritaet', label: 'Nach Priorität', icon: 'fa-arrow-down-wide-short', direction: 'DESC' },
        // ... more sort options
    ],
    itemTemplate: (item) => {
        // ... HTML and JavaScript logic ...
        return `<div class="card" data-id="${item.id}"> ... </div>`;
    }
},

• searchableFields: An array of field names that the top search bar will query.
• filterFields: An array of field names used to populate the filter modal. The engine automatically finds all unique values for these fields from the loaded data and presents them as filter options.
• sortOptions: Defines the sort buttons. Each object creates a button with a label, icon, and specifies the database field (key) and direction for sorting.
• itemTemplate: This is a JavaScript function that returns an HTML string for a single list item. It receives the full item object from the API, allowing you to build complex and dynamic list entries. Notice the use of resolved lookup fields like item.projekt_text and helper functions like formatDate(). The onclick="app.showEditItemModal(${item.id})" is crucial for enabling editing.

The actions object allows you to define custom client-side and server-side logic that can be triggered by UI events, like a swipe or a checkbox.

actions: {
    swipe: {
        enabled: true,
        actionName: 'toggleStatus',
        confirmation: { /* ... */ }
    },
    toggleStatus: {
        execute: (item, context) => {
            const newStatus = context.isChecked ? '3 - Erledigt' : '1 - Neu';
            const payload = { bearbeitungsstatus: newStatus };
            // ... custom logic for recurring tasks ...
            return payload;
        }
    }
},

• swipe: Configures the right-swipe gesture on a list item. It's enabled and linked to the 'toggleStatus' action.
• toggleStatus: Defines the action itself. The execute function is the core of the logic. It receives the data item and a context object (e.g., containing isChecked). It must return a payload object, which the engine then sends to the API to update the database record. This example even includes complex business logic for handling recurring tasks.

The forms object defines the structure of the modals for creating (add) and modifying (edit) records.

forms: {
    add: {
        title: 'Neue Aufgabe',
        fields: [
            { name: 'titel', label: 'Titel', type: 'text', required: true },
            { name: 'frist', label: 'Frist', type: 'date' },
            { 
                name: 'projekt', 
                label: 'Projekt', 
                type: 'select',
                optionsSource: { 
                    type: 'table', 
                    table: 'projekte', 
                    valueField: 'id', 
                    labelField: 'projektbezeichnung' 
                }
            },
            { name: 'notiztext', label: 'Notiz', type: 'editor', config: 'light' }
        ],
        defaultValues: { 'bearbeitungsstatus': '1 - Neu' }
    },
    edit: {
        title: 'Aufgabe bearbeiten',
        readOnlyCondition: (item) => item.revisionssicher == 1,
        infoBlocks: { /* ... */ }
        // ... fields ...
    }
},

• fields: An array of objects, where each object defines a form field. Key properties include:
  • name: The database column name.
  • label: The user-visible label.
  • type: The input type, e.g., text, date, number, range, select, or the custom editor.
  • optionsSource: For select fields, this defines where the options come from. It can be a valuelist or another table.
• defaultValues: An object for setting values on new records that are not present as form fields (e.g., setting an initial status).
• readOnlyCondition: In the edit form, this function determines if the form should be non-editable. It receives the item and returns true to lock the form.
• infoBlocks: In the edit form, this allows you to display non-editable blocks of information, like the linked address in the example.