Designing and customizing the experience

<< Click to Display Table of Contents >>

Navigation:  » No topics above this level«

Designing and customizing the experience


Once you have created a site, as described at Creating a site, you can 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 site.


Before you start

The following steps presume you have created a site and have a Bizagi project set to use Experience Design features (including Stakeholders).


What you need to do

The following steps describe how to create your first site.


1. Build links to create cases (process instances).

Enable 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 a 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 Automation Service subscription with two Stakeholders: Guest and Host, who have different contexts, cases and collections.

In this projects, users who belong to either Stakeholder can log into the Bizagi Work Portal and start to book hotel rooms, add hotels, etc.




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


Follow these steps to quickly build a first site with the most commonly 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 the mouse pointer over a button or link, and click Link editor located in the floating menu.




1.2 The Link Editor appears, Click Processes.




1.3 The Select a Process picklist appears. Select the process to which you want to connect the Button or Link.




Click 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 or Searches or using the information from cases created.

Here is how to display information retrieved from these sources:


2.1 Include a bundle in the Site. Hover the mouse pointer over the template 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 how the site retrieves data from a Stakeholder.




2.2 Select the Stakeholder and context that will provide the data.

By default, when you select 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 (Collections, Searches, or Cases) to provide the information and click Next.




2.5 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 you have selected the data source, map the fields of the control to the attributes of the connection. If a field is empty, the control will not display any data in the 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 links to anywhere).

For example. when a user clicks the image of the results, there should be a redirection to another page where you can display detailed information.

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 choose the page to which that field will redirect the user when clicked.

Select the Entity from where the information will be extracted. If the page does not exist, you can create it by clicking the Create a new page button.




Click Finish to save the configuration for this bundle.


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

For connections to a Search, you need 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.

You can set an Entity to establish context in front of the Bundle's page link. If no Entity is given, then the context of the pages linked remains the same, the Stakeholder.

When you define an Entity in front of the redirection link the context of the target page changes and the starting point of data navigation will be a different entity of the data model.


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




When a page is contextualized (that is, the main entity for navigation is NOT the Stakeholder but another entity), the page displays a cyan bar showing the 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 for use. To make it available, you now need to publish the site.


4. Publish your site

Publish your site to make it available for a production environment to your end users.

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