@5minds/node-red-dashboard-2-processcube-dynamic-form 2.0.8 → 2.1.0-develop-9ef07a-mdiwhikf

package/ui/components/UIDynamicForm.vue

@@ -15,13 +15,23 @@
                         :collapsed="collapsed" :toggleCollapse="toggleCollapse" />
                     <Transition name="cardCollapse">
                         <div v-if="!collapsed">
-                            <div className="ui-dynamic-form-formfield-positioner" :style="props.inner_card_styling">
+                            <div className="ui-dynamic-form-formfield-positioner" :style="props.inner_card_styling"
+                                :data-columns="props.form_columns || 1">
                                 <FormKit id="form" type="group">
                                     <v-row v-for="(field, index) in fields()" :key="field"
+                                        :class="field.type === 'header' ? 'ui-dynamic-form-header-row' : ''"
                                         :style="getRowWidthStyling(field, index)">
                                         <v-col cols="12">
                                             <component :is="createComponent(field).type"
-                                                v-if="createComponent(field).innerText"
+                                                v-if="createComponent(field).innerHTML"
+                                                v-bind="createComponent(field).props"
+                                                :class="createComponent(field).class"
+                                                v-html="createComponent(field).innerHTML" :ref="(el) => {
+                                                    if (index === 0) firstFormFieldRef = el;
+                                                }
+                                                    " />
+                                            <component :is="createComponent(field).type"
+                                                v-else-if="createComponent(field).innerText"
                                                 v-bind="createComponent(field).props" :ref="(el) => {
                                                     if (index === 0) firstFormFieldRef = el;
                                                 }
@@ -72,29 +82,60 @@
     </div>
 </template>
 
-<!-- eslint-disable no-case-declarations -->
 <script>
-import { de } from '@formkit/i18n'
-import { FormKit, defaultConfig, plugin } from '@formkit/vue'
-import { getCurrentInstance, markRaw, nextTick } from 'vue'
+import { de } from '@formkit/i18n';
+import { FormKit, defaultConfig, plugin } from '@formkit/vue';
+import { getCurrentInstance, markRaw, nextTick } from 'vue';
+import { marked } from 'marked';
+import DOMPurify from 'dompurify';
 
-// eslint-disable-next-line import/no-unresolved
-import '@formkit/themes/genesis'
-import UIDynamicFormFooterAction from './FooterActions.vue'
-import UIDynamicFormTitleText from './TitleText.vue'
+import '@formkit/themes/genesis';
+import UIDynamicFormFooterAction from './FooterActions.vue';
+import UIDynamicFormTitleText from './TitleText.vue';
 
-// eslint-disable-next-line no-unused-vars
 function requiredIf({ value }, [targetField, expectedValue], node) {
-    console.debug(arguments)
+    console.debug(arguments);
 
-    const actual = node?.root?.value?.[targetField]
-    const isEmpty = value === '' || value === null || value === undefined
+    const actual = node?.root?.value?.[targetField];
+    const isEmpty = value === '' || value === null || value === undefined;
 
     if (actual === expectedValue && isEmpty) {
-        return false // oder: `return "Dieses Feld ist erforderlich."`
+        return false;
     }
 
-    return true
+    return true;
+}
+
+class MarkdownRenderer extends marked.Renderer {
+    link(params) {
+        const link = super.link(params);
+        return link.replace('<a', "<a target='_blank'");
+    }
+
+    html(params) {
+        const result = super.html(params);
+        if (result.startsWith('<a ') && !result.includes('target=')) {
+            return result.replace('<a ', `<a target="_blank" `);
+        }
+        return result;
+    }
+}
+
+class MarkedHooks extends marked.Hooks {
+    postprocess(html) {
+        return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
+    }
+}
+
+function processMarkdown(content) {
+    if (!content) return '';
+
+    const html = marked.parse(content.toString(), {
+        renderer: new MarkdownRenderer(),
+        hooks: new MarkedHooks(),
+    });
+
+    return html;
 }
 
 export default {
@@ -102,7 +143,7 @@ export default {
     components: {
         FormKit,
         UIDynamicFormFooterAction,
-        UIDynamicFormTitleText
+        UIDynamicFormTitleText,
     },
     inject: ['$socket'],
     props: {
@@ -111,24 +152,24 @@ export default {
         props: { type: Object, default: () => ({}) },
         state: {
             type: Object,
-            default: () => ({ enabled: false, visible: false })
-        }
+            default: () => ({ enabled: false, visible: false }),
+        },
     },
     setup(props) {
-        console.info('UIDynamicForm setup with:', props)
-        console.debug('Vue function loaded correctly', markRaw)
+        console.info('UIDynamicForm setup with:', props);
+        console.debug('Vue function loaded correctly', markRaw);
 
-        const instance = getCurrentInstance()
-        const app = instance.appContext.app
+        const instance = getCurrentInstance();
+        const app = instance.appContext.app;
 
         const formkitConfig = defaultConfig({
             theme: 'genesis',
             locales: { de },
             locale: 'de',
             // eslint-disable-next-line object-shorthand
-            rules: { requiredIf: requiredIf }
-        })
-        app.use(plugin, formkitConfig)
+            rules: { requiredIf: requiredIf },
+        });
+        app.use(plugin, formkitConfig);
     },
     data() {
         return {
@@ -140,120 +181,121 @@ export default {
             formIsFinished: false,
             msg: null,
             collapsed: false,
-            firstFormFieldRef: null
-        }
+            firstFormFieldRef: null,
+        };
     },
     computed: {
         dynamicClass() {
-            return `ui-dynamic-form-${this.theme} ui-dynamic-form-common`
+            return `ui-dynamic-form-${this.theme} ui-dynamic-form-common`;
         },
         dynamicFooterClass() {
-            return `ui-dynamic-form-footer-${this.theme} ui-dynamic-form-footer-common`
+            return `ui-dynamic-form-footer-${this.theme} ui-dynamic-form-footer-common`;
         },
         hasUserTask() {
-            return !!this.userTask
+            return !!this.userTask;
         },
         totalOutputs() {
             return (
                 this.props.options.length +
                 (this.props.handle_confirmation_dialogs ? 2 : 0) +
                 (this.props.trigger_on_change ? 1 : 0)
-            )
+            );
         },
         isConfirmDialog() {
-            return this.userTask.userTaskConfig.formFields.some((field) => field.type === 'confirm')
+            return this.userTask.userTaskConfig.formFields.some((field) => field.type === 'confirm');
         },
         effectiveTitle() {
             if (this.props.title_text_type === 'str') {
-                return this.props.title_text
+                return this.props.title_text;
             } else if (this.props.title_text_type === 'msg') {
-                return this.msg.dynamicTitle
+                return this.msg.dynamicTitle;
             } else {
-                return ''
+                return '';
             }
-        }
+        },
     },
     watch: {
         formData: {
             handler(newData, oldData) {
                 if (this.props.trigger_on_change) {
-                    const res = { payload: { formData: newData, userTask: this.userTask } }
-                    this.send(res, this.totalOutputs - 1)
+                    const res = { payload: { formData: newData, userTask: this.userTask } };
+                    this.send(res, this.totalOutputs - 1);
                 }
             },
             collapsed(newVal) {
                 if (!newVal && this.hasUserTask) {
                     nextTick(() => {
-                        this.focusFirstFormField()
-                    })
+                        this.focusFirstFormField();
+                    });
                 }
             },
             userTask(newVal) {
                 if (newVal && !this.collapsed) {
                     nextTick(() => {
-                        this.focusFirstFormField()
-                    })
+                        this.focusFirstFormField();
+                    });
                 }
             },
-            deep: true
-        }
+            deep: true,
+        },
     },
     created() {
-        const currentPath = window.location.pathname
-        const lastPart = currentPath.substring(currentPath.lastIndexOf('/'))
+        const currentPath = window.location.pathname;
+        const lastPart = currentPath.substring(currentPath.lastIndexOf('/'));
 
-        const store = this.$store.state
+        const store = this.$store.state;
 
         for (const key in store.ui.pages) {
             if (store.ui.pages[key].path === lastPart) {
-                const theme = store.ui.pages[key].theme
+                const theme = store.ui.pages[key].theme;
                 if (store.ui.themes[theme].name === 'ProcessCube Lightmode') {
-                    this.theme = 'light'
+                    this.theme = 'light';
                 } else if (store.ui.themes[theme].name === 'ProcessCube Darkmode') {
-                    this.theme = 'dark'
+                    this.theme = 'dark';
                 } else {
-                    this.theme = 'default'
+                    this.theme = 'default';
                 }
-                break
+                break;
             }
         }
     },
     mounted() {
-        const elements = document.querySelectorAll('.formkit-input')
+        const elements = document.querySelectorAll('.formkit-input');
 
         elements.forEach((element) => {
-            element.classList.add('test')
-        })
+            element.classList.add('test');
+        });
 
         this.$socket.on('widget-load:' + this.id, (msg) => {
-            this.init(msg)
-        })
+            this.init(msg);
+        });
         this.$socket.on('msg-input:' + this.id, (msg) => {
             // store the latest message in our client-side vuex store when we receive a new message
-            this.init(msg)
-        })
+            this.init(msg);
+        });
         // tell Node-RED that we're loading a new instance of this widget
