🔮Stateful pages

In our system, there are three stateful pages: the default state page, the empty state page, and the error state page. In this guide, we will walk you through the process of creating the latter two.

Empty state page

The empty state page shows a special page when no data is available.

To implement this, it is necessary to create a special page that will be displayed when a list bound to another page is empty. The setup will consist on the following two tags, one for each of the pages involved.

• [state:default:groupname]: this tag will be added in the top-level element of the page with API list data bound to it.

• [state:empty:groupname]: this tag will be added in the top-level element of the page that will be displayed if the list connected to the previous screen is empty.

Replace groupname with any name of your choice that identifies the group of those two pages.

Please note that for this screen to be displayed, the API must return an empty list and it supports a unique API request in the same page.

Error state page

Create a special page that will be displayed when an API error happens in a specific app page.

By default, Bravo will show a generic error page (including the HTTP error code) when an API error happens. With this error page, you can customize this error page, and connect it to an app screen returning data from API, so when an API error happens, this custom error page is displayed.

There are two options to set it up:

• Error state pages: Add [state:error:groupname] in the page-level to create an error page that will be displayed when any API error happens (4XX or 5XX).

• API Error code page: Add [state:error-XXX:groupname] in the page-level to create an error page that will be displayed when a specific API error happens, replacing XXX with the corresponding error code. For instance, [state:error-404:groupname].

Then, relate the error page to a page bound to API data. This page needs to have the [state:default:groupname] tag. groupname should be replaced with a name of your choice, that creates the relationship between the two pages.

Pages with error state tags are special and have some limitations: - It's not possible to combine other tags with error stage tags. - It's not possible to bind data in pages with error state tags.

Error state and Empty pages can be only applied to Content binding. Can be used with Backend Search but not compatible with Search & Filter.

Additionally, we recommend using these tags for a better UX experience:

[refresh:pull][refresh:always]

💾 Example file

Duplicate the file below to see how to set it up!

https://www.figma.com/community/file/1385223397256185027www.figma.com