Pages menu provides access to the building blocks for creating individual pages for an application. Using the various components and elements you can, for example, first design the layout of the user interface for your application. Where required, you can work with a more experienced developer to add the additional functionality required for your application.
The following explains the various tabs and elements included in the Pages menu.
 |
Components Page components are used for designing and developing your application's web pages, as they are used as building blocks in your application. 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. |
 |
Widgets Widget is a reusable component that you can use to build the user interface of your applications. Widgets can be anything from simple elements like buttons and text fields to more complex components like data tables or charts. A widget behaves just like a component, you can drag and drop them onto your page canvas. Unlike components, widgets may feel like a segment of your page, already containing layout features and some styling. |
 |
Partials Partials tab provides access to any custom reusable components within a single application. For example, you can create a standardized header menu that you want to reuse on each page of your application. Partials can be dragged and dropped onto individual pages as required. |
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.
Variables
The following articles are useful to learn more about these variables and how they work:
Component tree
Using the Component tree tab, you can view all components in a parent-child framework. Hover over each item in 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 move 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.
