@5minds/node-red-dashboard-2-processcube-dynamic-form 1.1.2 → 2.0.0-develop-5015e2-madmxd10

package/nodes/ui-dynamic-form.html

@@ -21,6 +21,39 @@
             waiting_info: {
                 value: 'Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist.',
             },
+            form_columns: {
+              value: 1,
+            },
+            readonly: {
+              value: false,
+            },
+            collapsible: {
+              value: false,
+            },
+            collapse_when_finished: {
+              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 +69,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 +83,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 +110,7 @@
                     placeholder: 'Label',
                     value: option.label,
                 })
-                    .appendTo(row)
-                    .typedInput({
-                        type: 'str',
-                        types: ['str'],
-                    });
+                    .appendTo(row);
 
                 $('<input/>', {
                     class: 'node-input-option-condition',
@@ -78,11 +119,7 @@
                     placeholder: 'Condition',
                     value: option.condition,
                 })
-                    .appendTo(row)
-                    .typedInput({
-                        type: 'str',
-                        types: ['str'],
-                    });
+                    .appendTo(row);
 
                 $('<input/>', {
                     class: 'node-input-option-error',
@@ -90,11 +127,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 +221,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 +253,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 +272,173 @@
     <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-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-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-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-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>
     <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-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-collapsible"><i class="fa fa-hand"></i>Collapsible</label>
+      <input type="checkbox" id="node-input-collapsible" title="When checked, the card can be folded at any time.">
+    </div>
+    <div class="form-row">
+      <label for="node-input-collapse_when_finished"><i class="fa fa-hand"></i>Collapsible when finished</label>
+      <input type="checkbox" id="node-input-collapse_when_finished" title="When checked, the card will automatically collapse after finishing the form.">
+    </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" title="Displayed while no UserTask is present.">
+    </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" title="Displayed while no UserTask is present.">
+    </div>
+    <hr />
+    <h4>Other</h4>
+    <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>
 </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.
+
+## States
+
+This component can have one of three states. `Waiting`, `active` and `finished`.
+- `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.
+- `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.
+- `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.
 
 ## 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 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.
+After configuring an action, connect it's output to an `usertask-output` node.
+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.
+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.
 
-## Validation
+## Action Configuration
 
-### message
+Actions are buttons displayed at the bottom of the Form.
 
-Access to the message object is available through _msg_ 
+### Actions
 
-### form fields
+A Form can have any amount of actions. Each action is specified with a:
+
+- **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.
+
+### 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.
+
+### Collapsible
+
+When checked, the card will have a collapse icon and can be folded at any.
+
+### Collapsible when finished
+
+When checked, the card will gain a collapse icon and automatically fold, after the node entered `finished` state. This is independed to `Collapsible`.
+
+### Title for waiting text
+
+While no UserTask is present, this text will be displayed.
+
+### Text for waiting text
+
+While no UserTask is present, this text will be displayed.
+
+## Other
+
+### Trigger on change
 
-: usertask (Object) : The representative object of the usertask.
+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.
 
-### 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",
+    "version": "2.0.0-develop-5015e2-madmxd10",
     "description": "The ui component for the ProcessCube dynamic-form",
     "keywords": [
         "processcube",