How to create a modal window in UI Designer
A nice aspect of Bonita UI Designer is that it allows users to apply or customize styles to the page as per their requirements through CSS.
Throughout this tutorial you will see how to build a modal window using only CSS. Let’s get started by creating some content. You will need a container which will end up being our modal and some other content on top of which that modal will be displayed.
Display a container on top of all other elements
Create a CSS file with the following content.
.Modal-content {
position: absolute;
width: 80%;
left: 0;
right: 0;
margin: 5% auto;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
padding: 2em;
}
Note that the name of the class used follows BEM methodology. |
To use that file in the UI Designer you need to upload it as a page asset.
To do so, open your page. Go to the Assets
section at the bottom of the screen and click on Add a new asset
.
Select CSS
type, Local
source then upload your CSS file.
It will be added to the page and all classes will be available and accessible from the property CSS classes
of any element.
Now lets add Modal-content
to the container property CSS classes
.
Check out the result by hitting the Preview
button.
While working on your CSS file, one could serve its local CSS file using a local server. |
Add an overlay to make underneath elements inaccessible
Add a new container and move the Modal-content
container into the overlay container in order to to have it on top.
Add the following code to CSS file.
.Modal-overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .4);
z-index: 100;
}
You now need to add the Modal-overlay
class to our overlay container.
Take control over the modal
There is many other approach to deal with how and when to display a that modal with the UI designer.
Here is one which could scale nicely with multiple modals.
The creation
Now that you got a modal you need to take control over when to display it.
You will start by creating a JSON variable with an array called modals
.
So go to the Variables
section at the bottom of the screen and click on Create a new variable
.
Give it the name modals
and JSON
type. It will take for value an empty array []
.
Now bind the modals
variable to the Collection
property of the Modal-overlay
container.
That would have for effect to mask the modal whenever the array is empty.
Also anything which add an object to the array modals
will display a new modal.
For the purpose of this tutorial you will do that with a button.
Lets add a button and configure the Action
property with Add to collection
then bind the modals
variable to the Collection
property.
You can test the result using the preview.
Ok now close that modal
A direct follow up to the modal creation is to close it.
The previous method allowed us to use another action from the button widget.
First add a button in the modal and configure the Action
property with Remove from collection
.
Then bind the modals
variable to the Collection
property.
You need to define which object will be removed and you can do that by selecting Item
for the Remove
property and adding the $item
variable to Item to remove
.
Here $item
is available because it is in a repeated container context.
Here is the result of that tutorial