-        this.$socket.emit('widget-load', this.id)
+        this.$socket.emit('widget-load', this.id);
     },
     unmounted() {
         /* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */
-        this.$socket?.off('widget-load' + this.id)
-        this.$socket?.off('msg-input:' + this.id)
+        this.$socket?.off('widget-load' + this.id);
+        this.$socket?.off('msg-input:' + this.id);
     },
     methods: {
         createComponent(field) {
-            const customForm = field.customForm ? JSON.parse(field.customForm) : {}
-            const hint = customForm.hint
-            const placeholder = customForm.placeholder
-            const validation = customForm.validation
-            const name = field.id
-            const customProperties = customForm.customProperties ?? []
+            console.debug('Creating component for field:', field);
+            const customForm = field.customForm ? JSON.parse(field.customForm) : {};
+            const hint = customForm.hint;
+            const placeholder = customForm.placeholder;
+            const validation = customForm.validation;
+            const name = field.id;
+            const customProperties = customForm.customProperties ?? [];
             const isReadOnly =
                 this.props.readonly ||
                     this.formIsFinished ||
                     customProperties.find((entry) => ['readOnly', 'readonly'].includes(entry.name) && entry.value === 'true')
                     ? 'true'
-                    : undefined
+                    : undefined;
             switch (field.type) {
                 case 'long':
                     return {
@@ -274,11 +316,11 @@ export default {
                             inputClass: `input-${this.theme}`,
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'number':
-                    const step = field.customForm ? JSON.parse(field.customForm).step : undefined
+                    const step = field.customForm ? JSON.parse(field.customForm).step : undefined;
                     return {
                         type: 'FormKit',
                         props: {
@@ -297,9 +339,9 @@ export default {
                             inputClass: `input-${this.theme}`,
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'date':
                     return {
                         type: 'FormKit',
@@ -317,13 +359,13 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'enum':
                     const enums = field.enumValues.map((obj) => {
-                        return { value: obj.id, label: obj.name }
-                    })
+                        return { value: obj.id, label: obj.name };
+                    });
                     return {
                         type: 'FormKit',
                         props: {
@@ -342,13 +384,13 @@ export default {
                             readonly: isReadOnly,
                             disabled: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'select':
                     const selections = JSON.parse(field.customForm).entries.map((obj) => {
-                        return { value: obj.key, label: obj.value }
-                    })
+                        return { value: obj.key, label: obj.value };
+                    });
                     return {
                         type: 'FormKit',
                         props: {
@@ -368,9 +410,9 @@ export default {
                             readonly: isReadOnly,
                             disabled: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'string':
                     return {
                         type: 'FormKit',
@@ -389,14 +431,14 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'confirm':
                     return {
                         type: 'h3',
-                        innerText: field.label
-                    }
+                        innerText: field.label,
+                    };
                 case 'boolean':
                     return {
                         type: 'FormKit',
@@ -414,11 +456,11 @@ export default {
                             readonly: isReadOnly,
                             disabled: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'file':
-                    const multiple = field.customForm ? JSON.parse(field.customForm).multiple === 'true' : false
+                    const multiple = field.customForm ? JSON.parse(field.customForm).multiple === 'true' : false;
                     return {
                         type: 'FormKit',
                         props: {
@@ -438,13 +480,13 @@ export default {
                             disabled: isReadOnly,
                             multiple,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'checkbox':
                     const options = JSON.parse(field.customForm).entries.map((obj) => {
-                        return { value: obj.key, label: obj.value }
-                    })
+                        return { value: obj.key, label: obj.value };
+                    });
                     return {
                         type: 'FormKit',
                         props: {
@@ -463,9 +505,9 @@ export default {
                             readonly: isReadOnly,
                             disabled: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'color':
                     return {
                         type: 'FormKit',
@@ -480,9 +522,9 @@ export default {
                             readonly: isReadOnly,
                             disabled: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'datetime-local':
                     return {
                         type: 'FormKit',
@@ -500,9 +542,9 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'email':
                     return {
                         type: 'FormKit',
@@ -521,29 +563,29 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'header':
-                    let typeToUse = 'h1'
+                    let typeToUse = 'h1';
                     if (field.customForm && JSON.parse(field.customForm).style === 'heading_2') {
-                        typeToUse = 'h2'
+                        typeToUse = 'h2';
                     }
                     if (field.customForm && JSON.parse(field.customForm).style === 'heading_3') {
-                        typeToUse = 'h3'
+                        typeToUse = 'h3';
                     }
                     return {
                         type: typeToUse,
-                        innerText: this.formData[field.id]
-                    }
+                        innerText: this.formData[field.id],
+                    };
                 case 'hidden':
                     return {
                         type: 'input',
                         props: {
                             type: 'hidden',
-                            value: this.formData[field.id]
-                        }
-                    }
+                            value: this.formData[field.id],
+                        },
+                    };
                 case 'month':
                     return {
                         type: 'FormKit',
@@ -561,14 +603,17 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'paragraph':
+                    const paragraphContent = this.formData[field.id] || field.defaultValue || field.label || '';
+                    const processedHtml = processMarkdown(paragraphContent);
                     return {
-                        type: 'p',
-                        innerText: this.formData[field.id]
-                    }
+                        type: 'div',
+                        innerHTML: processedHtml,
+                        class: 'ui-dynamic-form-paragraph',
+                    };
                 case 'password':
                     return {
                         type: 'FormKit',
@@ -587,13 +632,13 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'radio':
                     const radioOptions = JSON.parse(field.customForm).entries.map((obj) => {
-                        return { value: obj.key, label: obj.value }
-                    })
+                        return { value: obj.key, label: obj.value };
+                    });
                     return {
                         type: 'FormKit',
                         props: {
@@ -612,11 +657,11 @@ export default {
                             readonly: isReadOnly,
                             disabled: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'range':
-                    const customForm = JSON.parse(field.customForm)
+                    const customForm = JSON.parse(field.customForm);
                     return {
                         type: 'v-slider',
                         props: {
@@ -637,9 +682,9 @@ export default {
                             readonly: isReadOnly,
                             disabled: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'tel':
                     return {
                         type: 'FormKit',
@@ -658,11 +703,11 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'textarea':
-                    const rows = field.customForm ? JSON.parse(field.customForm).rows : undefined
+                    const rows = field.customForm ? JSON.parse(field.customForm).rows : undefined;
                     return {
                         type: 'FormKit',
                         props: {
@@ -681,9 +726,9 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'time':
                     return {
                         type: 'FormKit',
@@ -702,9 +747,9 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'url':
                     return {
                         type: 'FormKit',
@@ -723,9 +768,9 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 case 'week':
                     return {
                         type: 'FormKit',
@@ -744,9 +789,9 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
                 default:
                     return {
                         type: 'FormKit',
@@ -763,223 +808,223 @@ export default {
                             innerClass: `ui-dynamic-form-input-outlines ${this.theme === 'dark' ? '$remove:formkit-inner' : ''}`,
                             readonly: isReadOnly,
                             validation,
-                            validationVisibility: 'live'
-                        }
-                    }
+                            validationVisibility: 'live',
+                        },
+                    };
             }
         },
         toggleCollapse() {
-            this.collapsed = !this.collapsed
+            this.collapsed = !this.collapsed;
         },
         getRowWidthStyling(field, index) {
-            let style = ''
+            let style = '';
             if (index === 0) {
-                style += 'margin-top: 12px;'
+                style += 'margin-top: 12px;';
             }
             if (field.type === 'header') {
-                style += 'flex-basis: 100%;'
+                style += 'flex-basis: 100%;';
             } else {
-                style += `flex-basis: ${(1 / this.props.form_columns) * 100}%;`
+                style += `flex-basis: 100%;`;
             }
-            return style
+            return style;
         },
         fields() {
-            const aFields = this.userTask.userTaskConfig?.formFields ?? []
+            const aFields = this.userTask.userTaskConfig?.formFields ?? [];
             const fieldMap = aFields.map((field) => ({
                 ...field,
-                items: mapItems(field.type, field)
-            }))
+                items: mapItems(field.type, field),
+            }));
 
-            return fieldMap
+            return fieldMap;
         },
         /*
-                    widget-action just sends a msg to Node-RED, it does not store the msg state server-side
-                    alternatively, you can use widget-change, which will also store the msg in the Node's datastore
-                */
+                            widget-action just sends a msg to Node-RED, it does not store the msg state server-side
+                            alternatively, you can use widget-change, which will also store the msg in the Node's datastore
+                        */
         send(msg, index) {
-            const msgArr = []
-            msgArr[index] = msg
-            this.$socket.emit('widget-action', this.id, msgArr)
+            const msgArr = [];
+            msgArr[index] = msg;
+            this.$socket.emit('widget-action', this.id, msgArr);
         },
         init(msg) {
-            this.msg = msg
+            this.msg = msg;
             if (!msg) {
-                return
+                return;
             }
 
-            this.actions = this.props.options
+            this.actions = this.props.options;
 
-            const hasTask = msg.payload && msg.payload.userTask
+            const hasTask = msg.payload && msg.payload.userTask;
 
             if (hasTask) {
-                this.userTask = msg.payload.userTask
+                this.userTask = msg.payload.userTask;
             } else {
-                this.userTask = null
-                this.formData = {}
-                return
+                this.userTask = null;
+                this.formData = {};
+                return;
             }
 
-            const formFields = this.userTask.userTaskConfig.formFields
-            const formFieldIds = formFields.map((ff) => ff.id)
-            const initialValues = this.userTask.startToken
-            const finishedFormData = msg.payload.formData
-            this.formIsFinished = !!msg.payload.formData
+            const formFields = this.userTask.userTaskConfig.formFields;
+            const formFieldIds = formFields.map((ff) => ff.id);
+            const initialValues = this.userTask.startToken;
+            const finishedFormData = msg.payload.formData;
+            this.formIsFinished = !!msg.payload.formData;
             if (this.formIsFinished) {
-                this.collapsed = this.props.collapse_when_finished
+                this.collapsed = this.props.collapse_when_finished;
             }
 
             if (formFields) {
                 formFields.forEach((field) => {
-                    this.formData[field.id] = field.defaultValue
+                    this.formData[field.id] = field.defaultValue;
 
                     if (field.type === 'confirm') {
-                        const customForm = field.customForm ? JSON.parse(field.customForm) : {}
-                        const confirmText = customForm.confirmButtonText ?? 'Confirm'
-                        const declineText = customForm.declineButtonText ?? 'Decline'
+                        const customForm = field.customForm ? JSON.parse(field.customForm) : {};
+                        const confirmText = customForm.confirmButtonText ?? 'Confirm';
+                        const declineText = customForm.declineButtonText ?? 'Decline';
                         this.actions = [
                             {
                                 alignment: 'right',
                                 primary: 'false',
                                 label: declineText,
-                                condition: ''
+                                condition: '',
                             },
                             {
                                 alignment: 'right',
                                 primary: 'true',
                                 label: confirmText,
-                                condition: ''
-                            }
-                        ]
+                                condition: '',
+                            },
+                        ];
                     }
-                })
+                });
             }
 
             if (initialValues) {
                 Object.keys(initialValues)
                     .filter((key) => formFieldIds.includes(key))
                     .forEach((key) => {
-                        this.formData[key] = initialValues[key]
-                    })
+                        this.formData[key] = initialValues[key];
+                    });
             }
 
             if (this.formIsFinished) {
                 Object.keys(finishedFormData)
                     .filter((key) => formFieldIds.includes(key))
                     .forEach((key) => {
-                        this.formData[key] = finishedFormData[key]
-                    })
+                        this.formData[key] = finishedFormData[key];
+                    });
             }
 
             nextTick(() => {
-                this.focusFirstFormField()
-            })
+                this.focusFirstFormField();
+            });
         },
         actionFn(action) {
             if (action.label === 'Speichern' || action.label === 'Speichern und nächster') {
-                const formkitInputs = this.$refs.form.$el.querySelectorAll('.formkit-outer')
-                let allComplete = true
+                const formkitInputs = this.$refs.form.$el.querySelectorAll('.formkit-outer');
+                let allComplete = true;
 
                 formkitInputs.forEach((input) => {
-                    const dataComplete = input.getAttribute('data-complete')
-                    const dataInvalid = input.getAttribute('data-invalid')
+                    const dataComplete = input.getAttribute('data-complete');
+                    const dataInvalid = input.getAttribute('data-invalid');
 
                     if (dataComplete == null && dataInvalid === 'true') {
-                        allComplete = false
+                        allComplete = false;
                     }
-                })
+                });
 
-                if (!allComplete) return
+                if (!allComplete) return;
             }
 
             if (this.checkCondition(action.condition)) {
-                this.showError('')
+                this.showError('');
 
-                const processedFormData = { ...this.formData }
-                const formFields = this.userTask.userTaskConfig.formFields
+                const processedFormData = { ...this.formData };
+                const formFields = this.userTask.userTaskConfig.formFields;
 
-                formFields.forEach(field => {
-                    const fieldValue = processedFormData[field.id]
+                formFields.forEach((field) => {
+                    const fieldValue = processedFormData[field.id];
 
                     if (field.type === 'number' || field.type === 'long') {
                         if (fieldValue !== null && fieldValue !== undefined && fieldValue !== '') {
                             if (field.type === 'long') {
-                                const intValue = Number.parseInt(fieldValue, 10)
+                                const intValue = Number.parseInt(fieldValue, 10);
                                 if (!isNaN(intValue)) {
-                                    processedFormData[field.id] = intValue
+                                    processedFormData[field.id] = intValue;
                                 }
                             } else {
-                                const numValue = Number.parseFloat(fieldValue)
+                                const numValue = Number.parseFloat(fieldValue);
                                 if (!isNaN(numValue)) {
-                                    processedFormData[field.id] = numValue
+                                    processedFormData[field.id] = numValue;
                                 }
                             }
                         }
                     }
-                })
+                });
 
-                const msg = this.msg ?? {}
-                msg.payload = { formData: processedFormData, userTask: this.userTask }
+                const msg = this.msg ?? {};
+                msg.payload = { formData: processedFormData, userTask: this.userTask };
                 this.send(
                     msg,
                     this.actions.findIndex((element) => element.label === action.label) +
                     (this.isConfirmDialog ? this.props.options.length : 0)
-                )
+                );
                 // TODO: mm - end
             } else {
-                this.showError(action.errorMessage)
+                this.showError(action.errorMessage);
             }
         },
         checkCondition(condition) {
-            if (condition === '') return true
+            if (condition === '') return true;
             try {
                 // eslint-disable-next-line no-new-func
-                const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')')
-                const result = func(this.formData, this.userTask, this.msg)
-                return Boolean(result)
+                const func = Function('fields', 'userTask', 'msg', '"use strict"; return (' + condition + ')');
+                const result = func(this.formData, this.userTask, this.msg);
+                return Boolean(result);
             } catch (err) {
-                console.error('Error while evaluating condition: ' + err)
-                return false
+                console.error('Error while evaluating condition: ' + err);
+                return false;
             }
         },
         showError(errMsg) {
-            this.errorMsg = errMsg
+            this.errorMsg = errMsg;
         },
         focusFirstFormField() {
             if (this.collapsed || !this.hasUserTask) {
-                return
+                return;
             }
 
             if (this.firstFormFieldRef) {
-                let inputElement = null
+                let inputElement = null;
 
                 if (this.firstFormFieldRef.node && this.firstFormFieldRef.node.input instanceof HTMLElement) {
-                    inputElement = this.firstFormFieldRef.node.input
+                    inputElement = this.firstFormFieldRef.node.input;
                 } else if (this.firstFormFieldRef.$el instanceof HTMLElement) {
                     if (['INPUT', 'TEXTAREA', 'SELECT'].includes(this.firstFormFieldRef.$el.tagName)) {
-                        inputElement = this.firstFormFieldRef.$el
+                        inputElement = this.firstFormFieldRef.$el;
                     } else {
-                        inputElement = this.firstFormFieldRef.$el.querySelector('input:not([type="hidden"]), textarea, select')
+                        inputElement = this.firstFormFieldRef.$el.querySelector('input:not([type="hidden"]), textarea, select');
                     }
                 }
 
                 if (inputElement) {
-                    inputElement.focus()
+                    inputElement.focus();
                 } else {
-                    console.warn('Could not find a focusable input element for the first form field.')
+                    console.warn('Could not find a focusable input element for the first form field.');
                 }
             }
-        }
-    }
-}
+        },
+    },
+};
 
 function mapItems(type, field) {
     if (type === 'enum') {
         return field.enumValues.map((enumValue) => ({
             title: enumValue.name,
-            value: enumValue.id
-        }))
+            value: enumValue.id,
+        }));
     } else {
-        return null
+        return null;
     }
 }
 </script>