Commit 97b2b8bb authored by julienmege's avatar julienmege Committed by benjaminParisel

Add embeded modal documentation (#2536)

* Adding documentation
parent 6f77083c
......@@ -14,6 +14,11 @@
<li translate>PUT</li>
<li translate>DELETE</li>
</ul>
<p translate>To control modal containers, the following methods are supported: </p>
<ul>
<li translate>Open modal</li>
<li translate>Close modal</li>
</ul>
</uib-tab>
<uib-tab heading="{{ 'Request' | translate }}" index="'request'">
<p translate>The <em>data sent on click</em> for POST and PUT requests must be a JavaScript Object (JSON can be used). This data will be sent in the body of the request.</p>
......@@ -36,16 +41,16 @@
<uib-tab heading="{{ 'Message' | translate }}" index="'message'">
<p translate>The following documentation applies if you need to handle the behavior on success yourself (e.g. if you build your own tasklist or any page with an iframe to display forms).</p>
<p><translate>Here is the format of the message posted to the parent frame in JSON (in the parent frame you will need to call <code>JSON.parse</code> as it is stringified before being sent):</translate>
<pre>
{
message: 'success',
status: 200,
dataFromSuccess: 'response body'
targetUrlOnSuccess: 'myTasks'
...
}
</pre>
<p><translate>For an error response, the message value is 'error' and the property <em>dataFromSuccess</em> is replaced by a property <em>dataFromError</em></translate>
<pre>
{
message: 'success',
status: 200,
dataFromSuccess: 'response body'
targetUrlOnSuccess: 'myTasks'
...
}
</pre>
<p><translate>For an error response, the message value is 'error' and the property <em>dataFromSuccess</em> is replaced by a property <em>dataFromError</em></translate>
</p>
<p translate>For an example of JavaScript code to handle the message, you can have a look at the asset <em>layout.js</em> in the default application layout (you can retrieve it in the resources section of Bonita Portal Administrator profile).</p>
</uib-tab>
......@@ -53,4 +58,9 @@
<p translate><em>Add to collection</em> or <em>Remove from collection</em> actions can be used to prepare the data before sending it to the server (e.g. if you have a process/task contract with an input that is multiple). No request will be sent to the server. The button will just update the <em>Collection</em> data which must be a variable of type array (<code>[]</code> in JSON).</p>
<p translate>The property <em>Value to add</em> can either be a JavaScript Object or a String depending on the format expected for the collection you are building.</p>
</uib-tab>
<uib-tab heading="{{ 'Modals' | translate }}" index="'modal-control'">
<p translate>The <em>Open modal</em> action can be used to open any modal container on the page. To point towards the right one, specify the ID in the button's "Modal ID" property.</p>
<p translate>The <em>Close modal</em> action will close the modal container that contains the button when it is pressed.</p>
<p translate>Any button can close a modal container that contains it when a success happens after any button action.</p>
</uib-tab>
</uib-tabset>
<uib-tabset class="tabs-left">
<uib-tab heading="{{ 'Usage' | translate }}" index="'usage'">
<p translate>Use this container to create a pop-in window which can be opened or closed with a button, and displayed over the page, form, or layout content.</p>
<p translate>To control modal containers, the following methods are available in a button: </p>
<ul>
<li translate>Open Modal</li>
<li translate>Close Modal</li>
</ul>
<p translate>Add a modal ID, as the button will need to open the right modal container. This ID must be unique within a given page, form, or layout.</p>
<p translate>A modal container doesn't work when it is embedded in another container, next to other widgets or inside a fragment.</p>
<p translate>In a form, a page, or a layout, we recommend to drop modal containers at the bottom of the editor content.</p>
<p translate>To embed a pop-in into another pop-in at runtime, drop the first modal container at the bottom, drop the second modal container below the first one, and drop the button that opens the second pop-in within the first modal container.</p>
</uib-tab>
<uib-tab heading="{{ 'Control' | translate }}" index="'modal-control'">
<p translate>To open a modal window it is enough to input a modal ID in the properties, to create a button,
select <em>Open modal</em> in the Action property, and fill in the right modal ID. The button should be
located outside of the modal container.</p>
<p translate>To close a modal window, put a button inside the modal that you wish to close and select the <em>Close
modal</em> action.</p>
</uib-tab>
<uib-tab heading="{{ 'Style' | translate }}" index="'style'">
<p translate>This modal is based on ui-bootstrap implementation. It is possible to change the size or the style
of the modal.</p>
<h4>Size</h4>
<p translate>The modal size can be selected in the widget <em>Size</em> properties. Options available are small,
medium or large, which will control the width of the modal.</p>
<h4>Style</h4>
<p translate>The modal style can be improved by using the <em>modal-body</em> specific class into the <em>CSS
Classes</em> property field.</p>
<p translate>Another possibility would be adding different containers inside the modal and specify any of the
following classes:</p>
<div class="row modal-help">
<div class="row modal-row" >
<div class="col-xs-4 col-sm-6">
modal-header
</div>
</div>
<div class="row modal-row">
<div class="col-xs-4 col-sm-6">
modal-body
</div>
</div>
<div class="row modal-row">
<div class="col-xs-4 col-sm-6">
modal-footer
</div>
</div>
</div>
<h4>Animation</h4>
<p translate>It is possible to deactivate the animation when the modal appears. The main usage of this option would be to create a wizard, where several modal containers are displayed in a sequence.</p>
</uib-tab>
</uib-tabset>
......@@ -7,6 +7,7 @@
"icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"20\"><rect x=\"-1\" y=\"-1\" width=\"5.1\" height=\"3.2\" fill=\"none\"/><path d=\"m49.5 5.9l0-2.5 -0.9 0 0 2.5 0.9 0zm0 4.1l0-2.4 -0.9 0 0 2.5 0.9 0 0-0.1zm0 4.2l0-2.5 -0.9 0 0 2.5 0.9 0zm-0.9 3.3l0.9 0 0-1.7 -0.9 0 0 0.9 0 0.8zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6 0l2.7 0 0-0.9 -2.7 0 0 0.9zm-4.6-1.7l0 1.7 2.7 0 0-0.9 -1.8 0 0-0.9 -0.9 0 0 0.1zm0-4.2l0 2.5 0.9 0 0-2.5 -0.9 0zm0-4.1l0 2.5 0.9 0 0-2.5 -0.9 0zm0-4.2l0 2.5 0.9 0 0-2.5 -0.9 0zm2.7-3.3l-2.7 0 0 1.7 0.9 0 0-0.8 1.9 0 0-0.9 -0.1 0zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.7 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm4.6 0l-2.7 0 0 0.9 2.7 0 0-0.9zm2.7 0l-0.9 0 0 0.9 0 0.9 0.9 0 0-1.7z\" style=\"fill:#fff;stroke:null\"/><rect x=\"0.6\" y=\"3.7\" width=\"0.9\" height=\"15.3\" style=\"fill:#fff;stroke-width:null;stroke:#fff\"/><rect y=\"18.7\" width=\"45\" height=\"1.2\" style=\"fill-opacity:null;fill:#fff;stroke-width:null;stroke:#fff\"/></svg>",
"description": "Group of widgets used to define the arrangement of the page elements. Its content is display like in modal.",
"order": 0,
"hasHelp": true,
"properties": [
{
"name": "modalId",
......
......@@ -42,7 +42,7 @@
display: none;
}
> .active{
> .active {
display: block;
}
}
......@@ -65,3 +65,19 @@
.Guidance-definitionList dt {
margin-top: 2em;
}
.modal-help {
display: block;
border: 1px dashed;
border-color: #9292a4;
box-shadow: -15px 15px 0px -8px lightgrey;
margin: 0 0 30px 10px;
}
.modal-row {
box-shadow: 1px 1px 4px #ccc;
display: block;
border: 1px dashed;
border-color: #9292a4;
margin: 10px 10px 10px 10px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment