diff --git a/modules/pages-and-forms/assets/images/images/Constraints.png b/modules/pages-and-forms/images/Constraints.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/Constraints.png rename to modules/pages-and-forms/images/Constraints.png diff --git a/modules/pages-and-forms/assets/images/images/ContractSimple.png b/modules/pages-and-forms/images/ContractSimple.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/ContractSimple.png rename to modules/pages-and-forms/images/ContractSimple.png diff --git a/modules/pages-and-forms/assets/images/images/GeneratedForm-preview-comment-error.png b/modules/pages-and-forms/images/GeneratedForm-preview-comment-error.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/GeneratedForm-preview-comment-error.png rename to modules/pages-and-forms/images/GeneratedForm-preview-comment-error.png diff --git a/modules/pages-and-forms/assets/images/images/GeneratedForm-preview-error.png b/modules/pages-and-forms/images/GeneratedForm-preview-error.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/GeneratedForm-preview-error.png rename to modules/pages-and-forms/images/GeneratedForm-preview-error.png diff --git a/modules/pages-and-forms/assets/images/images/GeneratedForm-preview-summary-error.png b/modules/pages-and-forms/images/GeneratedForm-preview-summary-error.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/GeneratedForm-preview-summary-error.png rename to modules/pages-and-forms/images/GeneratedForm-preview-summary-error.png diff --git a/modules/pages-and-forms/assets/images/images/GeneratedForm-preview.png b/modules/pages-and-forms/images/GeneratedForm-preview.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/GeneratedForm-preview.png rename to modules/pages-and-forms/images/GeneratedForm-preview.png diff --git a/modules/pages-and-forms/assets/images/images/GeneratedForm.png b/modules/pages-and-forms/images/GeneratedForm.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/GeneratedForm.png rename to modules/pages-and-forms/images/GeneratedForm.png diff --git a/modules/pages-and-forms/assets/images/images/InstantiationForm-errorOnSubmit.png b/modules/pages-and-forms/images/InstantiationForm-errorOnSubmit.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/InstantiationForm-errorOnSubmit.png rename to modules/pages-and-forms/images/InstantiationForm-errorOnSubmit.png diff --git a/modules/pages-and-forms/assets/images/images/comment-widget-property.png b/modules/pages-and-forms/images/comment-widget-property.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/comment-widget-property.png rename to modules/pages-and-forms/images/comment-widget-property.png diff --git a/modules/pages-and-forms/assets/images/images/errorPanelFragment-date-properties.png b/modules/pages-and-forms/images/errorPanelFragment-date-properties.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/errorPanelFragment-date-properties.png rename to modules/pages-and-forms/images/errorPanelFragment-date-properties.png diff --git a/modules/pages-and-forms/assets/images/images/errorPanelFragment-required-properties.png b/modules/pages-and-forms/images/errorPanelFragment-required-properties.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/errorPanelFragment-required-properties.png rename to modules/pages-and-forms/images/errorPanelFragment-required-properties.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/UID-property-bond-chain.png b/modules/pages-and-forms/images/images-6_0/UID-property-bond-chain.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/UID-property-bond-chain.png rename to modules/pages-and-forms/images/images-6_0/UID-property-bond-chain.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/UID-property-bond-expression.svg b/modules/pages-and-forms/images/images-6_0/UID-property-bond-expression.svg similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/UID-property-bond-expression.svg rename to modules/pages-and-forms/images/images-6_0/UID-property-bond-expression.svg diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/UID-property-bond-interpolation.png b/modules/pages-and-forms/images/images-6_0/UID-property-bond-interpolation.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/UID-property-bond-interpolation.png rename to modules/pages-and-forms/images/images-6_0/UID-property-bond-interpolation.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/UID_ContainerCollection.png b/modules/pages-and-forms/images/images-6_0/UID_ContainerCollection.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/UID_ContainerCollection.png rename to modules/pages-and-forms/images/images-6_0/UID_ContainerCollection.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/UID_ContainerSimpleFruits.png b/modules/pages-and-forms/images/images-6_0/UID_ContainerSimpleFruits.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/UID_ContainerSimpleFruits.png rename to modules/pages-and-forms/images/images-6_0/UID_ContainerSimpleFruits.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/UID_ContainerSimpleFruitsAddRemove.png b/modules/pages-and-forms/images/images-6_0/UID_ContainerSimpleFruitsAddRemove.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/UID_ContainerSimpleFruitsAddRemove.png rename to modules/pages-and-forms/images/images-6_0/UID_ContainerSimpleFruitsAddRemove.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/UID_ContainerStructuredFruitsAddRemove.png b/modules/pages-and-forms/images/images-6_0/UID_ContainerStructuredFruitsAddRemove.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/UID_ContainerStructuredFruitsAddRemove.png rename to modules/pages-and-forms/images/images-6_0/UID_ContainerStructuredFruitsAddRemove.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/create-row-bottom.png b/modules/pages-and-forms/images/images-6_0/create-row-bottom.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/create-row-bottom.png rename to modules/pages-and-forms/images/images-6_0/create-row-bottom.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/create-row-top.png b/modules/pages-and-forms/images/images-6_0/create-row-top.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/create-row-top.png rename to modules/pages-and-forms/images/images-6_0/create-row-top.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/cssasset.png b/modules/pages-and-forms/images/images-6_0/cssasset.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/cssasset.png rename to modules/pages-and-forms/images/images-6_0/cssasset.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/desktop.png b/modules/pages-and-forms/images/images-6_0/desktop.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/desktop.png rename to modules/pages-and-forms/images/images-6_0/desktop.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/fragment.png b/modules/pages-and-forms/images/images-6_0/fragment.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/fragment.png rename to modules/pages-and-forms/images/images-6_0/fragment.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/jsasset.png b/modules/pages-and-forms/images/images-6_0/jsasset.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/jsasset.png rename to modules/pages-and-forms/images/images-6_0/jsasset.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/laptop.png b/modules/pages-and-forms/images/images-6_0/laptop.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/laptop.png rename to modules/pages-and-forms/images/images-6_0/laptop.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/mobile.png b/modules/pages-and-forms/images/images-6_0/mobile.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/mobile.png rename to modules/pages-and-forms/images/images-6_0/mobile.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/pb-export.png b/modules/pages-and-forms/images/images-6_0/pb-export.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/pb-export.png rename to modules/pages-and-forms/images/images-6_0/pb-export.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/pb-import.png b/modules/pages-and-forms/images/images-6_0/pb-import.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/pb-import.png rename to modules/pages-and-forms/images/images-6_0/pb-import.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/pb-resolution.png b/modules/pages-and-forms/images/images-6_0/pb-resolution.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/pb-resolution.png rename to modules/pages-and-forms/images/images-6_0/pb-resolution.png diff --git a/modules/pages-and-forms/assets/images/images/images-6_0/tablet.png b/modules/pages-and-forms/images/images-6_0/tablet.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/images-6_0/tablet.png rename to modules/pages-and-forms/images/images-6_0/tablet.png diff --git a/modules/pages-and-forms/assets/images/images/leave_request_management_process.png b/modules/pages-and-forms/images/leave_request_management_process.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/leave_request_management_process.png rename to modules/pages-and-forms/images/leave_request_management_process.png diff --git a/modules/pages-and-forms/assets/images/images/nbDays-value-control.png b/modules/pages-and-forms/images/nbDays-value-control.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/nbDays-value-control.png rename to modules/pages-and-forms/images/nbDays-value-control.png diff --git a/modules/pages-and-forms/assets/images/images/nbDays-widget-property.png b/modules/pages-and-forms/images/nbDays-widget-property.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/nbDays-widget-property.png rename to modules/pages-and-forms/images/nbDays-widget-property.png diff --git a/modules/pages-and-forms/assets/images/images/no_editor_widget.png b/modules/pages-and-forms/images/no_editor_widget.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/no_editor_widget.png rename to modules/pages-and-forms/images/no_editor_widget.png diff --git a/modules/pages-and-forms/assets/images/images/preview-feedbackon-inputs.png b/modules/pages-and-forms/images/preview-feedbackon-inputs.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/preview-feedbackon-inputs.png rename to modules/pages-and-forms/images/preview-feedbackon-inputs.png diff --git a/modules/pages-and-forms/assets/images/images/process-visu-fragment-variables.png b/modules/pages-and-forms/images/process-visu-fragment-variables.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/process-visu-fragment-variables.png rename to modules/pages-and-forms/images/process-visu-fragment-variables.png diff --git a/modules/pages-and-forms/assets/images/images/process-visu-page-fragment.png b/modules/pages-and-forms/images/process-visu-page-fragment.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/process-visu-page-fragment.png rename to modules/pages-and-forms/images/process-visu-page-fragment.png diff --git a/modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-bdm.png b/modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-bdm.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-bdm.png rename to modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-bdm.png diff --git a/modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-contract.png b/modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-contract.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-contract.png rename to modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-contract.png diff --git a/modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-form-preview.png b/modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-form-preview.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-form-preview.png rename to modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-form-preview.png diff --git a/modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-form.png b/modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-form.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-form.png rename to modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-form.png diff --git a/modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-initial-form.png b/modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-initial-form.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-initial-form.png rename to modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-initial-form.png diff --git a/modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-operations.png b/modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-operations.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-operations.png rename to modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-operations.png diff --git a/modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-select-properties.png b/modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-select-properties.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-select-properties.png rename to modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-select-properties.png diff --git a/modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-variables.png b/modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-variables.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooom-check-mail-variables.png rename to modules/pages-and-forms/images/rta-mail/rta-mail-template-ooom-check-mail-variables.png diff --git a/modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooomprocess.png b/modules/pages-and-forms/images/rta-mail/rta-mail-template-ooomprocess.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/rta-mail/rta-mail-template-ooomprocess.png rename to modules/pages-and-forms/images/rta-mail/rta-mail-template-ooomprocess.png diff --git a/modules/pages-and-forms/assets/images/images/widget_switch_mapping.png b/modules/pages-and-forms/images/widget_switch_mapping.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widget_switch_mapping.png rename to modules/pages-and-forms/images/widget_switch_mapping.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/autocomplete.png b/modules/pages-and-forms/images/widgets/autocomplete.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/autocomplete.png rename to modules/pages-and-forms/images/widgets/autocomplete.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/button.png b/modules/pages-and-forms/images/widgets/button.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/button.png rename to modules/pages-and-forms/images/widgets/button.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/chart.png b/modules/pages-and-forms/images/widgets/chart.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/chart.png rename to modules/pages-and-forms/images/widgets/chart.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/checkbox.png b/modules/pages-and-forms/images/widgets/checkbox.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/checkbox.png rename to modules/pages-and-forms/images/widgets/checkbox.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/checklist.png b/modules/pages-and-forms/images/widgets/checklist.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/checklist.png rename to modules/pages-and-forms/images/widgets/checklist.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/containers.png b/modules/pages-and-forms/images/widgets/containers.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/containers.png rename to modules/pages-and-forms/images/widgets/containers.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/currency-input.png b/modules/pages-and-forms/images/widgets/currency-input.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/currency-input.png rename to modules/pages-and-forms/images/widgets/currency-input.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/datatable.png b/modules/pages-and-forms/images/widgets/datatable.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/datatable.png rename to modules/pages-and-forms/images/widgets/datatable.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/datepicker.png b/modules/pages-and-forms/images/widgets/datepicker.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/datepicker.png rename to modules/pages-and-forms/images/widgets/datepicker.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/datetimepicker.png b/modules/pages-and-forms/images/widgets/datetimepicker.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/datetimepicker.png rename to modules/pages-and-forms/images/widgets/datetimepicker.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/fileviewer.png b/modules/pages-and-forms/images/widgets/fileviewer.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/fileviewer.png rename to modules/pages-and-forms/images/widgets/fileviewer.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/image.png b/modules/pages-and-forms/images/widgets/image.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/image.png rename to modules/pages-and-forms/images/widgets/image.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/input.png b/modules/pages-and-forms/images/widgets/input.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/input.png rename to modules/pages-and-forms/images/widgets/input.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/link.png b/modules/pages-and-forms/images/widgets/link.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/link.png rename to modules/pages-and-forms/images/widgets/link.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/page-rows-and-widgets.png b/modules/pages-and-forms/images/widgets/page-rows-and-widgets.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/page-rows-and-widgets.png rename to modules/pages-and-forms/images/widgets/page-rows-and-widgets.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/radio.png b/modules/pages-and-forms/images/widgets/radio.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/radio.png rename to modules/pages-and-forms/images/widgets/radio.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/rich-text-area.png b/modules/pages-and-forms/images/widgets/rich-text-area.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/rich-text-area.png rename to modules/pages-and-forms/images/widgets/rich-text-area.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/savebutton.png b/modules/pages-and-forms/images/widgets/savebutton.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/savebutton.png rename to modules/pages-and-forms/images/widgets/savebutton.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/select.png b/modules/pages-and-forms/images/widgets/select.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/select.png rename to modules/pages-and-forms/images/widgets/select.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/table.png b/modules/pages-and-forms/images/widgets/table.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/table.png rename to modules/pages-and-forms/images/widgets/table.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/text-area.png b/modules/pages-and-forms/images/widgets/text-area.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/text-area.png rename to modules/pages-and-forms/images/widgets/text-area.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/text.png b/modules/pages-and-forms/images/widgets/text.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/text.png rename to modules/pages-and-forms/images/widgets/text.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/title.png b/modules/pages-and-forms/images/widgets/title.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/title.png rename to modules/pages-and-forms/images/widgets/title.png diff --git a/modules/pages-and-forms/assets/images/images/widgets/upload.png b/modules/pages-and-forms/images/widgets/upload.png similarity index 100% rename from modules/pages-and-forms/assets/images/images/widgets/upload.png rename to modules/pages-and-forms/images/widgets/upload.png diff --git a/modules/pages-and-forms/pages/assets.adoc b/modules/pages-and-forms/pages/assets.adoc index fbf9f3947d..aed60a12fc 100644 --- a/modules/pages-and-forms/pages/assets.adoc +++ b/modules/pages-and-forms/pages/assets.adoc @@ -34,7 +34,7 @@ To add and use this asset: . Create a JavaScript expression that calls the "hi" function. . Add an input widget linked to the "name" variable and a text widget linked to the hi variable. -image::images/images-6_0/jsasset.png[JS asset] +image::images-6_0/jsasset.png[JS asset] . Click on the preview button. You will see a page containing the welcome message. The name will change when you change the value of the name variable. @@ -60,7 +60,7 @@ For example, you can create a file mycss.css with this content: . Select this widget. . In the property panel add your CSS class + -image::images/images-6_0/cssasset.png[CSS asset] +image::images-6_0/cssasset.png[CSS asset] . Click on the preview button. You will see white text on a gray background. diff --git a/modules/pages-and-forms/pages/create-or-modify-a-page.adoc b/modules/pages-and-forms/pages/create-or-modify-a-page.adoc index 3e1dde6cd6..73ac6bb18c 100644 --- a/modules/pages-and-forms/pages/create-or-modify-a-page.adoc +++ b/modules/pages-and-forms/pages/create-or-modify-a-page.adoc @@ -119,7 +119,7 @@ An example on how to use a Bonita fragment: xref:ROOT:customize-display-process- == Responsiveness You can optimize the page or form design for a given device type by configuring xref:ROOT:widget-properties.adoc[device-specific values for the Width property] for widgets. Use the a device types bar in the Page editor to choose the target device type. -image:images/images-6_0/pb-resolution.png[Device type selection] +image:images-6_0/pb-resolution.png[Device type selection] == Modify an element @@ -145,7 +145,7 @@ The preview displays the element as it would be displayed on the selected type o You can export a page or a layout to deploy it in Bonita Admin Application as a custom page. + You can export any element to import it into another UI Designer. + -To export an element, click the *_Export_* button image:images/images-6_0/pb-export.png[Export button] on the Page editor or the UI Designer home page. A zip file is downloaded to your computer. It contains a Bonita custom page, which is also suitable for import into another UI Designer. + +To export an element, click the *_Export_* button image:images-6_0/pb-export.png[Export button] on the Page editor or the UI Designer home page. A zip file is downloaded to your computer. It contains a Bonita custom page, which is also suitable for import into another UI Designer. + After export you can modify your page or layout code by directly editing the code located in _resources_ folder. Be aware that such a modification to the code will work when the page or layout is deployed in the Bonita Runtime, but it may be broken if you import the page into another UI Designer. @@ -155,7 +155,7 @@ To import elements in another Studio, you can export pages and forms in the proc == Import an element -To import an element from another UI Designer, go to the UI Designer home page and click the *_Import_* button image:images/images-6_0/pb-import.png[Import button]. When you import a page, layout, form or fragment, its dependencies (such as custom widgets and fragments used) are automatically be imported too. + +To import an element from another UI Designer, go to the UI Designer home page and click the *_Import_* button image:images-6_0/pb-import.png[Import button]. When you import a page, layout, form or fragment, its dependencies (such as custom widgets and fragments used) are automatically be imported too. + [WARNING] ==== diff --git a/modules/pages-and-forms/pages/custom-widgets.adoc b/modules/pages-and-forms/pages/custom-widgets.adoc index 9d67b8207a..766bd62abb 100644 --- a/modules/pages-and-forms/pages/custom-widgets.adoc +++ b/modules/pages-and-forms/pages/custom-widgets.adoc @@ -132,7 +132,7 @@ function ($scope) { [.symptom] When i drag and drop my custom widget in my page **editor**, i see nothing. -image::images/no_editor_widget.png[Widget not display in editor] +image::no_editor_widget.png[Widget not display in editor] [.cause]#Potential cause# diff --git a/modules/pages-and-forms/pages/customize-display-process-monitoring.adoc b/modules/pages-and-forms/pages/customize-display-process-monitoring.adoc index 4295a34ed3..a47d93b48c 100644 --- a/modules/pages-and-forms/pages/customize-display-process-monitoring.adoc +++ b/modules/pages-and-forms/pages/customize-display-process-monitoring.adoc @@ -17,7 +17,7 @@ To do so: . From Bonita Studio coolbar, click on the *_Applications_* icon, and open the *_Administrator Application_* . Go to the *_Resources_* menu, filter by page, and find the *_Bonita Admin Process Visualization_* or *_Bonita Admin Case Visualization_* page (you may have to click on the *_Load more resources_* link) -. Export the page by clicking on the *_Export_* button image:images/images-6_0/pb-export.png[Export button] +. Export the page by clicking on the *_Export_* button image:images-6_0/pb-export.png[Export button] . From Bonita Studio coolbar, click on the *_UI Designer_* icon to open the UI Designer . Import the page in the UI Designer @@ -35,7 +35,7 @@ Open it, to understand its content. + As you can see, it embeds the *_bpmnVisu_* custom widget, and includes some variables to get the BPMN diagram, and information about the process or case. + Note that it also includes a variable to check the availability of the feature, and another one (*_allCaseInfo_*) dedicated for testing. -image:images/process-visu-fragment-variables.png[Process visualization fragment variables] +image:process-visu-fragment-variables.png[Process visualization fragment variables] [NOTE] ==== @@ -49,7 +49,7 @@ Selecting the fragment in the white board, you can see a *_Bindable fragment dat From your page, create a processId or caseId variable, which will contain the id of the required process or case you want to monitor. -image:images/process-visu-page-fragment.png[Process visualization page fragment variable, 300] +image:process-visu-page-fragment.png[Process visualization page fragment variable, 300] [NOTE] ==== diff --git a/modules/pages-and-forms/pages/fragments.adoc b/modules/pages-and-forms/pages/fragments.adoc index 3bfbc1d643..55aaf7d2d0 100644 --- a/modules/pages-and-forms/pages/fragments.adoc +++ b/modules/pages-and-forms/pages/fragments.adoc @@ -45,7 +45,7 @@ When you add a variable to a fragment, specify whether the variable will be expo For example, take a fragment called "MyFragment". This fragment has two variables, one exposed (exposedVariable) and the other not (notExposedVariable). When you add this fragment to a page in the Page editor, you can bind the exposedVariable with a variable defined in the page. -image::images/images-6_0/fragment.png[Exposing variables when adding a fragment to a page] +image::images-6_0/fragment.png[Exposing variables when adding a fragment to a page] At runtime, when fragment and page variables are bound, data changes can be made in either the page or the fragment. diff --git a/modules/pages-and-forms/pages/manage-control-in-forms.adoc b/modules/pages-and-forms/pages/manage-control-in-forms.adoc index f9be1296cf..cfe5cbaa48 100644 --- a/modules/pages-and-forms/pages/manage-control-in-forms.adoc +++ b/modules/pages-and-forms/pages/manage-control-in-forms.adoc @@ -9,7 +9,7 @@ You will design a simple leave request management process using Bonita 7 and beyond: + First things first, draw the wireframe of the process. In Bonita Studio, since the instantiation of a new leave request happens at pool level, add a simple validation task, rename the pool _Leave request management_, and rename the lane _manager_, as shown here: -image::images/leave_request_management_process.png[Simple process] +image::leave_request_management_process.png[Simple process] Then, define a business object that will hold the leave requests data when the process instances are ongoing, and store it when the instances are archived: In Bonita Studio menu, go to *Development* > *Business Data Model* > *Manage* option, and add a business object named _LeaveRequest_, with 4 attributes: @@ -35,7 +35,7 @@ Each entry of the contract is bound to a business object property: ... as shown here: -image::images/ContractSimple.png[Leave Request - Instantiation contract] +image::ContractSimple.png[Leave Request - Instantiation contract] You can also add constraints on the contract inputs in the *Constraints* tab. @@ -51,11 +51,11 @@ By default, this form contains a *form container* with 4 *widgets* matching the ... as shown here: -image::images/GeneratedForm.png[Generated form] +image::GeneratedForm.png[Generated form] You can check what it will look like once deployed by clicking on *Preview*, as shown here: -image::images/GeneratedForm-preview.png[Generated form preview] +image::GeneratedForm-preview.png[Generated form preview] == Basic contract validation and constraints @@ -66,7 +66,7 @@ You can notice that: If one of the input constraints is invalid, an error message is displayed below the input field. In the example, the only input constraint is *required*, so an error message is displayed if you edit and reset a field, as shown here: -image::images/GeneratedForm-preview-error.png[Form is invalid] +image::GeneratedForm-preview-error.png[Form is invalid] Once all fields have values, the form can be submitted, the contract validated by the process, and the new process instance can be started. @@ -131,7 +131,7 @@ In the same way, to show the user which inputs are valid, edit the CSS file to a In the UI Designer preview, the form looks like it is shown here: -image::images/preview-feedbackon-inputs.png[Leave Request - filling form] +image::preview-feedbackon-inputs.png[Leave Request - filling form] NOTE: The properties of the form controls also apply to the $form variable. + So in this case, the $form variable has the properties $invalid, $valid, $pristine and $dirty dependending on the value of each of its controls: if one of the controls has a property set to true then the $form matching property is set to true. @@ -185,7 +185,7 @@ To hide these fields when no error are detected, go to the *Hide* property of ea as shown here: -image:images/errorPanelFragment-required-properties.png[Leave Request - errorPanel - required - properties] image:images/errorPanelFragment-date-properties.png[Leave Request - errorPanel - date - properties] +image:errorPanelFragment-required-properties.png[Leave Request - errorPanel - required - properties] image:errorPanelFragment-date-properties.png[Leave Request - errorPanel - date - properties] Then, to change the default style of the *p* html tag and have a little more margin, open the _validationStyle.css_ file and add the following: @@ -200,7 +200,7 @@ Go back to the home page, and then open the leave request form again. From the palette, change the *title* widget at the top of the form. In the *text* property, write _Leave request_. + In the palette on the left, select *Fragments*, and then drag and drop the fragment just created below the form title, as shown here (from the preview): -image::images/GeneratedForm-preview-summary-error.png[Leave request - filling invalid form with error panel] +image::GeneratedForm-preview-summary-error.png[Leave request - filling invalid form with error panel] === Use a *select* widget for the leave type @@ -239,7 +239,7 @@ Server-side validation is still necessary for a secure application. For this reason, we need to add some constraints to the contract, process side, one for each rule. + Go back to the Studio, and at pool level, go to the *Execution* pane > *Contract* > *Constraints* tabs to define the constraints as shown here: -image::images/Constraints.png[Leave Request - Contract constraints] +image::Constraints.png[Leave Request - Contract constraints] The server error response message on submit when one of the constraints fails has an _explanations_ attribute. + This attribute is an array of the error message of each constraint that has failed. @@ -255,7 +255,7 @@ Inside this container, add a *text* widget. In its *CSS classes* property, type Now go back to the studio and run the process to test the form error messages on submit. + Setting a start date older than an end date will produce the following screen (given that other fields are set correctly): -image::images/InstantiationForm-errorOnSubmit.png[Leave Request - error on instantiate process] +image::InstantiationForm-errorOnSubmit.png[Leave Request - error on instantiate process] === Use frontend validation @@ -282,7 +282,7 @@ The value is: Then, on the *Number of days* input widget, set the *Min value* property to 0.5 and set the *Max value* property to `remaingDays[formInput.leaveRequest.type]`. + Doing this allows to validate the number of days value according to the leave type. -image::images/nbDays-widget-property.png[Number of days Input widget - value control] +image::nbDays-widget-property.png[Number of days Input widget - value control] Change the inputs order to give the form a more more natural flow (type before number of days). @@ -291,7 +291,7 @@ In the same way, the $error will hold the attributes *min* and *max* when value On the form, if you set a wrong input in the _number of days_ after setting the _type_ to *Personal Leave*, it looks like this: -image::images/nbDays-value-control.png[Number of days Input widget - value control -preview] +image::nbDays-value-control.png[Number of days Input widget - value control -preview] ==== Text input value control @@ -304,7 +304,7 @@ To make it required when it is displayed, change the *Required* property to an e In the *Label* property, type `Comment` and in the *Value* property, type `formInput.leaveRequest.comment`, as shown here:. -image::images/comment-widget-property.png[Leave Request - Comment Widget properties] +image::comment-widget-property.png[Leave Request - Comment Widget properties] To compell the user to enter a text that will be the right size, add some form control on this widget by setting values to _5_ to *Value min length* and _100_ to *Value max length*. @@ -313,4 +313,4 @@ In the same way, the $error will hold the attribute *minlength* and *maxlength* Run your process and test your form with an incorrect comment size; it will look like this: -image::images/GeneratedForm-preview-comment-error.png[Leave Request preview - Error on comment] +image::GeneratedForm-preview-comment-error.png[Leave Request preview - Error on comment] diff --git a/modules/pages-and-forms/pages/repeat-a-container-for-a-collection-of-data.adoc b/modules/pages-and-forms/pages/repeat-a-container-for-a-collection-of-data.adoc index 3b444b1874..0d1137ccc2 100644 --- a/modules/pages-and-forms/pages/repeat-a-container-for-a-collection-of-data.adoc +++ b/modules/pages-and-forms/pages/repeat-a-container-for-a-collection-of-data.adoc @@ -14,7 +14,7 @@ A collection is an array of data referenced by a variable. The UI Designer provi * _$item_: the element of the current iteration * _$collection_: the current collection (not available in releases earlier than 7.1.3) -image::images/images-6_0/UID_ContainerCollection.png[Collection variables] +image::images-6_0/UID_ContainerCollection.png[Collection variables] The rest of this page contains some examples of how to repeat the content of a container over a collection. @@ -36,7 +36,7 @@ In this example, the collection of data is a list of fruits. You want to display . Check the Preview, which should look something like this: -image:images/images-6_0/UID_ContainerSimpleFruits.png[Simple collection repeated] +image:images-6_0/UID_ContainerSimpleFruits.png[Simple collection repeated] A user can modify the name of a fruit by typing in the input field. @@ -66,7 +66,7 @@ This section shows how to update the container that you defined in the previous . Check the Preview, which should look something like this: -image::images/images-6_0/UID_ContainerSimpleFruitsAddRemove.png[Simple collection repeated] +image::images-6_0/UID_ContainerSimpleFruitsAddRemove.png[Simple collection repeated] A user can now add a new fruit or remove a fruit, dynamically changing the collection. @@ -137,6 +137,6 @@ This section explains how to update the container configuration to handle a stru . Check the Preview, which should look something like this: -image::images/images-6_0/UID_ContainerStructuredFruitsAddRemove.png[Simple collection repeated] +image::images-6_0/UID_ContainerStructuredFruitsAddRemove.png[Simple collection repeated] You can rename, add, and remove fruits, and add or remove countries, dynamically changing the structure of your collection. diff --git a/modules/pages-and-forms/pages/rta-mail-template.adoc b/modules/pages-and-forms/pages/rta-mail-template.adoc index 189aa0eec6..5b4955fa33 100644 --- a/modules/pages-and-forms/pages/rta-mail-template.adoc +++ b/modules/pages-and-forms/pages/rta-mail-template.adoc @@ -20,7 +20,7 @@ The process consists of a : The process will look like this: -image:images/rta-mail/rta-mail-template-ooomprocess.png[Out of office message process] +image:rta-mail/rta-mail-template-ooomprocess.png[Out of office message process] Conditions are set on the transition out of the _Check Email content_ task allowing to know which path to use. @@ -31,7 +31,7 @@ We create a *Business Data Model* to hold the user informations : * _title_: the mail title as a *STRING* * _body_: the mail body as a *STRING* with a _length_ of 2048 -image:images/rta-mail/rta-mail-template-ooom-bdm.png[Out of office message business model] +image:rta-mail/rta-mail-template-ooom-bdm.png[Out of office message business model] A business object variable will be created at pool level, named *outOfOfficeMessage*. It will to be initialized via a Groovy script with the mail template of the out of office message. + The template will be filled with the initiator information and its manager contact: @@ -82,11 +82,11 @@ This variable needs to be mapped with a contract data too. The contract will look like this : -image:images/rta-mail/rta-mail-template-ooom-check-mail-contract.png[Out of office message - Check email content - contract] +image:rta-mail/rta-mail-template-ooom-check-mail-contract.png[Out of office message - Check email content - contract] And the operation pane will look like this: -image:images/rta-mail/rta-mail-template-ooom-check-mail-operations.png[Out of office message - Check email content - contract] +image:rta-mail/rta-mail-template-ooom-check-mail-operations.png[Out of office message - Check email content - contract] ==== Out transition @@ -136,7 +136,7 @@ It will use a connector that will send the appropriate information via an extern It will look like this: On 'Check Email content' task, in the menu:Execution[Form] pane, use the pencil icon to generate a default form from the contract. + -image:images/rta-mail/rta-mail-template-ooom-check-mail-initial-form.png[Out of office message - Check email content - form] +image:rta-mail/rta-mail-template-ooom-check-mail-initial-form.png[Out of office message - Check email content - form] For a better usability, we can : @@ -164,10 +164,10 @@ For a better usability, we can : It will look like this: + -image:images/rta-mail/rta-mail-template-ooom-check-mail-select-properties.png[Out of office message - Check email content - select properties] +image:rta-mail/rta-mail-template-ooom-check-mail-select-properties.png[Out of office message - Check email content - select properties] We need to retrieve the business object _outOfOfficeMessage_ which contains the mail contents. + -We use an _External API_ variable named *outOfOfficeMessage* which uses the *context* variable business object reference link: `../{{context.outOfOfficeMessage_ref.link}}` +We use an _External API_ variable named *outOfOfficeMessage* which uses the *context* variable business object reference link `../{{context.outOfOfficeMessage_ref.link}}` We bind the attributes of *outOfOfficeMessage* to fill the *formInput* variable that is already bound to inputs. + Change the *formInput* type to _Javascript Expression_ and set the _value_ to: @@ -187,7 +187,7 @@ return { The variable pane will look like this: -image:images/rta-mail/rta-mail-template-ooom-check-mail-variables.png[Out of office message - Check email content - mail variables] +image:rta-mail/rta-mail-template-ooom-check-mail-variables.png[Out of office message - Check email content - mail variables] We will take advantage of the *Rich text area* widget to have a nice way to visualize the mail body. @@ -201,7 +201,7 @@ Add a *Rich text area* widget below the _title_ *input* widget: Click on preview. And the form will look like: -image:images/rta-mail/rta-mail-template-ooom-check-mail-form-preview.png[Out of office message - Check email content - form preview] +image:rta-mail/rta-mail-template-ooom-check-mail-form-preview.png[Out of office message - Check email content - form preview] == Run the process @@ -212,4 +212,4 @@ In the Studio, click on *Run*. An instance of the process is started and a task is available. + Take it and you will see the following form: -image:images/rta-mail/rta-mail-template-ooom-check-mail-form.png[Out of office message - Check email content - form] +image:rta-mail/rta-mail-template-ooom-check-mail-form.png[Out of office message - Check email content - form] diff --git a/modules/pages-and-forms/pages/widget-properties.adoc b/modules/pages-and-forms/pages/widget-properties.adoc index 15ba180093..a1dc0b2439 100644 --- a/modules/pages-and-forms/pages/widget-properties.adoc +++ b/modules/pages-and-forms/pages/widget-properties.adoc @@ -16,7 +16,7 @@ NOTE: In versions 7.0 and 7.0.1, a property value was specified as either a cons A property that requires a constant value is presented in the Properties panel as a radio button set, drop-down list, or number selector (for the Width property). Select the required value. -=== Dynamic - image:images/images-6_0/UID-property-bond-expression.svg[Expression icon] +=== Dynamic - image:images-6_0/UID-property-bond-expression.svg[Expression icon] Use a dynamic value field to specify a constant (the default) or an expression. Click the expression icon fx to switch from constant to expression. Click the constant icon X to switch from expression to constant. An expression can include a variable to make the property value dynamic, or can simply be the name of a variable. You can apply a filter to a variable value using a pipe. The binding to the variable is a read. If you want to write to the variable, use a bidirectional bond. @@ -33,11 +33,11 @@ Examples: | json_ |=== -=== Bidirectional bond - image:images/images-6_0/UID-property-bond-chain.png[Dynamic icon] +=== Bidirectional bond - image:images-6_0/UID-property-bond-chain.png[Dynamic icon] Use a bidirectional field to specify a read-write binding between the property value and a variable. -=== Interpolation - image:images/images-6_0/UID-property-bond-interpolation.png[interpolation icon] +=== Interpolation - image:images-6_0/UID-property-bond-interpolation.png[interpolation icon] Use an interpolation field to enter text to display in the widget. The text can include variables that are interpreted using AngularJS interpolation. When the page is displayed, the variables are replaced by the interpolated values. Specify a variable as a simple expression enclosed in double braces, using the same format as for a dynamic value field. + Example: I'm sorry, _{{ user.name | uppercase }}_. I'm afraid I can't do that. @@ -56,7 +56,7 @@ Specify the width of the widget relative to the container it is in, or to the pa You can set a different value for the width property for each device type. Select the target device type in the top bar, then set the value of the Width property. -image::images/images-6_0/pb-resolution.png[Device type selection] +image::images-6_0/pb-resolution.png[Device type selection] Example: A form has three fields, First name, Last name, and Membership number. + On a mobile device, you want the fields to occupy the maximum width of the screen, each one of a separate line. + @@ -88,13 +88,13 @@ For laptop and desktop devices, you want all three fields to be in the same line When you preview the form for each of the device types, you see the following: -image::images/images-6_0/mobile.png[Device type selection] +image::images-6_0/mobile.png[Device type selection] -image::images/images-6_0/tablet.png[Device type selection] +image::images-6_0/tablet.png[Device type selection] -image::images/images-6_0/laptop.png[Device type selection] +image::images-6_0/laptop.png[Device type selection] -image::images/images-6_0/desktop.png[Device type selection] +image::images-6_0/desktop.png[Device type selection] === CSS classes diff --git a/modules/pages-and-forms/pages/widgets-containers.adoc b/modules/pages-and-forms/pages/widgets-containers.adoc index 359e36724c..640a7fb042 100644 --- a/modules/pages-and-forms/pages/widgets-containers.adoc +++ b/modules/pages-and-forms/pages/widgets-containers.adoc @@ -1,7 +1,7 @@ == Containers +:description: The page explains how to use containers in Bonita UI Designer to structure and manage page layouts, including adding widgets, rows, and special container types like tabs, forms, and modals. - -image::images/widgets/containers.png[containers] +image::widgets/containers.png[containers] A container is a special kind of widget that contains other widgets. You can create nested containers. A typical use for containers is to control the main layout of your page. For example, if you want to create a two-column layout, you will start your page by adding two containers on the same row, each one spanning six columns of the page. A page does not need to have a container, but it is useful. + By default, a container contains one row, where you can drop component widgets or containers. You can also make the page layout dynamic by xref:ROOT:repeat-a-container-for-a-collection-of-data.adoc[repeating a container to display a collection of data]. @@ -18,11 +18,11 @@ To add a widget in a new row, a container has two dropzones where you can drop a Example 1: add a title widget in a new row above a paragraph widget: -image::images/images-6_0/create-row-top.png[drop at the top] +image::images-6_0/create-row-top.png[drop at the top] Example 2: add a paragraph widget in a new row below a title widget: -image::images/images-6_0/create-row-bottom.png[drop at the bottom] +image::images-6_0/create-row-bottom.png[drop at the bottom] When you drop a widget in one of these two zones, a new row is automatically created. diff --git a/modules/pages-and-forms/pages/widgets-displays.adoc b/modules/pages-and-forms/pages/widgets-displays.adoc index 458b8f210f..481d664cde 100644 --- a/modules/pages-and-forms/pages/widgets-displays.adoc +++ b/modules/pages-and-forms/pages/widgets-displays.adoc @@ -1,4 +1,5 @@ == Display widgets +:description: The page explains how to use display widgets in Bonita UI Designer to present various types of information. Use a display widget for information that the user can read on a page. This includes titles, paragraphs, and text. For each, you can specify the text and its alignment. There are several types of display widgets: @@ -9,7 +10,7 @@ Use a display widget for information that the user can read on a page. This incl === Table widget -image::images/widgets/table.png[table] +image::widgets/table.png[table] Use a table widget to display data in a table. In order to display the data, first define the *headers* property with a comma-separated list of column headings. + Then bind the *content* to an array of JavaScript objects. + @@ -68,7 +69,7 @@ NOTE: In embedded Table widget documentation you can found an example for border === Data table widget -image::images/widgets/datatable.png[datatable] +image::widgets/datatable.png[datatable] NOTE: Read xref:ROOT:widgets.adoc#_table_widget[Table widget] section to know how you can customize display of your data table widget. @@ -121,7 +122,7 @@ NOTE: it is only possible to filter on attributes that are searchable in the RES === Image widget -image::images/widgets/image.png[image] +image::widgets/image.png[image] Use an image widget to display an image. The image widget is able to display images from local assets or an image from a URL: @@ -132,7 +133,7 @@ Use an image widget to display an image. The image widget is able to display ima === Chart widget -image::images/widgets/chart.png[chart] +image::widgets/chart.png[chart] Use the chart widget to create a graphical display of data to ease understanding. This widget is based on angular-chart-0.8.1, which is based on Chart.js. + For information, see the http://jtblin.github.io/angular-chart.js/[Angular chart documentation] or http://www.chartjs.org/docs/[Chart.js documentation]. diff --git a/modules/pages-and-forms/pages/widgets-inputs.adoc b/modules/pages-and-forms/pages/widgets-inputs.adoc index 13691fd885..b301cceb69 100644 --- a/modules/pages-and-forms/pages/widgets-inputs.adoc +++ b/modules/pages-and-forms/pages/widgets-inputs.adoc @@ -1,4 +1,5 @@ == Input widgets +:description: Ui-designer contains different input to collect user input. Use an input widget to enable a user to provide input. In addition to the general widget properties, all input widgets have the following: @@ -12,7 +13,7 @@ The sections below describe the available input widgets. === Plain input widget -image::images/widgets/input.png[input] +image::widgets/input.png[input] There are four types of input: @@ -23,7 +24,7 @@ There are four types of input: === Currency input widget -image::images/widgets/currency-input.png[currency-input] +image::widgets/currency-input.png[currency-input] Use the currency input widget to input or display financial data. + The widget is flexible enough to allow any currency, tune the number of decimal digits, choose the symbol position. + @@ -31,8 +32,8 @@ Decimal and thousands separators can be also fine-tuned. === Text area and rich text area widgets -image::images/widgets/text-area.png[text-area] -image::images/widgets/rich-text-area.png[rich-text-area] +image::widgets/text-area.png[text-area] +image::widgets/rich-text-area.png[rich-text-area] Use the text area input widgets on a form or page to collect large text. + The rich text area allows the user to format and style their input, add images, links, and so on. + @@ -40,13 +41,13 @@ You can customize the toolbar for the end-users by selecting options among the a === Autocomplete widget -image::images/widgets/autocomplete.png[autocomplete] +image::widgets/autocomplete.png[autocomplete] Use an autocomplete widget to offer the user a list of possible values based on data entered in the field. For example, in a firstName field, if the user types _chri_, the values _chris_, _christine_, _christian_, _christiane_ are proposed. The user selects the correct value. To define the *available values*, bind a data source to initialize the suggestions. For suggestions that are an array of objects, you can specify a *displayed key* to identify the attribute to show as a suggestion in the widget. The value must be bound to a variable that will hold the selected suggestion. === Select widget -image::images/widgets/select.png[select] +image::widgets/select.png[select] Use a select widget to offer the user a drop-down list of values. The user selects the required value. + The *available values* property is used to populate the list of available values. Alternatively for simple data, you can provide a comma-separated list of values (for example, red, green, blue). + @@ -54,13 +55,13 @@ You can also use data binding and specify a variable to populate the list of ava === Checkbox widget -image::images/widgets/checkbox.png[checkbox] +image::widgets/checkbox.png[checkbox] Use a checkbox widget to create a unique checkbox. The value property will be true or false, depending on the checked value of the checkbox. === Checklist widget -image::images/widgets/checklist.png[checklist] +image::widgets/checklist.png[checklist] Use a checklist widget to create a set of checkboxes for the available values, from which the users picks any number of values. To define the *available values*, you can provide a comma-separated list for simple values (for example: red, green, blue), or bind to a variable that holds an array of values. + If the values are JavaScript objects, you can also specify a *displayed key* that identifies the attribute to be used to label the checkboxes and a *returned key* so *selected value* will return only a specific key rather that the whole corresponding object. @@ -71,7 +72,7 @@ WARNING: Do not bind the *Selected values* property to a specific item from the === Radio buttons widget -image::images/widgets/radio.png[radio] +image::widgets/radio.png[radio] Use a radio button widget to create a set of radio buttons for the available values, from which the user picks one value. + To define the *available values*, you can provide a comma-separated list for simple values (for example: red, green, blue), or bind to a variable that holds an array of values. + @@ -82,7 +83,7 @@ The selected value should be bound to a variable that will hold the data for the [#date-picker] === Date picker widget -image::images/widgets/datepicker.png[datepicker] +image::widgets/datepicker.png[datepicker] Use a Date picker widget to display a calendar from which the user can select a date or set a date manually (e.g., a date of birth). + To select a date and a time (e.g., to schedule a meeting), use the Date time picker widget instead. @@ -106,7 +107,7 @@ The calendar can be localized with the usual localization mechanism (localizatio === Date time picker widget -image::images/widgets/datetimepicker.png[datetimepicker] +image::widgets/datetimepicker.png[datetimepicker] Use a Date time picker widget to display a calendar from which the user can select a date and a time or set them manually (e.g., to schedule a meeting). + To select only a date (e.g., a date of birth), use the Date picker widget instead. @@ -125,13 +126,13 @@ The calendar can be localized with the usual localization mechanism (localizatio === File upload widget -image::images/widgets/upload.png[upload] +image::widgets/upload.png[upload] Use an upload widget to perform a file upload (POST) on the specified *URL*. Data returned by the server is stored in the *value* property. === Button widget -image::images/widgets/button.png[button] +image::widgets/button.png[button] Use a button widget to enable to user to trigger an action. The button can perform a `PUT`, `POST`, `GET` (from 7.1.3), or `DELETE` (from 7.1.3) request and send data to a given URL. + You can use a variable to hold the resulting data after success or failure. @@ -152,7 +153,7 @@ When inside a form container, the button is automatically disabled while the for === Save button widget -image::images/widgets/savebutton.png[savebutton] +image::widgets/savebutton.png[savebutton] Use the Save button widget to store data in the browser LocalStorage. For instance, to let users save the draft of the current form, bind the *formInput* variable of your form to the *value* property. diff --git a/modules/pages-and-forms/pages/widgets.adoc b/modules/pages-and-forms/pages/widgets.adoc index 35b3f2b170..e044bb49e1 100644 --- a/modules/pages-and-forms/pages/widgets.adoc +++ b/modules/pages-and-forms/pages/widgets.adoc @@ -14,7 +14,7 @@ A page consists of widgets that are arranged in rows, and optionally, containers The UI Designer provides a set of default widgets that you can use to design a page. The default widgets are available from the palette panel, which is on the left side of the Page editor. A widget has properties that control how it appears and how it is used. There are some general properties that all widgets have, and some properties that are specific to the widget type. You can also create xref:custom-widgets.adoc[custom widgets]. Each widget in the palette has a description. To show a widget description, just roll over the widget in the palette. -image::images/widgets/page-rows-and-widgets.png[page-rows-and-widgets-palette] +image::widgets/page-rows-and-widgets.png[page-rows-and-widgets-palette] include::widgets-containers.adoc[] @@ -26,7 +26,7 @@ include::widgets-displays.adoc[] == File viewer widget -image::images/widgets/fileviewer.png[fileviewer,align="left"] +image::widgets/fileviewer.png[fileviewer,align="left"] Use the file viewer widget to preview or download a file or a process document in any UI Designer artifact (page or form for instance). You can display a document in a modal dialog box or directly in a page. @@ -46,7 +46,7 @@ Limitations: == Rich Text Area widget -image::images/widgets/rich-text-area.png[rich-text-area,align="left"] +image::widgets/rich-text-area.png[rich-text-area,align="left"] [CAUTION] -- @@ -80,7 +80,7 @@ Image below shows wizard of switch widget behaviour This action is not available for containers. ==== -image::images/widget_switch_mapping.png[widget_switch_mapping] +image::widget_switch_mapping.png[widget_switch_mapping] In this wizard, select or type the widget to switch to, then click *Show properties*.