@5minds/node-red-dashboard-2-processcube-dynamic-form 2.0.4-feature-e6de27-mcerd06i → 2.0.4
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 +324 -325
- package/nodes/ui-dynamic-form.js +41 -31
- package/package.json +1 -1
- package/resources/ui-dynamic-form.umd.js +1 -1
- package/ui/components/UIDynamicForm.vue +545 -538
|
@@ -1,260 +1,260 @@
|
|
|
1
1
|
<script type="text/javascript">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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;
|
|
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
|
+
]
|
|
15
113
|
})
|
|
16
|
-
|
|
17
|
-
|
|
114
|
+
|
|
115
|
+
function generateOption(i, option) {
|
|
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
|
+
});
|
|
18
229
|
},
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
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;
|
|
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
|
+
}
|
|
71
256
|
},
|
|
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
|
-
});
|
|
257
|
+
});
|
|
258
258
|
</script>
|
|
259
259
|
|
|
260
260
|
<script type="text/html" data-template-name="ui-dynamic-form">
|
|
@@ -302,12 +302,11 @@
|
|
|
302
302
|
</div>
|
|
303
303
|
<hr />
|
|
304
304
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
</div>
|
|
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
|
+
</div>
|
|
311
310
|
<div class="form-row">
|
|
312
311
|
<label for="node-input-title_style"><i class="fa fa-hand"></i>Style</label>
|
|
313
312
|
<input type="text" id="node-input-title_style" title="Select the base styling layout for your title.">
|
|
@@ -363,121 +362,121 @@
|
|
|
363
362
|
</div>
|
|
364
363
|
</script>
|
|
365
364
|
|
|
366
|
-
<script type="text/markdown" data-help-name="ui-dynamic-form">
|
|
367
|
-
A UI-Node to display Forms for UserTasks from the ProcessCube Engine.
|
|
368
365
|
|
|
369
|
-
|
|
366
|
+
<script type="text/markdown" data-help-name="ui-dynamic-form">
|
|
367
|
+
A UI-Node to display Forms for UserTasks from the ProcessCube Engine.
|
|
370
368
|
|
|
371
|
-
|
|
369
|
+
## States
|
|
372
370
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
371
|
+
This component can have one of three states. `Waiting`, `active` and `finished`.
|
|
372
|
+
- `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.
|
|
373
|
+
- `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.
|
|
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.
|
|
376
375
|
|
|
377
|
-
|
|
376
|
+
## Usage
|
|
378
377
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
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.
|
|
383
382
|
|
|
384
|
-
|
|
383
|
+
## Action Configuration
|
|
385
384
|
|
|
386
|
-
|
|
385
|
+
Actions are buttons displayed at the bottom of the Form.
|
|
387
386
|
|
|
388
|
-
|
|
387
|
+
### Actions
|
|
389
388
|
|
|
390
|
-
|
|
389
|
+
A Form can have any amount of actions. Each action is specified with a:
|
|
391
390
|
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
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.
|
|
397
396
|
|
|
398
|
-
|
|
397
|
+
For each action configured, the node will gain a new output, that is named as the linked action.
|
|
399
398
|
|
|
400
|
-
|
|
399
|
+
#### Condition
|
|
401
400
|
|
|
402
|
-
|
|
401
|
+
Various values can be accessed inside the condition through following constants:
|
|
403
402
|
|
|
404
|
-
|
|
403
|
+
Access to the message object is available through _msg_
|
|
405
404
|
|
|
406
|
-
|
|
407
|
-
|
|
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_
|
|
408
407
|
|
|
409
|
-
|
|
408
|
+
Access to the usertask object is available through _usertask_
|
|
410
409
|
|
|
411
|
-
|
|
410
|
+
### Handles confirmation dialogs
|
|
412
411
|
|
|
413
|
-
|
|
414
|
-
|
|
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.
|
|
415
414
|
|
|
416
|
-
|
|
415
|
+
### Inside of card
|
|
417
416
|
|
|
418
|
-
|
|
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.
|
|
419
418
|
|
|
420
|
-
|
|
419
|
+
## Title Configuration
|
|
421
420
|
|
|
422
|
-
|
|
421
|
+
### Title
|
|
423
422
|
|
|
424
|
-
|
|
423
|
+
The text displayed above the FormFields in the Cards header. When left empty, there will be no header in the Card.
|
|
425
424
|
|
|
426
|
-
|
|
425
|
+
### Style
|
|
427
426
|
|
|
428
|
-
|
|
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.
|
|
429
428
|
|
|
430
|
-
|
|
429
|
+
### Custom text styling
|
|
431
430
|
|
|
432
|
-
|
|
431
|
+
Enter custom css rules to modifiy how the title text is displayed. This can be used particulary well together with the style `Minimal`.
|
|
433
432
|
|
|
434
|
-
|
|
433
|
+
### Title icon
|
|
435
434
|
|
|
436
|
-
|
|
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.
|
|
437
436
|
|
|
438
|
-
|
|
437
|
+
## Appearance
|
|
439
438
|
|
|
440
|
-
|
|
439
|
+
### Card size styling
|
|
441
440
|
|
|
442
|
-
|
|
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.
|
|
443
442
|
|
|
444
|
-
|
|
443
|
+
### Inner card size styling
|
|
445
444
|
|
|
446
|
-
|
|
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.
|
|
447
446
|
|
|
448
|
-
|
|
447
|
+
### Columns in form
|
|
449
448
|
|
|
450
|
-
|
|
451
|
-
|
|
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.
|
|
452
451
|
|
|
453
|
-
|
|
452
|
+
### Readonly
|
|
454
453
|
|
|
455
|
-
|
|
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.
|
|
456
455
|
|
|
457
|
-
|
|
456
|
+
### Collapsible
|
|
458
457
|
|
|
459
|
-
|
|
458
|
+
When checked, the card will have a collapse icon and can be folded at any.
|
|
460
459
|
|
|
461
|
-
|
|
460
|
+
### Collapsible when finished
|
|
462
461
|
|
|
463
|
-
|
|
462
|
+
When checked, the card will gain a collapse icon and automatically fold, after the node entered `finished` state. This is independed to `Collapsible`.
|
|
464
463
|
|
|
465
|
-
|
|
464
|
+
### Title for waiting text
|
|
466
465
|
|
|
467
|
-
|
|
466
|
+
While no UserTask is present, this text will be displayed.
|
|
468
467
|
|
|
469
|
-
|
|
468
|
+
### Text for waiting text
|
|
470
469
|
|
|
471
|
-
|
|
470
|
+
While no UserTask is present, this text will be displayed.
|
|
472
471
|
|
|
473
|
-
|
|
472
|
+
## Other
|
|
474
473
|
|
|
475
|
-
|
|
474
|
+
### Trigger on change
|
|
476
475
|
|
|
477
|
-
|
|
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.
|
|
478
477
|
|
|
479
|
-
|
|
478
|
+
## References
|
|
480
479
|
|
|
481
|
-
|
|
482
|
-
|
|
480
|
+
- [The ProcessCube Developer Network](https://processcube.io) - All documentation for the ProcessCube© Plattform
|
|
481
|
+
- [Node-RED Integration in ProcessCube©](https://processcube.io/docs/node-red) - Node-RED Integration in ProcessCube©
|
|
483
482
|
</script>
|