@5minds/node-red-dashboard-2-processcube-dynamic-form
Version:
The ui component for the ProcessCube dynamic-form
238 lines (207 loc) • 9.6 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('ui-dynamic-form', {
category: 'ProcessCube UI',
color: '#00aed7',
defaults: {
name: { value: '' },
group: { type: 'ui-group', required: true },
order: { value: 0 },
options: {
value: [{ label: '' }],
validate: function (v) {
const unique = new Set(
v.map(function (o) {
return o.label;
})
);
return v.length === unique.size;
},
},
waiting_title: { value: 'Warten auf den Usertask...' },
waiting_info: {
value: 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.',
},
width: {
value: 0,
validate: function (v) {
const width = v || 0;
const currentGroup = $('#node-input-group').val() || this.group;
const groupNode = RED.nodes.node(currentGroup);
const valid = !groupNode || +width <= +groupNode.width;
$('#node-input-size').toggleClass('input-error', !valid);
return valid;
},
},
height: { value: 0 },
outputs: { value: 1 },
},
inputs: 1,
outputs: 1,
outputLabels: function (index) {
return this.options[index].label;
},
icon: 'ui_dynamic_form.svg',
label: function () {
return this.name || 'dynamic-form';
},
oneditprepare: function () {
$('#node-input-size').elementSizer({
width: '#node-input-width',
height: '#node-input-height',
group: '#node-input-group',
});
function generateOption(i, option) {
const container = $('<li/>', {
style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;',
});
// Create input fields for value and label
const row = $('<div/>').appendTo(container);
$('<input/>', {
class: 'node-input-option-label',
type: 'text',
style: 'margin-left:7px; width:calc(29%);',
placeholder: 'Label',
value: option.label,
})
.appendTo(row)
.typedInput({
type: 'str',
types: ['str'],
});
$('<input/>', {
class: 'node-input-option-condition',
type: 'text',
style: 'margin-left:7px; width:calc(29%);',
placeholder: 'Condition',
value: option.condition,
})
.appendTo(row)
.typedInput({
type: 'str',
types: ['str'],
});
$('<input/>', {
class: 'node-input-option-error',
type: 'text',
style: 'margin-left:7px; width:calc(29%);',
placeholder: 'Error message',
value: option.errorMessage,
})
.appendTo(row)
.typedInput({
type: 'str',
types: ['str'],
});
// Create delete button for the option
const finalSpan = $('<span/>', {
style: 'float:right; margin-right:8px;',
}).appendTo(row);
const deleteButton = $('<a/>', {
href: '#',
class: 'editor-button editor-button-small',
style: 'margin-top:7px; margin-left:5px;',
}).appendTo(finalSpan);
$('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
deleteButton.click(function () {
container.css({
background: 'var(--red-ui-secondary-background-inactive, #fee)',
});
container.fadeOut(300, function () {
$(this).remove();
});
});
$('#node-input-option-container').append(container);
}
$('#node-input-add-option').click(function () {
generateOption($('#node-input-option-container').children().length + 1, {});
$('#node-input-option-container-div').scrollTop(
$('#node-input-option-container-div').get(0).scrollHeight
);
});
for (let i = 0; i < this.options.length; i++) {
const option = this.options[i];
generateOption(i + 1, option);
}
$('#node-input-option-container').sortable({
axis: 'y',
handle: '.node-input-option-handle',
cursor: 'move',
});
},
oneditsave: function () {
const options = $('#node-input-option-container').children();
const node = this;
node.options = [];
options.each(function (i) {
const option = $(this);
const o = {
label: option.find('.node-input-option-label').val(),
condition: option.find('.node-input-option-condition').val(),
errorMessage: option.find('.node-input-option-error').val(),
};
node.options.push(o);
});
this.outputs = node.options.length || 1;
},
});
</script>
<script type="text/html" data-template-name="ui-dynamic-form">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
<label for="node-input-group"><i class="fa fa-table"></i> Group</label>
<input type="text" id="node-input-group">
</div>
<div class="form-row">
<label><i class="fa fa-object-group"></i> <span data-i18n="ui-dynamic-form.label.size"></label>
<input type="hidden" id="node-input-width">
<input type="hidden" id="node-input-height">
<button class="editor-button" id="node-input-size"></button>
</div>
<div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
<label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
<div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 70%;">
<span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
<ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
</div>
<!-- <a
data-html="true"
title="Dynamic Property: Send 'msg.options' in order to override this property."
class="red-ui-button ui-node-popover-title"
style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
<i style="font-family: ui-serif;">fx</i>
</a> -->
</div>
<!-- Add Option Button -->
<div class="form-row">
<a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
</div>
<div class="form-row">
<label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text.</label>
<input type="text" id="node-input-waiting_title">
</div>
<div class="form-row">
<label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text.</label>
<input type="text" id="node-input-waiting_info">
</div>
</script>
<script type="text/markdown" data-help-name="ui-dynamic-form">
A UI-Node to display usertasks forms from the ProcessCube Engine dynamicly.
## Usage
Connect the UI-Node to the usertask input node. Every action in the configuration of the node will display as a button at the bottom of the form.
## Validation
### message
Access to the message object is available through _msg_
### form fields
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.
Example: _fields.field_01_
### usertask
Access to the usertask object is available through _usertask_
## Outputs
: usertask (Object) : The representative object of the usertask.
### References
- [The ProcessCube Developer Network](https://processcube.io) - All documentation for the ProcessCube© Plattform
- [Node-RED Integration in ProcessCube©](https://processcube.io/docs/node-red) - Node-RED Integration in ProcessCube©
</script>