@5minds/node-red-dashboard-2-processcube-dynamic-form 2.0.4 → 2.0.5-feature-2f01ec-mcergl3n
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/nodes/ui-dynamic-form.html +325 -324
- package/nodes/ui-dynamic-form.js +31 -41
- package/package.json +87 -87
- package/resources/ui-dynamic-form.umd.js +1 -1
- package/ui/components/UIDynamicForm.vue +538 -545
|
@@ -1,260 +1,260 @@
|
|
|
1
1
|
<script type="text/javascript">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
})
|
|
16
|
-
);
|
|
17
|
-
return v.length === unique.size;
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
waiting_title: { value: 'Warten auf den Usertask...' },
|
|
21
|
-
waiting_info: {
|
|
22
|
-
value: 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.',
|
|
23
|
-
},
|
|
24
|
-
form_columns: {
|
|
25
|
-
value: 1,
|
|
26
|
-
},
|
|
27
|
-
readonly: {
|
|
28
|
-
value: false,
|
|
29
|
-
},
|
|
30
|
-
collapsible: {
|
|
31
|
-
value: false,
|
|
32
|
-
},
|
|
33
|
-
collapse_when_finished: {
|
|
34
|
-
value: false,
|
|
35
|
-
},
|
|
36
|
-
actions_inside_card: {
|
|
37
|
-
value: true,
|
|
38
|
-
},
|
|
39
|
-
card_size_styling: {
|
|
40
|
-
value: "",
|
|
41
|
-
},
|
|
42
|
-
inner_card_styling: {
|
|
43
|
-
value: "",
|
|
44
|
-
},
|
|
45
|
-
title_text: {
|
|
46
|
-
value: "",
|
|
47
|
-
},
|
|
48
|
-
title_style: {
|
|
49
|
-
value: "default",
|
|
50
|
-
},
|
|
51
|
-
title_custom_text_styling: {
|
|
52
|
-
value: "",
|
|
53
|
-
},
|
|
54
|
-
title_icon: {
|
|
55
|
-
value: "",
|
|
56
|
-
},
|
|
57
|
-
trigger_on_change: {
|
|
58
|
-
value: false,
|
|
59
|
-
},
|
|
60
|
-
handle_confirmation_dialogs: {
|
|
61
|
-
value: false,
|
|
62
|
-
},
|
|
63
|
-
width: {
|
|
64
|
-
value: 0,
|
|
65
|
-
validate: function (v) {
|
|
66
|
-
const width = v || 0;
|
|
67
|
-
const currentGroup = $('#node-input-group').val() || this.group;
|
|
68
|
-
const groupNode = RED.nodes.node(currentGroup);
|
|
69
|
-
const valid = !groupNode || +width <= +groupNode.width;
|
|
70
|
-
$('#node-input-size').toggleClass('input-error', !valid);
|
|
71
|
-
return valid;
|
|
72
|
-
},
|
|
73
|
-
},
|
|
74
|
-
height: { value: 0 },
|
|
75
|
-
outputs: { value: 1 },
|
|
76
|
-
},
|
|
77
|
-
inputs: 1,
|
|
78
|
-
outputs: 0,
|
|
79
|
-
outputLabels: function (index) {
|
|
80
|
-
const labels = [...this.options.map(i => i.label)];
|
|
81
|
-
|
|
82
|
-
if (this.handle_confirmation_dialogs) {
|
|
83
|
-
labels.push('Decline', 'Confirm');
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
if (this.trigger_on_change) {
|
|
87
|
-
labels.push('Triggered on change');
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
return labels[index];
|
|
91
|
-
},
|
|
92
|
-
icon: 'ui_dynamic_form.svg',
|
|
93
|
-
label: function () {
|
|
94
|
-
return this.name || 'dynamic-form';
|
|
95
|
-
},
|
|
96
|
-
oneditprepare: function () {
|
|
97
|
-
$('#node-input-size').elementSizer({
|
|
98
|
-
width: '#node-input-width',
|
|
99
|
-
height: '#node-input-height',
|
|
100
|
-
group: '#node-input-group',
|
|
101
|
-
});
|
|
102
|
-
$('#node-input-title_style').typedInput({
|
|
103
|
-
types: [
|
|
104
|
-
{
|
|
105
|
-
value: 'title_style',
|
|
106
|
-
options: [
|
|
107
|
-
{ value: 'default', label: 'Default' },
|
|
108
|
-
{ value: 'minimal', label: 'Minimal' },
|
|
109
|
-
{ value: 'outside', label: 'Outside of card' },
|
|
110
|
-
]
|
|
111
|
-
}
|
|
112
|
-
]
|
|
2
|
+
RED.nodes.registerType('ui-dynamic-form', {
|
|
3
|
+
category: 'ProcessCube UI',
|
|
4
|
+
color: '#00aed7',
|
|
5
|
+
defaults: {
|
|
6
|
+
name: { value: '' },
|
|
7
|
+
group: { type: 'ui-group', required: true },
|
|
8
|
+
order: { value: 0 },
|
|
9
|
+
options: {
|
|
10
|
+
value: [{ label: '' }],
|
|
11
|
+
validate: function (v) {
|
|
12
|
+
const unique = new Set(
|
|
13
|
+
v.map(function (o) {
|
|
14
|
+
return o.label;
|
|
113
15
|
})
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
const container = $('<li/>', {
|
|
117
|
-
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
118
|
-
});
|
|
119
|
-
|
|
120
|
-
// Create input fields for value and label
|
|
121
|
-
const row = $('<div/>').appendTo(container);
|
|
122
|
-
$('<input/>', {
|
|
123
|
-
class: 'node-input-option-label',
|
|
124
|
-
type: 'text',
|
|
125
|
-
style: 'margin-left:7px; width:calc(29%);',
|
|
126
|
-
placeholder: 'Label',
|
|
127
|
-
value: option.label,
|
|
128
|
-
})
|
|
129
|
-
.appendTo(row);
|
|
130
|
-
|
|
131
|
-
$('<input/>', {
|
|
132
|
-
class: 'node-input-option-condition',
|
|
133
|
-
type: 'text',
|
|
134
|
-
style: 'margin-left:7px; width:calc(29%);',
|
|
135
|
-
placeholder: 'Condition',
|
|
136
|
-
value: option.condition,
|
|
137
|
-
})
|
|
138
|
-
.appendTo(row);
|
|
139
|
-
|
|
140
|
-
$('<input/>', {
|
|
141
|
-
class: 'node-input-option-error',
|
|
142
|
-
type: 'text',
|
|
143
|
-
style: 'margin-left:7px; width:calc(29%);',
|
|
144
|
-
placeholder: 'Error message',
|
|
145
|
-
value: option.errorMessage,
|
|
146
|
-
})
|
|
147
|
-
.appendTo(row);
|
|
148
|
-
|
|
149
|
-
$('<input/>', {
|
|
150
|
-
class: 'node-input-option-alignment',
|
|
151
|
-
type: 'text',
|
|
152
|
-
style: 'margin-left:7px; width:calc(29%);',
|
|
153
|
-
placeholder: 'Alignment',
|
|
154
|
-
value: option.alignment
|
|
155
|
-
})
|
|
156
|
-
.appendTo(row)
|
|
157
|
-
.typedInput({
|
|
158
|
-
types: [
|
|
159
|
-
{
|
|
160
|
-
value: 'alignment',
|
|
161
|
-
options: [
|
|
162
|
-
{ value: 'left', label: 'Align left' },
|
|
163
|
-
{ value: 'right', label: 'Align right' },
|
|
164
|
-
]
|
|
165
|
-
}
|
|
166
|
-
]
|
|
167
|
-
});
|
|
168
|
-
|
|
169
|
-
$('<input/>', {
|
|
170
|
-
class: 'node-input-option-primary',
|
|
171
|
-
type: 'text',
|
|
172
|
-
style: 'margin-left:7px; width:calc(29%);',
|
|
173
|
-
placeholder: 'Action type',
|
|
174
|
-
value: option.primary,
|
|
175
|
-
})
|
|
176
|
-
.appendTo(row)
|
|
177
|
-
.typedInput({
|
|
178
|
-
types: [
|
|
179
|
-
{
|
|
180
|
-
value: 'primary',
|
|
181
|
-
options: [
|
|
182
|
-
{ value: 'false', label: 'Secondary action'},
|
|
183
|
-
{ value: 'true', label: 'Primary action'},
|
|
184
|
-
]
|
|
185
|
-
}
|
|
186
|
-
]
|
|
187
|
-
});
|
|
188
|
-
|
|
189
|
-
// Create delete button for the option
|
|
190
|
-
const finalSpan = $('<span/>', {
|
|
191
|
-
style: 'float:right; margin-right:8px;',
|
|
192
|
-
}).appendTo(row);
|
|
193
|
-
const deleteButton = $('<a/>', {
|
|
194
|
-
href: '#',
|
|
195
|
-
class: 'editor-button editor-button-small',
|
|
196
|
-
style: 'margin-top:7px; margin-left:5px;',
|
|
197
|
-
}).appendTo(finalSpan);
|
|
198
|
-
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
199
|
-
|
|
200
|
-
deleteButton.click(function () {
|
|
201
|
-
container.css({
|
|
202
|
-
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
203
|
-
});
|
|
204
|
-
container.fadeOut(300, function () {
|
|
205
|
-
$(this).remove();
|
|
206
|
-
});
|
|
207
|
-
});
|
|
208
|
-
|
|
209
|
-
$('#node-input-option-container').append(container);
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
$('#node-input-add-option').click(function () {
|
|
213
|
-
generateOption($('#node-input-option-container').children().length + 1, {});
|
|
214
|
-
$('#node-input-option-container-div').scrollTop(
|
|
215
|
-
$('#node-input-option-container-div').get(0).scrollHeight
|
|
216
|
-
);
|
|
217
|
-
});
|
|
218
|
-
|
|
219
|
-
for (let i = 0; i < this.options.length; i++) {
|
|
220
|
-
const option = this.options[i];
|
|
221
|
-
generateOption(i + 1, option);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
$('#node-input-option-container').sortable({
|
|
225
|
-
axis: 'y',
|
|
226
|
-
handle: '.node-input-option-handle',
|
|
227
|
-
cursor: 'move',
|
|
228
|
-
});
|
|
16
|
+
);
|
|
17
|
+
return v.length === unique.size;
|
|
229
18
|
},
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
19
|
+
},
|
|
20
|
+
waiting_title: { value: 'Warten auf den Usertask...' },
|
|
21
|
+
waiting_info: {
|
|
22
|
+
value: 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.',
|
|
23
|
+
},
|
|
24
|
+
form_columns: {
|
|
25
|
+
value: 1,
|
|
26
|
+
},
|
|
27
|
+
readonly: {
|
|
28
|
+
value: false,
|
|
29
|
+
},
|
|
30
|
+
collapsible: {
|
|
31
|
+
value: false,
|
|
32
|
+
},
|
|
33
|
+
collapse_when_finished: {
|
|
34
|
+
value: false,
|
|
35
|
+
},
|
|
36
|
+
actions_inside_card: {
|
|
37
|
+
value: true,
|
|
38
|
+
},
|
|
39
|
+
card_size_styling: {
|
|
40
|
+
value: '',
|
|
41
|
+
},
|
|
42
|
+
inner_card_styling: {
|
|
43
|
+
value: '',
|
|
44
|
+
},
|
|
45
|
+
title_text: { value: '' },
|
|
46
|
+
title_text_type: { value: 'str' },
|
|
47
|
+
title_style: {
|
|
48
|
+
value: 'default',
|
|
49
|
+
},
|
|
50
|
+
title_custom_text_styling: {
|
|
51
|
+
value: '',
|
|
52
|
+
},
|
|
53
|
+
title_icon: {
|
|
54
|
+
value: '',
|
|
55
|
+
},
|
|
56
|
+
trigger_on_change: {
|
|
57
|
+
value: false,
|
|
58
|
+
},
|
|
59
|
+
handle_confirmation_dialogs: {
|
|
60
|
+
value: false,
|
|
61
|
+
},
|
|
62
|
+
width: {
|
|
63
|
+
value: 0,
|
|
64
|
+
validate: function (v) {
|
|
65
|
+
const width = v || 0;
|
|
66
|
+
const currentGroup = $('#node-input-group').val() || this.group;
|
|
67
|
+
const groupNode = RED.nodes.node(currentGroup);
|
|
68
|
+
const valid = !groupNode || +width <= +groupNode.width;
|
|
69
|
+
$('#node-input-size').toggleClass('input-error', !valid);
|
|
70
|
+
return valid;
|
|
256
71
|
},
|
|
257
|
-
|
|
72
|
+
},
|
|
73
|
+
height: { value: 0 },
|
|
74
|
+
outputs: { value: 1 },
|
|
75
|
+
},
|
|
76
|
+
inputs: 1,
|
|
77
|
+
outputs: 0,
|
|
78
|
+
outputLabels: function (index) {
|
|
79
|
+
const labels = [...this.options.map((i) => i.label)];
|
|
80
|
+
|
|
81
|
+
if (this.handle_confirmation_dialogs) {
|
|
82
|
+
labels.push('Decline', 'Confirm');
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
if (this.trigger_on_change) {
|
|
86
|
+
labels.push('Triggered on change');
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
return labels[index];
|
|
90
|
+
},
|
|
91
|
+
icon: 'ui_dynamic_form.svg',
|
|
92
|
+
label: function () {
|
|
93
|
+
return this.name || 'dynamic-form';
|
|
94
|
+
},
|
|
95
|
+
oneditprepare: function () {
|
|
96
|
+
$('#node-input-size').elementSizer({
|
|
97
|
+
width: '#node-input-width',
|
|
98
|
+
height: '#node-input-height',
|
|
99
|
+
group: '#node-input-group',
|
|
100
|
+
});
|
|
101
|
+
$('#node-input-title_style').typedInput({
|
|
102
|
+
types: [
|
|
103
|
+
{
|
|
104
|
+
value: 'title_style',
|
|
105
|
+
options: [
|
|
106
|
+
{ value: 'default', label: 'Default' },
|
|
107
|
+
{ value: 'minimal', label: 'Minimal' },
|
|
108
|
+
{ value: 'outside', label: 'Outside of card' },
|
|
109
|
+
],
|
|
110
|
+
},
|
|
111
|
+
],
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
$('#node-input-title_text').typedInput({
|
|
115
|
+
default: 'str',
|
|
116
|
+
types: ['str', 'msg'],
|
|
117
|
+
typeField: '#node-input-title_text_type',
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
function generateOption(i, option) {
|
|
121
|
+
const container = $('<li/>', {
|
|
122
|
+
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
// Create input fields for value and label
|
|
126
|
+
const row = $('<div/>').appendTo(container);
|
|
127
|
+
$('<input/>', {
|
|
128
|
+
class: 'node-input-option-label',
|
|
129
|
+
type: 'text',
|
|
130
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
131
|
+
placeholder: 'Label',
|
|
132
|
+
value: option.label,
|
|
133
|
+
}).appendTo(row);
|
|
134
|
+
|
|
135
|
+
$('<input/>', {
|
|
136
|
+
class: 'node-input-option-condition',
|
|
137
|
+
type: 'text',
|
|
138
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
139
|
+
placeholder: 'Condition',
|
|
140
|
+
value: option.condition,
|
|
141
|
+
}).appendTo(row);
|
|
142
|
+
|
|
143
|
+
$('<input/>', {
|
|
144
|
+
class: 'node-input-option-error',
|
|
145
|
+
type: 'text',
|
|
146
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
147
|
+
placeholder: 'Error message',
|
|
148
|
+
value: option.errorMessage,
|
|
149
|
+
}).appendTo(row);
|
|
150
|
+
|
|
151
|
+
$('<input/>', {
|
|
152
|
+
class: 'node-input-option-alignment',
|
|
153
|
+
type: 'text',
|
|
154
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
155
|
+
placeholder: 'Alignment',
|
|
156
|
+
value: option.alignment,
|
|
157
|
+
})
|
|
158
|
+
.appendTo(row)
|
|
159
|
+
.typedInput({
|
|
160
|
+
types: [
|
|
161
|
+
{
|
|
162
|
+
value: 'alignment',
|
|
163
|
+
options: [
|
|
164
|
+
{ value: 'left', label: 'Align left' },
|
|
165
|
+
{ value: 'right', label: 'Align right' },
|
|
166
|
+
],
|
|
167
|
+
},
|
|
168
|
+
],
|
|
169
|
+
});
|
|
170
|
+
|
|
171
|
+
$('<input/>', {
|
|
172
|
+
class: 'node-input-option-primary',
|
|
173
|
+
type: 'text',
|
|
174
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
175
|
+
placeholder: 'Action type',
|
|
176
|
+
value: option.primary,
|
|
177
|
+
})
|
|
178
|
+
.appendTo(row)
|
|
179
|
+
.typedInput({
|
|
180
|
+
types: [
|
|
181
|
+
{
|
|
182
|
+
value: 'primary',
|
|
183
|
+
options: [
|
|
184
|
+
{ value: 'false', label: 'Secondary action' },
|
|
185
|
+
{ value: 'true', label: 'Primary action' },
|
|
186
|
+
],
|
|
187
|
+
},
|
|
188
|
+
],
|
|
189
|
+
});
|
|
190
|
+
|
|
191
|
+
// Create delete button for the option
|
|
192
|
+
const finalSpan = $('<span/>', {
|
|
193
|
+
style: 'float:right; margin-right:8px;',
|
|
194
|
+
}).appendTo(row);
|
|
195
|
+
const deleteButton = $('<a/>', {
|
|
196
|
+
href: '#',
|
|
197
|
+
class: 'editor-button editor-button-small',
|
|
198
|
+
style: 'margin-top:7px; margin-left:5px;',
|
|
199
|
+
}).appendTo(finalSpan);
|
|
200
|
+
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
201
|
+
|
|
202
|
+
deleteButton.click(function () {
|
|
203
|
+
container.css({
|
|
204
|
+
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
205
|
+
});
|
|
206
|
+
container.fadeOut(300, function () {
|
|
207
|
+
$(this).remove();
|
|
208
|
+
});
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
$('#node-input-option-container').append(container);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
$('#node-input-add-option').click(function () {
|
|
215
|
+
generateOption($('#node-input-option-container').children().length + 1, {});
|
|
216
|
+
$('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight);
|
|
217
|
+
});
|
|
218
|
+
|
|
219
|
+
for (let i = 0; i < this.options.length; i++) {
|
|
220
|
+
const option = this.options[i];
|
|
221
|
+
generateOption(i + 1, option);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
$('#node-input-option-container').sortable({
|
|
225
|
+
axis: 'y',
|
|
226
|
+
handle: '.node-input-option-handle',
|
|
227
|
+
cursor: 'move',
|
|
228
|
+
});
|
|
229
|
+
},
|
|
230
|
+
oneditsave: function () {
|
|
231
|
+
const options = $('#node-input-option-container').children();
|
|
232
|
+
const node = this;
|
|
233
|
+
node.options = [];
|
|
234
|
+
options.each(function (i) {
|
|
235
|
+
const option = $(this);
|
|
236
|
+
const o = {
|
|
237
|
+
label: option.find('.node-input-option-label').val(),
|
|
238
|
+
condition: option.find('.node-input-option-condition').val(),
|
|
239
|
+
errorMessage: option.find('.node-input-option-error').val(),
|
|
240
|
+
alignment: option.find('.node-input-option-alignment').val(),
|
|
241
|
+
primary: option.find('.node-input-option-primary').val(),
|
|
242
|
+
};
|
|
243
|
+
|
|
244
|
+
node.options.push(o);
|
|
245
|
+
});
|
|
246
|
+
|
|
247
|
+
this.outputs = node.options.length || 0;
|
|
248
|
+
|
|
249
|
+
if ($('#node-input-trigger_on_change').is(':checked')) {
|
|
250
|
+
this.outputs++;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
if ($('#node-input-handle_confirmation_dialogs').is(':checked')) {
|
|
254
|
+
this.outputs += 2;
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
});
|
|
258
258
|
</script>
|
|
259
259
|
|
|
260
260
|
<script type="text/html" data-template-name="ui-dynamic-form">
|
|
@@ -302,11 +302,12 @@
|
|
|
302
302
|
</div>
|
|
303
303
|
<hr />
|
|
304
304
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
305
|
+
<h4>Title Configuration</h4>
|
|
306
|
+
<div class="form-row">
|
|
307
|
+
<label for="node-input-title_text"><i class="fa fa-hand"></i>Title text</label>
|
|
308
|
+
<input type="text" id="node-input-title_text" title="Enter the text to show as a title.">
|
|
309
|
+
<input type="hidden" id="node-input-title_text_type">
|
|
310
|
+
</div>
|
|
310
311
|
<div class="form-row">
|
|
311
312
|
<label for="node-input-title_style"><i class="fa fa-hand"></i>Style</label>
|
|
312
313
|
<input type="text" id="node-input-title_style" title="Select the base styling layout for your title.">
|
|
@@ -362,121 +363,121 @@
|
|
|
362
363
|
</div>
|
|
363
364
|
</script>
|
|
364
365
|
|
|
365
|
-
|
|
366
366
|
<script type="text/markdown" data-help-name="ui-dynamic-form">
|
|
367
|
-
A UI-Node to display Forms for UserTasks from the ProcessCube Engine.
|
|
367
|
+
A UI-Node to display Forms for UserTasks from the ProcessCube Engine.
|
|
368
|
+
|
|
369
|
+
## States
|
|
368
370
|
|
|
369
|
-
|
|
371
|
+
This component can have one of three states. `Waiting`, `active` and `finished`.
|
|
370
372
|
|
|
371
|
-
This
|
|
372
|
-
- `
|
|
373
|
-
- `
|
|
374
|
-
- `Finished` will display the last filled form in a disabled mode. This state can be set by passing the result of the `dynamic-form` node into itself.
|
|
373
|
+
- `Waiting` is the initial state. This node will either display the waiting text and waiting title, or nothing. This dependes on your configuration. This state can be set at any time by passing a message with an empty payload into this node.
|
|
374
|
+
- `Active` will display a dynamic form for a UserTask. This state can be set by passing the result of the `usertask-input` or `wait-for-usertask` node into it.
|
|
375
|
+
- `Finished` will display the last filled form in a disabled mode. This state can be set by passing the result of the `dynamic-form` node into itself.
|
|
375
376
|
|
|
376
|
-
## Usage
|
|
377
|
+
## Usage
|
|
377
378
|
|
|
378
|
-
Connect the input to the `usertask-input` or `wait-for-usertask` node. It will use the UserTasks FormFields configuration to display a dynamically generated Form inside a Card.
|
|
379
|
-
After configuring an action, connect it's output to an `usertask-output` node.
|
|
380
|
-
In case you want to display the `finished` state, place a `link in` and a `link out` node to pipe the `dynamic-form` nodes output into its input.
|
|
381
|
-
In case you want to clear the node and set it back into `waiting` state, place a `function` node that clears the `payload` object. The pipe the `dynamic-form` nodes output into the `function` node and the `function` nodes output into th e`dynamic-form` nodes input.
|
|
379
|
+
Connect the input to the `usertask-input` or `wait-for-usertask` node. It will use the UserTasks FormFields configuration to display a dynamically generated Form inside a Card.
|
|
380
|
+
After configuring an action, connect it's output to an `usertask-output` node.
|
|
381
|
+
In case you want to display the `finished` state, place a `link in` and a `link out` node to pipe the `dynamic-form` nodes output into its input.
|
|
382
|
+
In case you want to clear the node and set it back into `waiting` state, place a `function` node that clears the `payload` object. The pipe the `dynamic-form` nodes output into the `function` node and the `function` nodes output into th e`dynamic-form` nodes input.
|
|
382
383
|
|
|
383
|
-
## Action Configuration
|
|
384
|
+
## Action Configuration
|
|
384
385
|
|
|
385
|
-
Actions are buttons displayed at the bottom of the Form.
|
|
386
|
+
Actions are buttons displayed at the bottom of the Form.
|
|
386
387
|
|
|
387
|
-
### Actions
|
|
388
|
+
### Actions
|
|
388
389
|
|
|
389
|
-
A Form can have any amount of actions. Each action is specified with a:
|
|
390
|
+
A Form can have any amount of actions. Each action is specified with a:
|
|
390
391
|
|
|
391
|
-
- **Label**: The buttons text.
|
|
392
|
-
- **Condition (optional)**: An expression that evaluates to true or false. It controls whether the action is enabled or not.
|
|
393
|
-
- **Error message (optional)**: Will be displayed, when Condition evaluates to false.
|
|
394
|
-
- **Alignment**: Controls the buttons position. It can be placed on the left or right side of the form.
|
|
395
|
-
- **Action type**: Controls the styling of the button. There should always be one primary action.
|
|
392
|
+
- **Label**: The buttons text.
|
|
393
|
+
- **Condition (optional)**: An expression that evaluates to true or false. It controls whether the action is enabled or not.
|
|
394
|
+
- **Error message (optional)**: Will be displayed, when Condition evaluates to false.
|
|
395
|
+
- **Alignment**: Controls the buttons position. It can be placed on the left or right side of the form.
|
|
396
|
+
- **Action type**: Controls the styling of the button. There should always be one primary action.
|
|
396
397
|
|
|
397
|
-
For each action configured, the node will gain a new output, that is named as the linked action.
|
|
398
|
+
For each action configured, the node will gain a new output, that is named as the linked action.
|
|
398
399
|
|
|
399
|
-
#### Condition
|
|
400
|
+
#### Condition
|
|
400
401
|
|
|
401
|
-
Various values can be accessed inside the condition through following constants:
|
|
402
|
+
Various values can be accessed inside the condition through following constants:
|
|
402
403
|
|
|
403
|
-
Access to the message object is available through _msg_
|
|
404
|
+
Access to the message object is available through _msg_
|
|
404
405
|
|
|
405
|
-
Access to the form fields is available through the _fields_ object. A single form field can be accessed by selecting the field id as a key.
|
|
406
|
-
Example: _fields.field_01_
|
|
406
|
+
Access to the form fields is available through the _fields_ object. A single form field can be accessed by selecting the field id as a key.
|
|
407
|
+
Example: _fields.field_01_
|
|
407
408
|
|
|
408
|
-
Access to the usertask object is available through _usertask_
|
|
409
|
+
Access to the usertask object is available through _usertask_
|
|
409
410
|
|
|
410
|
-
### Handles confirmation dialogs
|
|
411
|
+
### Handles confirmation dialogs
|
|
411
412
|
|
|
412
|
-
When checked, this node will gain two additional outputs 'Accept' and 'Decline'. These are required, when handling confirmation dialogs, that may be defined in the Studio by settings a Form Fields type to 'Confirm'.
|
|
413
|
-
The outputs defined by the 'Actions' section of this node won't show up, when a 'Confirm'-FormField is present.
|
|
413
|
+
When checked, this node will gain two additional outputs 'Accept' and 'Decline'. These are required, when handling confirmation dialogs, that may be defined in the Studio by settings a Form Fields type to 'Confirm'.
|
|
414
|
+
The outputs defined by the 'Actions' section of this node won't show up, when a 'Confirm'-FormField is present.
|
|
414
415
|
|
|
415
|
-
### Inside of card
|
|
416
|
+
### Inside of card
|
|
416
417
|
|
|
417
|
-
This property controls the positioning of the action buttons. They can be palced inside of the card, right below the FormFields, or below the whole Card containing the Form.
|
|
418
|
+
This property controls the positioning of the action buttons. They can be palced inside of the card, right below the FormFields, or below the whole Card containing the Form.
|
|
418
419
|
|
|
419
|
-
## Title Configuration
|
|
420
|
+
## Title Configuration
|
|
420
421
|
|
|
421
|
-
### Title
|
|
422
|
+
### Title
|
|
422
423
|
|
|
423
|
-
The text displayed above the FormFields in the Cards header. When left empty, there will be no header in the Card.
|
|
424
|
+
The text displayed above the FormFields in the Cards header. When left empty, there will be no header in the Card.
|
|
424
425
|
|
|
425
|
-
### Style
|
|
426
|
+
### Style
|
|
426
427
|
|
|
427
|
-
Controls the headers styling. `Default` is the recommended 5Minds theming. `Minimal` might be used to apply custom stylings and `Outside of card` places the title right above the card.
|
|
428
|
+
Controls the headers styling. `Default` is the recommended 5Minds theming. `Minimal` might be used to apply custom stylings and `Outside of card` places the title right above the card.
|
|
428
429
|
|
|
429
|
-
### Custom text styling
|
|
430
|
+
### Custom text styling
|
|
430
431
|
|
|
431
|
-
Enter custom css rules to modifiy how the title text is displayed. This can be used particulary well together with the style `Minimal`.
|
|
432
|
+
Enter custom css rules to modifiy how the title text is displayed. This can be used particulary well together with the style `Minimal`.
|
|
432
433
|
|
|
433
|
-
### Title icon
|
|
434
|
+
### Title icon
|
|
434
435
|
|
|
435
|
-
An URL for an image, that should be displayed before the text. This will be used as the `src`-Property of a HTML `img`-Element. Therefore DataURLs can be used to add images/svgs etc., that are not available online.
|
|
436
|
+
An URL for an image, that should be displayed before the text. This will be used as the `src`-Property of a HTML `img`-Element. Therefore DataURLs can be used to add images/svgs etc., that are not available online.
|
|
436
437
|
|
|
437
|
-
## Appearance
|
|
438
|
+
## Appearance
|
|
438
439
|
|
|
439
|
-
### Card size styling
|
|
440
|
+
### Card size styling
|
|
440
441
|
|
|
441
|
-
Enter custom css rules to control the size and placement of the whole card. It can be used to set a `max-width` for the Card, apply a `margin` etc.
|
|
442
|
+
Enter custom css rules to control the size and placement of the whole card. It can be used to set a `max-width` for the Card, apply a `margin` etc.
|
|
442
443
|
|
|
443
|
-
### Inner card size styling
|
|
444
|
+
### Inner card size styling
|
|
444
445
|
|
|
445
|
-
Enter custom css rules to control the size of the inner part, that contains just the form fields. It can be used to override the `max-height` property.
|
|
446
|
+
Enter custom css rules to control the size of the inner part, that contains just the form fields. It can be used to override the `max-height` property.
|
|
446
447
|
|
|
447
|
-
### Columns in form
|
|
448
|
+
### Columns in form
|
|
448
449
|
|
|
449
|
-
This value controls the amount of columns the card will have. It can be used to place multiple FormFields in one row.
|
|
450
|
-
Configure `hidden` FormFields in your UserTask configuration to leave spaces open between FormFields. FormFields with type `heading` will always take up a whole line regardless of the `Columns in Form` value.
|
|
450
|
+
This value controls the amount of columns the card will have. It can be used to place multiple FormFields in one row.
|
|
451
|
+
Configure `hidden` FormFields in your UserTask configuration to leave spaces open between FormFields. FormFields with type `heading` will always take up a whole line regardless of the `Columns in Form` value.
|
|
451
452
|
|
|
452
|
-
### Readonly
|
|
453
|
+
### Readonly
|
|
453
454
|
|
|
454
|
-
When checked, all fields in the Form will not be editable. To mark single FormFields as readOnly, add the custom property `readOnly` with the value `true` to the FormField configuration of the UserTask.
|
|
455
|
+
When checked, all fields in the Form will not be editable. To mark single FormFields as readOnly, add the custom property `readOnly` with the value `true` to the FormField configuration of the UserTask.
|
|
455
456
|
|
|
456
|
-
### Collapsible
|
|
457
|
+
### Collapsible
|
|
457
458
|
|
|
458
|
-
When checked, the card will have a collapse icon and can be folded at any.
|
|
459
|
+
When checked, the card will have a collapse icon and can be folded at any.
|
|
459
460
|
|
|
460
|
-
### Collapsible when finished
|
|
461
|
+
### Collapsible when finished
|
|
461
462
|
|
|
462
|
-
When checked, the card will gain a collapse icon and automatically fold, after the node entered `finished` state. This is independed to `Collapsible`.
|
|
463
|
+
When checked, the card will gain a collapse icon and automatically fold, after the node entered `finished` state. This is independed to `Collapsible`.
|
|
463
464
|
|
|
464
|
-
### Title for waiting text
|
|
465
|
+
### Title for waiting text
|
|
465
466
|
|
|
466
|
-
While no UserTask is present, this text will be displayed.
|
|
467
|
+
While no UserTask is present, this text will be displayed.
|
|
467
468
|
|
|
468
|
-
### Text for waiting text
|
|
469
|
+
### Text for waiting text
|
|
469
470
|
|
|
470
|
-
While no UserTask is present, this text will be displayed.
|
|
471
|
+
While no UserTask is present, this text will be displayed.
|
|
471
472
|
|
|
472
|
-
## Other
|
|
473
|
+
## Other
|
|
473
474
|
|
|
474
|
-
### Trigger on change
|
|
475
|
+
### Trigger on change
|
|
475
476
|
|
|
476
|
-
Adds a new output to the node. This output will be triggered each time a FormFields value changes. This can be used for live, server-side validation or for Forms without action buttons.
|
|
477
|
+
Adds a new output to the node. This output will be triggered each time a FormFields value changes. This can be used for live, server-side validation or for Forms without action buttons.
|
|
477
478
|
|
|
478
|
-
## References
|
|
479
|
+
## References
|
|
479
480
|
|
|
480
|
-
-
|
|
481
|
-
-
|
|
481
|
+
- [The ProcessCube Developer Network](https://processcube.io) - All documentation for the ProcessCube© Plattform
|
|
482
|
+
- [Node-RED Integration in ProcessCube©](https://processcube.io/docs/node-red) - Node-RED Integration in ProcessCube©
|
|
482
483
|
</script>
|