@5minds/node-red-dashboard-2-processcube-dynamic-form 2.0.3-feature-b90ab0-mceo42ir → 2.0.3
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 +321 -333
- package/nodes/ui-dynamic-form.js +41 -31
- package/package.json +3 -4
- package/resources/ui-dynamic-form.umd.js +2 -2
- package/ui/components/TitleText.vue +37 -66
- package/ui/components/UIDynamicForm.vue +593 -662
- package/ui/stylesheets/ui-dynamic-form.css +106 -117
|
@@ -1,260 +1,257 @@
|
|
|
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
|
+
title_text: {
|
|
43
|
+
value: "",
|
|
44
|
+
},
|
|
45
|
+
title_style: {
|
|
46
|
+
value: "default",
|
|
47
|
+
},
|
|
48
|
+
title_custom_text_styling: {
|
|
49
|
+
value: "",
|
|
50
|
+
},
|
|
51
|
+
title_icon: {
|
|
52
|
+
value: "",
|
|
53
|
+
},
|
|
54
|
+
trigger_on_change: {
|
|
55
|
+
value: false,
|
|
56
|
+
},
|
|
57
|
+
handle_confirmation_dialogs: {
|
|
58
|
+
value: false,
|
|
59
|
+
},
|
|
60
|
+
width: {
|
|
61
|
+
value: 0,
|
|
62
|
+
validate: function (v) {
|
|
63
|
+
const width = v || 0;
|
|
64
|
+
const currentGroup = $('#node-input-group').val() || this.group;
|
|
65
|
+
const groupNode = RED.nodes.node(currentGroup);
|
|
66
|
+
const valid = !groupNode || +width <= +groupNode.width;
|
|
67
|
+
$('#node-input-size').toggleClass('input-error', !valid);
|
|
68
|
+
return valid;
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
height: { value: 0 },
|
|
72
|
+
outputs: { value: 1 },
|
|
73
|
+
},
|
|
74
|
+
inputs: 1,
|
|
75
|
+
outputs: 0,
|
|
76
|
+
outputLabels: function (index) {
|
|
77
|
+
const labels = [...this.options.map(i => i.label)];
|
|
78
|
+
|
|
79
|
+
if (this.handle_confirmation_dialogs) {
|
|
80
|
+
labels.push('Decline', 'Confirm');
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
if (this.trigger_on_change) {
|
|
84
|
+
labels.push('Triggered on change');
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
return labels[index];
|
|
88
|
+
},
|
|
89
|
+
icon: 'ui_dynamic_form.svg',
|
|
90
|
+
label: function () {
|
|
91
|
+
return this.name || 'dynamic-form';
|
|
92
|
+
},
|
|
93
|
+
oneditprepare: function () {
|
|
94
|
+
$('#node-input-size').elementSizer({
|
|
95
|
+
width: '#node-input-width',
|
|
96
|
+
height: '#node-input-height',
|
|
97
|
+
group: '#node-input-group',
|
|
98
|
+
});
|
|
99
|
+
$('#node-input-title_style').typedInput({
|
|
100
|
+
types: [
|
|
101
|
+
{
|
|
102
|
+
value: 'title_style',
|
|
103
|
+
options: [
|
|
104
|
+
{ value: 'default', label: 'Default' },
|
|
105
|
+
{ value: 'minimal', label: 'Minimal' },
|
|
106
|
+
{ value: 'outside', label: 'Outside of card' },
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
]
|
|
15
110
|
})
|
|
16
|
-
|
|
17
|
-
|
|
111
|
+
|
|
112
|
+
function generateOption(i, option) {
|
|
113
|
+
const container = $('<li/>', {
|
|
114
|
+
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
// Create input fields for value and label
|
|
118
|
+
const row = $('<div/>').appendTo(container);
|
|
119
|
+
$('<input/>', {
|
|
120
|
+
class: 'node-input-option-label',
|
|
121
|
+
type: 'text',
|
|
122
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
123
|
+
placeholder: 'Label',
|
|
124
|
+
value: option.label,
|
|
125
|
+
})
|
|
126
|
+
.appendTo(row);
|
|
127
|
+
|
|
128
|
+
$('<input/>', {
|
|
129
|
+
class: 'node-input-option-condition',
|
|
130
|
+
type: 'text',
|
|
131
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
132
|
+
placeholder: 'Condition',
|
|
133
|
+
value: option.condition,
|
|
134
|
+
})
|
|
135
|
+
.appendTo(row);
|
|
136
|
+
|
|
137
|
+
$('<input/>', {
|
|
138
|
+
class: 'node-input-option-error',
|
|
139
|
+
type: 'text',
|
|
140
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
141
|
+
placeholder: 'Error message',
|
|
142
|
+
value: option.errorMessage,
|
|
143
|
+
})
|
|
144
|
+
.appendTo(row);
|
|
145
|
+
|
|
146
|
+
$('<input/>', {
|
|
147
|
+
class: 'node-input-option-alignment',
|
|
148
|
+
type: 'text',
|
|
149
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
150
|
+
placeholder: 'Alignment',
|
|
151
|
+
value: option.alignment
|
|
152
|
+
})
|
|
153
|
+
.appendTo(row)
|
|
154
|
+
.typedInput({
|
|
155
|
+
types: [
|
|
156
|
+
{
|
|
157
|
+
value: 'alignment',
|
|
158
|
+
options: [
|
|
159
|
+
{ value: 'left', label: 'Align left' },
|
|
160
|
+
{ value: 'right', label: 'Align right' },
|
|
161
|
+
]
|
|
162
|
+
}
|
|
163
|
+
]
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
$('<input/>', {
|
|
167
|
+
class: 'node-input-option-primary',
|
|
168
|
+
type: 'text',
|
|
169
|
+
style: 'margin-left:7px; width:calc(29%);',
|
|
170
|
+
placeholder: 'Action type',
|
|
171
|
+
value: option.primary,
|
|
172
|
+
})
|
|
173
|
+
.appendTo(row)
|
|
174
|
+
.typedInput({
|
|
175
|
+
types: [
|
|
176
|
+
{
|
|
177
|
+
value: 'primary',
|
|
178
|
+
options: [
|
|
179
|
+
{ value: 'false', label: 'Secondary action'},
|
|
180
|
+
{ value: 'true', label: 'Primary action'},
|
|
181
|
+
]
|
|
182
|
+
}
|
|
183
|
+
]
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
// Create delete button for the option
|
|
187
|
+
const finalSpan = $('<span/>', {
|
|
188
|
+
style: 'float:right; margin-right:8px;',
|
|
189
|
+
}).appendTo(row);
|
|
190
|
+
const deleteButton = $('<a/>', {
|
|
191
|
+
href: '#',
|
|
192
|
+
class: 'editor-button editor-button-small',
|
|
193
|
+
style: 'margin-top:7px; margin-left:5px;',
|
|
194
|
+
}).appendTo(finalSpan);
|
|
195
|
+
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
|
|
196
|
+
|
|
197
|
+
deleteButton.click(function () {
|
|
198
|
+
container.css({
|
|
199
|
+
background: 'var(--red-ui-secondary-background-inactive, #fee)',
|
|
200
|
+
});
|
|
201
|
+
container.fadeOut(300, function () {
|
|
202
|
+
$(this).remove();
|
|
203
|
+
});
|
|
204
|
+
});
|
|
205
|
+
|
|
206
|
+
$('#node-input-option-container').append(container);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
$('#node-input-add-option').click(function () {
|
|
210
|
+
generateOption($('#node-input-option-container').children().length + 1, {});
|
|
211
|
+
$('#node-input-option-container-div').scrollTop(
|
|
212
|
+
$('#node-input-option-container-div').get(0).scrollHeight
|
|
213
|
+
);
|
|
214
|
+
});
|
|
215
|
+
|
|
216
|
+
for (let i = 0; i < this.options.length; i++) {
|
|
217
|
+
const option = this.options[i];
|
|
218
|
+
generateOption(i + 1, option);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
$('#node-input-option-container').sortable({
|
|
222
|
+
axis: 'y',
|
|
223
|
+
handle: '.node-input-option-handle',
|
|
224
|
+
cursor: 'move',
|
|
225
|
+
});
|
|
18
226
|
},
|
|
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;
|
|
227
|
+
oneditsave: function () {
|
|
228
|
+
const options = $('#node-input-option-container').children();
|
|
229
|
+
const node = this;
|
|
230
|
+
node.options = [];
|
|
231
|
+
options.each(function (i) {
|
|
232
|
+
const option = $(this);
|
|
233
|
+
const o = {
|
|
234
|
+
label: option.find('.node-input-option-label').val(),
|
|
235
|
+
condition: option.find('.node-input-option-condition').val(),
|
|
236
|
+
errorMessage: option.find('.node-input-option-error').val(),
|
|
237
|
+
alignment: option.find('.node-input-option-alignment').val(),
|
|
238
|
+
primary: option.find('.node-input-option-primary').val(),
|
|
239
|
+
};
|
|
240
|
+
|
|
241
|
+
node.options.push(o);
|
|
242
|
+
});
|
|
243
|
+
|
|
244
|
+
this.outputs = node.options.length || 0;
|
|
245
|
+
|
|
246
|
+
if ($('#node-input-trigger_on_change').is(':checked')) {
|
|
247
|
+
this.outputs++;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
if ($('#node-input-handle_confirmation_dialogs').is(':checked')) {
|
|
251
|
+
this.outputs += 2;
|
|
252
|
+
}
|
|
71
253
|
},
|
|
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
|
-
});
|
|
254
|
+
});
|
|
258
255
|
</script>
|
|
259
256
|
|
|
260
257
|
<script type="text/html" data-template-name="ui-dynamic-form">
|
|
@@ -302,12 +299,11 @@
|
|
|
302
299
|
</div>
|
|
303
300
|
<hr />
|
|
304
301
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
</div>
|
|
302
|
+
<h4>Title Configuration</h4>
|
|
303
|
+
<div class="form-row">
|
|
304
|
+
<label for="node-input-title_text"><i class="fa fa-hand"></i>Title text</label>
|
|
305
|
+
<input type="text" id="node-input-title_text" title="Enter the text to show as a title.">
|
|
306
|
+
</div>
|
|
311
307
|
<div class="form-row">
|
|
312
308
|
<label for="node-input-title_style"><i class="fa fa-hand"></i>Style</label>
|
|
313
309
|
<input type="text" id="node-input-title_style" title="Select the base styling layout for your title.">
|
|
@@ -324,12 +320,8 @@
|
|
|
324
320
|
|
|
325
321
|
<h4>Appearance</h4>
|
|
326
322
|
<div class="form-row">
|
|
327
|
-
<label for="node-input-
|
|
328
|
-
<input type="text" id="node-input-card_size_styling" title="Use CSS properties like margin, padding or max-width to influence sizing and positioning of the component
|
|
329
|
-
</div>
|
|
330
|
-
<div class="form-row">
|
|
331
|
-
<label for="node-input-inner_card_styling"><i class="fa fa-hand"></i>Inner card size styling</label>
|
|
332
|
-
<input type="text" id="node-input-inner_card_styling" title="Use CSS properties like max-height to influence sizing and positioning of the components inner part, that contains only the form fields.">
|
|
323
|
+
<label for="node-input-form_columns"><i class="fa fa-hand"></i>Card size styling</label>
|
|
324
|
+
<input type="text" id="node-input-card_size_styling" title="Use CSS properties like margin, padding or max-width to influence sizing and positioning of the component">
|
|
333
325
|
</div>
|
|
334
326
|
<div class="form-row">
|
|
335
327
|
<label for="node-input-form_columns"><i class="fa fa-hand"></i>Columns in form</label>
|
|
@@ -363,121 +355,117 @@
|
|
|
363
355
|
</div>
|
|
364
356
|
</script>
|
|
365
357
|
|
|
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
358
|
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
This component can have one of three states. `Waiting`, `active` and `finished`.
|
|
372
|
-
|
|
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.
|
|
359
|
+
<script type="text/markdown" data-help-name="ui-dynamic-form">
|
|
360
|
+
A UI-Node to display Forms for UserTasks from the ProcessCube Engine.
|
|
376
361
|
|
|
377
|
-
|
|
362
|
+
## States
|
|
378
363
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
364
|
+
This component can have one of three states. `Waiting`, `active` and `finished`.
|
|
365
|
+
- `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.
|
|
366
|
+
- `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.
|
|
367
|
+
- `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.
|
|
383
368
|
|
|
384
|
-
|
|
369
|
+
## Usage
|
|
385
370
|
|
|
386
|
-
|
|
371
|
+
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.
|
|
372
|
+
After configuring an action, connect it's output to an `usertask-output` node.
|
|
373
|
+
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.
|
|
374
|
+
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.
|
|
387
375
|
|
|
388
|
-
|
|
376
|
+
## Action Configuration
|
|
389
377
|
|
|
390
|
-
|
|
378
|
+
Actions are buttons displayed at the bottom of the Form.
|
|
391
379
|
|
|
392
|
-
|
|
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.
|
|
380
|
+
### Actions
|
|
397
381
|
|
|
398
|
-
|
|
382
|
+
A Form can have any amount of actions. Each action is specified with a:
|
|
399
383
|
|
|
400
|
-
|
|
384
|
+
- **Label**: The buttons text.
|
|
385
|
+
- **Condition (optional)**: An expression that evaluates to true or false. It controls whether the action is enabled or not.
|
|
386
|
+
- **Error message (optional)**: Will be displayed, when Condition evaluates to false.
|
|
387
|
+
- **Alignment**: Controls the buttons position. It can be placed on the left or right side of the form.
|
|
388
|
+
- **Action type**: Controls the styling of the button. There should always be one primary action.
|
|
401
389
|
|
|
402
|
-
|
|
390
|
+
For each action configured, the node will gain a new output, that is named as the linked action.
|
|
403
391
|
|
|
404
|
-
|
|
392
|
+
#### Condition
|
|
405
393
|
|
|
406
|
-
|
|
407
|
-
Example: _fields.field_01_
|
|
394
|
+
Various values can be accessed inside the condition through following constants:
|
|
408
395
|
|
|
409
|
-
|
|
396
|
+
Access to the message object is available through _msg_
|
|
410
397
|
|
|
411
|
-
|
|
398
|
+
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.
|
|
399
|
+
Example: _fields.field_01_
|
|
412
400
|
|
|
413
|
-
|
|
414
|
-
The outputs defined by the 'Actions' section of this node won't show up, when a 'Confirm'-FormField is present.
|
|
401
|
+
Access to the usertask object is available through _usertask_
|
|
415
402
|
|
|
416
|
-
|
|
403
|
+
### Handles confirmation dialogs
|
|
417
404
|
|
|
418
|
-
|
|
405
|
+
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'.
|
|
406
|
+
The outputs defined by the 'Actions' section of this node won't show up, when a 'Confirm'-FormField is present.
|
|
419
407
|
|
|
420
|
-
|
|
408
|
+
### Inside of card
|
|
421
409
|
|
|
422
|
-
|
|
410
|
+
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.
|
|
423
411
|
|
|
424
|
-
|
|
412
|
+
## Title Configuration
|
|
425
413
|
|
|
426
|
-
|
|
414
|
+
### Title
|
|
427
415
|
|
|
428
|
-
|
|
416
|
+
The text displayed above the FormFields in the Cards header. When left empty, there will be no header in the Card.
|
|
429
417
|
|
|
430
|
-
|
|
418
|
+
### Style
|
|
431
419
|
|
|
432
|
-
|
|
420
|
+
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.
|
|
433
421
|
|
|
434
|
-
|
|
422
|
+
### Custom text styling
|
|
435
423
|
|
|
436
|
-
|
|
424
|
+
Enter custom css rules to modifiy how the title text is displayed. This can be used particulary well together with the style `Minimal`.
|
|
437
425
|
|
|
438
|
-
|
|
426
|
+
### Title icon
|
|
439
427
|
|
|
440
|
-
|
|
428
|
+
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.
|
|
441
429
|
|
|
442
|
-
|
|
430
|
+
## Appearance
|
|
443
431
|
|
|
444
|
-
|
|
432
|
+
### Card size styling
|
|
445
433
|
|
|
446
|
-
|
|
434
|
+
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.
|
|
447
435
|
|
|
448
|
-
|
|
436
|
+
### Columns in form
|
|
449
437
|
|
|
450
|
-
|
|
451
|
-
|
|
438
|
+
This value controls the amount of columns the card will have. It can be used to place multiple FormFields in one row.
|
|
439
|
+
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
440
|
|
|
453
|
-
|
|
441
|
+
### Readonly
|
|
454
442
|
|
|
455
|
-
|
|
443
|
+
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
444
|
|
|
457
|
-
|
|
445
|
+
### Collapsible
|
|
458
446
|
|
|
459
|
-
|
|
447
|
+
When checked, the card will have a collapse icon and can be folded at any.
|
|
460
448
|
|
|
461
|
-
|
|
449
|
+
### Collapsible when finished
|
|
462
450
|
|
|
463
|
-
|
|
451
|
+
When checked, the card will gain a collapse icon and automatically fold, after the node entered `finished` state. This is independed to `Collapsible`.
|
|
464
452
|
|
|
465
|
-
|
|
453
|
+
### Title for waiting text
|
|
466
454
|
|
|
467
|
-
|
|
455
|
+
While no UserTask is present, this text will be displayed.
|
|
468
456
|
|
|
469
|
-
|
|
457
|
+
### Text for waiting text
|
|
470
458
|
|
|
471
|
-
|
|
459
|
+
While no UserTask is present, this text will be displayed.
|
|
472
460
|
|
|
473
|
-
|
|
461
|
+
## Other
|
|
474
462
|
|
|
475
|
-
|
|
463
|
+
### Trigger on change
|
|
476
464
|
|
|
477
|
-
|
|
465
|
+
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
466
|
|
|
479
|
-
|
|
467
|
+
## References
|
|
480
468
|
|
|
481
|
-
|
|
482
|
-
|
|
469
|
+
- [The ProcessCube Developer Network](https://processcube.io) - All documentation for the ProcessCube© Plattform
|
|
470
|
+
- [Node-RED Integration in ProcessCube©](https://processcube.io/docs/node-red) - Node-RED Integration in ProcessCube©
|
|
483
471
|
</script>
|