The Pages menu is your main workspace for building and structuring individual pages in an application. From here, you can add and configure widgets, components, and partials (1) and navigate the full component tree (2) with a hierarchy of all page elements.
It also gives you direct access to page resources (3)— including input variables, page variables, and authentication-related data such as the current web user — so you can connect UI elements to the right data and logic in one place.
In addition, the extended menu includes Page settings (4), where you define the page name, browser title, URL path, and access restrictions through authentication profiles.
What's on Pages menu?
Pages menu includes several panels and controls that help you manage your application pages. By default, it opens in the Page elements view, where you can access widgets, page components, and partials.
 |
ComponentsPage components serve as the fundamental building blocks for designing and developing your application's web pages. Begin by dragging and dropping elements onto the main canvas. Initially, decide on the layout for your page, choosing between a single or multi-column format. After setting up the layout on the canvas, you can incorporate additional components as needed to construct your user interface. |
|
|
WidgetsA widget is a reusable building block for your application’s user interface. It can represent anything from basic elements, such as buttons and text fields, to more advanced structures, like data tables or charts. This page element behaves just like a component - you can drag and drop it onto your page canvas. Unlike components, widgets may feel like a segment of your page, already containing layout features and some styling. |
 |
PartialsPartials tab gives you access to custom, reusable component sets within a single application. For instance, you can create a standardized header menu and use it across multiple pages. Simply drag and drop partials onto the pages where you need them. |
Tip: If you attempt to drag and drop specific components like Buttons onto the canvas without first establishing a layout, the drop will not be successful. Initially, you must drag and drop a layout component, such as a Column or a Box, onto the canvas. After the structure is set, you can then drag the necessary component, such as a Button or Media component, onto the canvas.
Page resources
Page resources panel gives you access to all data-related variables connected to the current page. It provides a single overview where you can view, search, and manage the resources that power your page’s data and logic.
At the top of the panel, use the search field to quickly locate a specific resource. Below, you’ll find a list that can include:
-
Current user variable provides user-related data based on the authentication profile selected for the page, such as the
Current web useror theBetty Blocks user(native authentication profile) -
Page variables store data within the scope of the page. These variables can be used anywhere on that page, so you only need a single query to hold data such as the title of a task
-
Object variable type can be added as a page variable in your application. For example,
finishedProject(Project model)
-
-
Input variables are typically used to receive data from outside the page, such as query parameters or values passed into the page (for example, a
`project_id`input variable)-
You can currently add variables of two kinds: Text and Number
-
Note: Additional variable kinds that will be supported soon: Object (linked to a model record), Collection (multiple model records), Custom object (a manually defined structure)
Adding new variables
All resources appear in one unified list, making it easier to see what is available without switching between tabs.
To add a new variable, click the + button. When creating a variable, you define its scope (page or input), select its kind (for example, Object or Number), and connect it to a model (if applicable). Once created, the resource becomes available for data binding in components and for use in page logic.
This panel acts as the central place to manage everything the page needs in terms of data access and state.
Component tree
Using the Component tree tab, you can view all components in a parent-child framework. Hover over each item to view a corresponding component on a page, and double-click on a component to open its options.
Alternatively, you can quickly view the component hierarchy and select the needed page elements at the bottom of a page:
Learn more about the component tree functionality in this article.
Component buttons
When you select a component on your page, the options menu at the bottom for each component includes a standard set of buttons:
|
|
Using the Convert to partial button you can convert a component together with all nested components within it to a partial. This can then be reused within your application. |
|
|
With Save as new button, you can reuse customized components across all applications that you build. A pop-up window is displayed where you can define the component name and category to which you want to assign the new component. |
|
|
Delete from page removes the selected component. A pop-up window requests that you confirm that you want the component deleted. All nested components are also deleted. |
For widgets, the Save as new and Delete from page options function similarly, but there is an additional button - instead of Convert to partial, you'll find the Lock / Unlock button. This feature is used to control modifications by restricted users, whether for widgets or page templates.
These buttons below let you preview how your page looks on different screen sizes: mobile, tablet, laptop, and fullscreen - for responsive design testing:
Page settings
Settings tab provides information specific to each page. You can assign a page name and a page title, which appears in the browser tab and is recognized by search engines. The path outlines the URL link details for the page.
This menu allows you to determine if an authentication profile is necessary to restrict access to a page or application.
.gif?width=670&height=382&name=Screen-Recording-2025-05-26-at-1%20(2).gif)
Additionally, you can configure the search engine optimization (SEO) description, which is the information shown when content is searched. You can define keywords and terms to ensure your application appears accurately in search engine results.
With special permission, one can choose between Basic and Advanced development modes. Latter enables you to select various component sets.
Any changes applied on the Settings tab need to be saved. Use the Save button to ensure that these types of changes are applied. When the page in no longer in use, press Delete page.
Save as template
Right next to Settings, you can find Save as template button which is used to make you pages reusable within your organization, at the company level or even publicly when shared via Block Store.
When saving a page as template, all the partials on this page will be converted into page components. The data and actions will not be carried over when using this page template in another application.
