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