Przewodnik po Flowee - jak budować aplikacje procesowe przy użyciu Flowee Help

Spis definicji formularzy

Formularz do komunikacji

{ "display": "form", "components": [ { "label": "css global override", "attrs": [ { "attr": "", "value": "" } ], "content": "<div></div>\n<style>\n html {\n --formio-data-grid-table-td-border: none !important;\n --formio-panel-card-body-padding: none !important;\n --formio-data-grid-table-table-bordered-td-padding: none !important;\n }\n \n .formio-component-messagesView table {\n display: flex;\n flex-direction: column-reverse;\n max-height: 30rem !important;\n overflow-x: auto !important;\n }\n \n .formio-component-messagesView tbody {\n display: flex;\n flex-direction: column;\n }\n \n .formio-component-messagesView tr {\n display: flex;\n }\n \n .formio-component-messagesView td {\n width: 100%;\n }\n \n .mb-2.card.border {\n margin-bottom: 0 !important;\n }\n</style>", "refreshOnChange": false, "key": "html", "type": "htmlelement", "input": false, "tableView": false }, { "label": "formData", "tableView": false, "key": "formData", "type": "container", "input": true, "components": [ { "label": "private", "tableView": false, "key": "private", "type": "container", "input": true, "components": [ { "label": "communication", "tableView": false, "key": "communication", "type": "container", "input": true, "components": [ { "title": "Wiadomości", "collapsible": false, "hideLabel": true, "key": "wiadomosci", "type": "panel", "label": "Panel", "input": false, "tableView": false, "components": [ { "label": "Wiadomości", "disableAddingRemovingRows": true, "reorder": false, "addAnotherPosition": "bottom", "layoutFixed": false, "enableRowGroups": false, "initEmpty": false, "hideLabel": true, "disabled": true, "tableView": false, "defaultValue": [ { "textField": "" } ], "persistent": false, "calculateValue": "if (!initData.communication) {\n return;\n}\n\nconst messagesFlowee = initData.communication.flowee.messages;\nconst messagesPortal = initData.communication.portal.messages;\nconst messagesSystem = initData.communication.system.messages;\n\nconst mergedMessages = [\n ...messagesFlowee,\n ...messagesPortal,\n ...messagesSystem\n].sort((a, b) => new Date(a.creationTime) - new Date(b.creationTime))\n\nlet clientName = '';\nlet clientStartName = '';\n\nif (data.formData.public && data.formData.public.client) {\n clientName = data.formData.public.client.name;\n \n if (data.formData.public.client.startData) {\n clientStartName = data.formData.public.client.startData.name\n }\n}\n\nvalue = mergedMessages.map(\n message => {\n const getSender = (system, username) => {\n switch (system) {\n case 'flowee': return username\n case 'portal': return clientName || clientStartName || 'Klient'\n case 'system': return 'Wiadomość systemowa'\n default: 'Nieznany'\n }\n }\n\n let creationTime = '';\n const senderLabel = getSender(message.system, message.sender);\n\n if (message.creationTime) {\n creationTime = moment(message.creationTime)\n .local()\n .format('DD.MM.YYYY, HH:mm')\n }\n\n let contentHeader = senderLabel;\n\n if (creationTime) {\n contentHeader = senderLabel + ', ' + creationTime;\n }\n\n return {\n creationTime,\n sender: message.system,\n senderLabel,\n content: message.content,\n contentHeader\n }\n }\n);\n", "validateWhenHidden": false, "key": "messagesView", "type": "datagrid", "input": true, "components": [ { "collapsible": false, "hideLabel": true, "key": "panel", "type": "panel", "label": "Panel", "input": false, "tableView": false, "components": [ { "label": "HTML", "attrs": [ { "attr": "", "value": "" } ], "content": " <div class=\"message-container\">\n <span class=\"message-header message-header-{{ row.sender }}\">{{ row.contentHeader }}</span>\n <span class=\"message-entity message-{{ row.sender }}\">{{ row.content }}</span>\n</div>\n\n<style>\n .message-container {\n display: flex;\n flex-direction: column;\n }\n\n .message-entity {\n padding: 1rem;\n border-radius: 0.5rem;\n max-width: 80%;\n width: fit-content;\n white-space: pre-line;\n }\n\n .message-portal {\n background: #E8E8E8;\n margin-right: auto;\n }\n\n .message-flowee {\n background: #DEF0D7;\n margin-left: auto;\n }\n\n .message-system {\n background: #FFFFFF;\n border: 1px solid #00B140;\n margin-right: auto;\n margin-left: auto;\n }\n\n .message-header {\n font-size: 0.875rem;\n font-weight: 400;\n color: #93959A;\n }\n \n .message-header-portal {\n margin-right: auto;\n }\n\n .message-header-system {\n margin-right: auto;\n margin-left: auto;\n }\n\n .message-header-flowee {\n margin-left: auto;\n }\n</style>", "refreshOnChange": true, "key": "html", "type": "htmlelement", "input": false, "tableView": false } ] } ] }, { "label": "Nowa wiadomość", "applyMaskOn": "change", "autoExpand": false, "customClass": "mt-auto", "autofocus": true, "tableView": true, "validateWhenHidden": false, "key": "newMessage", "type": "textarea", "input": true }, { "label": "new message object", "calculateValue": "value = {\n content: data.formData.private.communication.newMessage,\n sender: `${userInfo.name} ${userInfo.surname}`,\n}", "key": "newMessageObject", "type": "hidden", "input": true, "tableView": false } ] } ] } ] } ] } ] }

Formularz startowy z polami Nazwa Klienta, Nip, Regon

{ "display": "form", "components": [ { "label": "formData", "tableView": false, "validateWhenHidden": false, "key": "formData", "type": "container", "input": true, "components": [ { "label": "public", "tableView": false, "key": "public", "type": "container", "input": true, "components": [ { "title": "Dane Klienta", "customClass": "main-panel", "collapsible": false, "key": "daneKlienta", "type": "panel", "label": "Panel", "input": false, "tableView": false, "components": [ { "customClass": "main-section", "collapsible": false, "hideLabel": true, "key": "panel", "type": "panel", "label": "Panel", "input": false, "tableView": false, "components": [ { "label": "Nazwa Klienta", "applyMaskOn": "change", "tableView": true, "validate": { "required": true, "minLength": 2, "maxLength": 200 }, "validateWhenHidden": false, "key": "nazwaKlienta", "type": "textfield", "input": true }, { "label": "NIP", "displayMask": "999-999-99-99", "applyMaskOn": "change", "tableView": true, "validateOn": "blur", "validate": { "required": true, "customMessage": "NIP nieprawidłowy", "json": { "if": [ { "validateNip": { "var": "input" } }, true, "Błędny NIP" ] } }, "errors": { "pattern": "Niepoprawny format" }, "key": "nip", "type": "textfield", "input": true }, { "label": "REGON", "applyMaskOn": "change", "tableView": true, "validateOn": "blur", "validate": { "required": true, "customMessage": "REGON nieprawidłowy", "json": { "if": [ { "validateRegon": { "var": "input" } }, true, "Błędny REGON" ] } }, "errors": { "pattern": "Niepoprawny format" }, "key": "regon", "type": "textfield", "input": true } ] } ] } ] } ] } ] }

Formularz startowy bez inputów do uzupełnienia

{ { "display": "form", "components": [ { "html": "<p style=\"text-align:center;\"><strong>Kontynuuj w celu utworzenia procesu…...</strong></p>", "label": "Content", "refreshOnChange": false, "key": "content", "type": "content", "input": false, "tableView": false } ] }
09 lutego 2026