@5minds/node-red-dashboard-2-processcube-dynamic-form 1.1.2-develop-231918-m7na5yab → 1.1.2-feature-997de4-m7nhlmql

package/nodes/ui-dynamic-form.html

@@ -21,6 +21,33 @@
             waiting_info: {
                 value: 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.',
             },
+            form_columns: {
+              value: 1,
+            },
+            readonly: {
+              value: false,
+            },
+            actions_inside_card: {
+                value: true,
+            },
+            card_size_styling: {
+              value: "",
+            },
+            title_text: {
+              value: "",
+            },
+            title_style: {
+              value: "default",
+            },
+            title_custom_text_styling: {
+                value: "",
+            },
+            title_icon: {
+                value: "",
+            },
+            trigger_on_change: {
+                value: false,
+            },
             width: {
                 value: 0,
                 validate: function (v) {
@@ -36,9 +63,9 @@
             outputs: { value: 1 },
         },
         inputs: 1,
-        outputs: 1,
+        outputs: 0,
         outputLabels: function (index) {
-            return this.options[index].label;
+            return index < this.options.length ? this.options[index].label : 'Triggered on change';
         },
         icon: 'ui_dynamic_form.svg',
         label: function () {
@@ -50,6 +77,18 @@
                 height: '#node-input-height',
                 group: '#node-input-group',
             });
+            $('#node-input-title_style').typedInput({
+              types: [
+                  {
+                    value: 'title_style',
+                    options: [
+                        { value: 'default', label: 'Default' },
+                        { value: 'minimal', label: 'Minimal' },
+                        { value: 'outside', label: 'Outside of card' },
+                    ]
+                  }
+              ]
+            })
 
             function generateOption(i, option) {
                 const container = $('<li/>', {
@@ -65,11 +104,7 @@
                     placeholder: 'Label',
                     value: option.label,
                 })
-                    .appendTo(row)
-                    .typedInput({
-                        type: 'str',
-                        types: ['str'],
-                    });
+                    .appendTo(row);
 
                 $('<input/>', {
                     class: 'node-input-option-condition',
@@ -78,11 +113,7 @@
                     placeholder: 'Condition',
                     value: option.condition,
                 })
-                    .appendTo(row)
-                    .typedInput({
-                        type: 'str',
-                        types: ['str'],
-                    });
+                    .appendTo(row);
 
                 $('<input/>', {
                     class: 'node-input-option-error',
@@ -90,11 +121,47 @@
                     style: 'margin-left:7px; width:calc(29%);',
                     placeholder: 'Error message',
                     value: option.errorMessage,
+                })
+                    .appendTo(row);
+
+                $('<input/>', {
+                    class: 'node-input-option-alignment',
+                    type: 'text',
+                    style: 'margin-left:7px; width:calc(29%);',
+                    placeholder: 'Alignment',
+                    value: option.alignment
                 })
                     .appendTo(row)
                     .typedInput({
-                        type: 'str',
-                        types: ['str'],
+                        types: [
+                            {
+                                value: 'alignment',
+                                options: [
+                                    { value: 'left', label: 'Align left' },
+                                    { value: 'right', label: 'Align right' },
+                                ]
+                            }
+                        ]
+                    });
+
+                $('<input/>', {
+                    class: 'node-input-option-primary',
+                    type: 'text',
+                    style: 'margin-left:7px; width:calc(29%);',
+                    placeholder: 'Action type',
+                    value: option.primary,
+                })
+                    .appendTo(row)
+                    .typedInput({
+                        types: [
+                            {
+                                value: 'primary',
+                                options: [
+                                    { value: 'false', label: 'Secondary action'},
+                                    { value: 'true', label: 'Primary action'},
+                                ]
+                            }
+                        ]
                     });
 
                 // Create delete button for the option
@@ -148,12 +215,18 @@
                     label: option.find('.node-input-option-label').val(),
                     condition: option.find('.node-input-option-condition').val(),
                     errorMessage: option.find('.node-input-option-error').val(),
+                    alignment: option.find('.node-input-option-alignment').val(),
+                    primary: option.find('.node-input-option-primary').val(),
                 };
 
                 node.options.push(o);
             });
 
-            this.outputs = node.options.length || 1;
+            this.outputs = node.options.length || 0;
+
+            if ($('#node-input-trigger_on_change').is(':checked')) {
+              this.outputs++;
+            }
         },
     });
 </script>
@@ -174,6 +247,7 @@
         <button class="editor-button" id="node-input-size"></button>
     </div>
 
+    <h4>Action Configuration</h4>
     <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%;">
@@ -192,45 +266,150 @@
     <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-readonly"><i class="fa fa-hand"></i>Inside of card</label>
