Designing and customizing the experience

<< Click to Display Table of Contents >>

Navigation:  Cloud applications - Alpha version > Bizagi Sites - Alpha version > Creating a site >

Designing and customizing the experience


Once you have created a site, as described at Creating a site, you may start building the UI for your chosen Stakeholders. This section provides a quick guided exercise for you to get started with Bizagi Sites and produce a sample as the one shown below.


Before you start

Bear in mind that the following steps part from having a created Site and having a Bizagi project set to use Experience Design features (i.e Stakeholders).


What you need to do

The following outline of steps describe how to get started and create your first portal.


1. Links to create cases (process instances).

Enable the creation of new cases for one or more processes.


2. Add collections, searches and pending cases.

Add collections, searches and cases for a given Stakeholder and context within your project.


3. Manage Contextualized pages

Create pages that display information related to an specific entity other than the Stakeholder.


4. Publish your site

Make your site available for users in the environment of your choice.








Let's assume that in our company, we have the project Bizagi Hotels hosted in a Bizagi PaaS subscription with two Stakeholders: Guest and Host, which have different contexts, cases and collections.

In this projects, users that belong to any of the stakeholder can log into the Bizagi Work Portal and start to book hotel rooms, add Hotels, etc.




Nevertheless, the organization has decided to refuel how the users interact with the information and ease the navigation to the data collected during the normal execution of the project. In order to meet this design requirement, the organization can use Bizagi Sites to create a Site which is friendly, modern, simple to use, but aimed at that specific use case where users book hotel rooms.


Follow these steps to quickly build a first site with most common used features.


1. Links to create cases

New case instances can be created with buttons or links, related to one or more processes, using the Link editor.


1.1 Hover a button or link, and click Link editor located in the floating menu.




1.2 The Link Editor is displayed, Click Processes.




1.3 The Select a Process combo is displayed. Select the process you to connect the Button or Link.




Click on Save to apply the changes.


2. Add collections, searches and pending cases.

Data that belongs (or is bound to) a Stakeholder can be displayed through Bundles using Collections, Searches or using the information from cases created.

The following guideline explains how to display the information retrieved from these sources:


2.1 Include a bundle in the Site. Hover and click Manage Content, located in the floating menu.




2.2 By default, Bundles are defined to add fixed content. For more information about how to add fixed data, refer to Bundles.

Click Switch to Dynamic Content to change to retrieve data from a Stakeholder.




2.2 Select the Stakeholder and context where the data will be retrieved from.

By default, when selecting a Stakeholder all its contexts will be selected.




The icon BizagiSites_SelectedIcon  shows the contexts configured for each Stakeholder.

Click Next.


2.4 Select the connection type (Collection, Search, Cases) where the information will be retrieved and click Next.




2.5 According to the selection above, chose the available connection type from the list. For more information about how to connect your bundle and the available connection types, refer to Bundles.


Once selected, map the fields of the control with the attributes of the connection. If a field is empty, the control will not display any data in such field.


The entity attributes in each field correspond to attributes displayed in the List Data Template (configured in Bizagi Studio). If no Data Template has been configured, the attributes available will be the template default attributes. For more information, refer to Templates.




2.6 Configure the navigation behavior of each field (if it will link anywhere).

i.e. when user clicks the image of the results, there should be a redirection to another page in which you can display detailed information of the selected value.

If you want to create the same redirection for all the bundle's fields, mark the option I want the same link page for all attributes.


Expand the fields where you want to add a link and then choose the page where the user will be redirected.

Then select the Entity from where the information will be extracted. If the page does not exist you can create it by click the Create a new page button.




Click Finish to save the configuration for given bundle.


2.7 When connecting a control to a Collection, all data in such collection will be displayed and no filter will be displayed.

For connections to a Search, it is required to configure a Search element.


3. Manage Contextualized pages

All pages in a Site have a Context. The context is the starting point of the data model that determines how the user navigates through the set of attributes and how the information is built.


By default all Pages have the context of the Stakeholder, giving access to their collections, searches, pending cases, etc.


When a Bundle is set with navigation to other pages, the user editing the Site defines the context of those new pages.

New pages by default have the same context as the Home, that is, the Stakeholder.

In front of the Bundle's page link an Entity can be set. If no entity is given, then the context of the pages linked remains the same, that is, the Stakeholder.

However when an Entity is defined in front of the redirection page the context of that page is changed. Thus, the starting point of the data navigation will be a different entity of the data model.



Open the new page by clicking the navigation panel on the top left corner of the window and click the desired page.




When a page is contextualized (that is, the main entity for navigation is NOT the Stakeholder but another one), it will display a cyan bar showing the Entity name of the Context Entity and the Stakeholders involved.




Add as many controls as you want to display and enable their property Context Data located in the Manage Content menu.

Then, select the attribute you want to display from the Select xpath list.

For more information, refer to Controls.






At this point, your site is configured and is ready to be used. In order to use it and make it available, you will need to publish the site.


4. Publish your site

Finally, ensure you publish your site if you wish to make it available for a production environment to your end users.

For more information about this step, refer to Publishing a site.