refactor: move images of the "page and form" module

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.
 

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]
 ====

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#

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]
 ====

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.
 

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]

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.

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]