The latest release in the Betty Blocks platform has introduced Page variables as a new feature in the page builder allowing you to create object variables that live on page level. Data fetched by page variables is accessible by all components on your page.
In essence, object variables are an improvement on the current data container system and will eventually replace the need for data containers. The use of object variables over data containers comes with various advantages for you as developer but also for your application end-users 😃.
Advantages of object page variables
The advantages of using object page variables over data containers are:
- Improved Performance: Object page variables only queries the data that a page actually requires. By fetching only the necessary data for each page, it reduces unnecessary data loading. This leads to faster page loading times and a smoother user experience for end-users.
- Enhanced User Experience: Faster loading times and smoother performance contribute to an overall better user experience. Users are more likely to engage with and enjoy using an application that responds quickly to their actions.
- Simplified Development: Object page variables streamline the development process by centralizing data management. Developers no longer need to manually place data containers throughout the page, reducing complexity and potential errors.
- Increased Reusability: With object page variables, developers can reuse fetched data across multiple components on the same page. This promotes reusability and reduces duplication, making pages easier to maintain and update.
- Automatic Updates: The automatic updating feature of object page variables filtering option ensures that data stays current without manual intervention.
- Clearer Data Organization: Object page variables are clearly defined and visible within the page’s data tab. This improves the organization and clarity of data usage, making it easier for developers to understand and manage the application’s data flow.
- Easier development of UI Conditional Use-Cases: With fetched data stored in page state accessible by all components, object page variables facilitate the implementation of UI conditional use-cases. This enhances an easier setup for dynamic and interactive user interfaces.
Where can I use them for?
- Master details view, where the detail view is on a separate page.
- Master details view, where the detail view is on the same page.
- Master details view to update selected record details via a Form component.
What is the released scope?
- Only page variables of the type: object.
- Filtering and sorting of object variables.
- Querying of private and public data.
- Querying of any model property kind (e.g. Project.Title) to render on the page.
- Querying of belongs-to relations (e.g. Project.Client.Name) to render on the page.
- Use of page variables in the ‘single’ rule option of the conditional component.
- Use of variable request information (is loading, is success, is error) to show or hide for example a logic component based on the ‘is loading’ value of the variable.
- New interaction function ‘Set selected record’ to filter object page variables on the ‘selected record’ of Data table or Data list components.
- New interaction function ‘Refetch page variable’ to redo the page variable query on any other event (on click, on action success, etc).
Read more about the current released and unreleased scope here.
How can I use it in practice?
Object page variables are managed in the data tab on your page.
Creating or editing an object page variable requires a Name, Model reference, and Filter. Sorting is optional.
Using an object page variable inside component options is done via the entity browser. There is a new menu item added for variables.
When clicking through on the object variable item, you will see all referenced model properties available with an auto focused search input field on top.
When clicking through, you will also see the variable request information properties. This is new in the entity browser in comparison to model data available via data components.
This variable request information properties are automatically added to all page variables. Their values are set by the platform and are most applicable in the use of the conditional component
Read more about how you can use page variables in practice here.
That was all for now, your feedback allows us to continuously improve our product. Please let us know what you think about it. Happy building! 😃
