Data Models¶

An application built with UI Builder runs on top of a UI engine designed to streamline performance which yields more responsive graphical interfaces and better user experience. One of the design principles of the UI engine is the separation between the UI layer responsible for component rendering and the data layer. The data layer consists of the data models and logic. The diagram below illustrates the layers:

layers-visual-data

A typical screen/page in an application may include multiple data models. Consider the following schematic model of a UI page:

app-frame-data-models

The page consists of several functional "zones". Each zone may receive its information from different sources such as database queries and/or API services. As data becomes available or if and when it changes, it would make sense to update only the zone that is response for the new/updated data. By using data models, you can get exactly that behavior.

Important

For information on how rendering occurs, see the UI Rendering section of this guide.

When each zone gets its own data model, the layered view of the page skeleton shown above might look as shown below. The data models illustrated in the diagram make up the data layer described above:

multiple-data-models

Page Data¶

Notice in the image above Page Data Model sits under the individual zone data models. It is a data model which is present in all pages, it is automatically provided by the UI Builder engine. Individual data models are defined and assigned by the developer. Page Data is an object, a key/value data structure. Keys are strings, values can be of any data type, including objects. Unlike zone specific data models, Page Data is visible to all components placed on the page. The best use of Page Data is when you need to establish page-wide communication between the UI components and their logic. Modifying data in Page Data has direct impact on UI rendering and ultimately the performance of your UI application.

App Data¶

The bottom layer of the diagram is App Data Model, a data model that sits under Page Data. It is a special data model that is shared across all pages in an UI Builder applications. App Data is an object with a key/value structure. Any data placed into App Data is visible by all pages. This is a mechanism developers can use to share data between pages - anything placed into App Data by one page is accessible by all other pages. Just like with Page Data, it is important to understand the consequences with the UI rendering of the page when App Data is updated.