+        <input type="checkbox" id="node-input-actions_inside_card">
+    </div>
+    <hr />
 
+    <h4>Title Configuration</h4>
     <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">
+        <label for="node-input-title_text"><i class="fa fa-hand"></i>Title text</label>
+        <input type="text" id="node-input-title_text" title="Enter the text to show as a 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">
+        <label for="node-input-title_style"><i class="fa fa-hand"></i>Style</label>
+        <input type="text" id="node-input-title_style" title="Select the base styling layout for your title.">
+    </div>
+    <div class="form-row">
+        <label for="node-input-title_custom_text_styling"><i class="fa fa-hand"></i>Custom text styling</label>
+        <input type="text" id="node-input-title_custom_text_styling" title="Use CSS properties like font-size, color or padding to influence the appearance of the title">
+    </div>
+    <div class="form-row">
+        <label for="node-input-title_icon"><i class="fa fa-hand"></i>Title icon</label>
+        <input type="text" id="node-input-title_icon" title="Enter an URL to fetch an icon from. Use a dataurl for images, that are not available online. This value will be used as a HTML <img>'s src value.">
+    </div>
+    <hr />
+
+    <h4>Appearance</h4>
+    <div class="form-row">
+      <label for="node-input-form_columns"><i class="fa fa-hand"></i>Card size styling</label>
+      <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">
     </div>
+    <div class="form-row">
+      <label for="node-input-form_columns"><i class="fa fa-hand"></i>Columns in form</label>
+      <input type="number" min="1" id="node-input-form_columns" title="Control the amount of columns, that your form fields should be placed in.">
+    </div>
+
+    <hr />
+
+    <h4>Other</h4>
+    <div class="form-row">
+      <label for="node-input-readonly"><i class="fa fa-hand"></i>Readonly</label>
+      <input type="checkbox" id="node-input-readonly" title="Makes all form fields read only.">
+    </div>
+    <div class="form-row">
+      <label for="node-input-trigger_on_change"><i class="fa fa-hand"></i>Trigger on change</label>
+      <input type="checkbox" id="node-input-trigger_on_change" title="A new output will be added. Each time a value inside the form changes, this output will be triggered.">
+    </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.
+A UI-Node to display Forms for UserTasks from the ProcessCube Engine.
 
 ## 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.
+Connect the UI-Node 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.
+After configuring an action, connect it's output to an `usertask-output` node.
+
+## Action Configuration
 
-## Validation
+Actions are buttons displayed at the bottom of the Form.
 
-### message
+### Actions
 
-Access to the message object is available through _msg_ 
+A Form can have any amount of actions. Each action is specified with a:
 
-### form fields
+- **Label**: The buttons text.
+- **Condition (optional)**: An expression that evaluates to true or false. It controls whether the action is enabled or not.
+- **Error message (optional)**: Will be displayed, when Condition evaluates to false.
+- **Alignment**: Controls the buttons position. It can be placed on the left or right side of the form.
+- **Action type**: Controls the styling of the button. There should always be one primary action.
+
+For each action configured, the node will gain a new output, that is named as the linked action.
+
+#### Condition
+
+Various values can be accessed inside the condition through following constants:
+
+Access to the message object is available through _msg_
 
 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
+### Inside of card
+
+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.
+
+## Title Configuration
+
+### Title
+
+The text displayed above the FormFields in the Cards header. When left empty, there will be no header in the Card.
+
+### Style
+
+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.
+
+### Custom text styling
+
+Enter custom css rules to modifiy how the title text is displayed. This can be used particulary well together with the style `Minimal`.
+
+### Title icon
+
+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.
+
+## Appearance
+
+### Card size styling
+
+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.
+
+### Columns in form
+
+This value controls the amount of columns the card will have. It can be used to place multiple FormFields in one row.
+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.
+
+## Other
+
+### Readonly
+
+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.
+
+### Trigger on change
+
+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.
+
+### Title for waiting text
+
+While no UserTask is present, this text will be displayed.
+
+### Text for waiting text
 
-: usertask (Object) : The representative object of the usertask.
+While no UserTask is present, this text will be displayed.
 
-### References
+## References
 
 -   [The ProcessCube Developer Network](https://processcube.io) - All documentation for the ProcessCube&copy; Plattform
 -   [Node-RED Integration in ProcessCube&copy;](https://processcube.io/docs/node-red) - Node-RED Integration in ProcessCube&copy;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@5minds/node-red-dashboard-2-processcube-dynamic-form",
-    "version": "1.1.2-develop-231918-m7na5yab",
+    "version": "1.1.2-feature-997de4-m7nhlmql",
     "description": "The ui component for the ProcessCube dynamic-form",
     "keywords": [
         "processcube",