All Collections
Next-gen pages
Create a custom front-end for your customers using the page builder's capabilities.
56 articles
Getting started with page builderStart building your application interface by creating a new page through the pages menu.
Creating a new pageFirst steps to creating a new page via the page builder.
Viewing and compiling your first pageLearn how to view the compiled version of pages in your application.
Pages menu overviewDesign and create the user interface for an application using the extensive set of building blocks provided in the pages menu.
Navigating between componentsDiscover the components' navigation and hierarchy.
Building a page layoutCreate a simple page layout using some of the essential page builder components.
Setting up your pageDive into the use of page-building components and design a basic home page.
Page component options: aligning, positioning, and spacingLearn how to use the web-design component options to build an application’s front end.
Navigation on your pagesBest practices for building proper navigation across your Betty Blocks application.
Styling best practicesSome practical approaches to building more consistent and responsive user interfaces.
Building an advanced home pageExplore the page builder’s capabilities by building a more advanced home page with a hero image.
Pages standards & best practicesLearn what the development standards are and which best practices you should use whilst building your pages.
Page builder referenceNavigate through the page builder and see what options it has to offer.
Form componentsPage builder's form components and their interactions with actions in your application.
Layout component referenceA basic overview of layout components one can use to format web pages.
Navigation component referenceBuild the navigation for your application. Pre-built components can be customized and extended as required.
Content component referenceDiscover which content components the default set has to offer and what they are capable of.
Button component referenceAdd buttons to the user interface for your application to trigger events such as login or to show or shield specific information.
Data component referenceBuild tables and lists based on specific properties contained in one or more models from your data model.
Form component referenceLearn what kind of form components the default component set has to offer and how they can be used in your application.
List component referenceFind out which list components the default component set has to offer and what they can be applied to.
Card component referenceApply specific layout and formatting for rich media such as thumbnail images, titles, or buttons.
Logic component referenceUsing the logic component, you can set conditions to control access to, for example, specific parts of an application or web page.
Interactions referenceList of extra interactions you can come across while working with component interactions.
Pages quick menuNavigating to the pages module and using the quick menu is explained.
Page builder component sectionA list of components the default component set offers to the builders.
Working with a navigation barApply a logo and adjust the styling of your navigation bar, turn this bar into a partial or component to enable its reusability.
Working with the component treeUse the component tree to navigate to specific elements on your page. You can also access the options menu or rename the component.
Adding data to your applicationThis article contains an example of how you can display data using a data component in the page builder.
What are component interactions?Use predefined functions for creating interactions in your application.
Creating and using partialsTurning components into partials to be able to reuse them on different pages in your application.
Using the wrapper componentFind out how to install and configure the wrapper component in this article.
Setting the favicon of your applicationBranding your application with a personalised favicon.
Displaying data within your pagesWorking with data components and filtering withing the page builder.
Working with shortcut optionsShortcut solutions while adding authentication profiles, data models and their properties via the page builder.
Creating a detail pageFind out how to create and set up your first detail overview page within our platform.
How to create a delete buttonDeleting data via your applications front-end by building your own delete button.
Using display logic in your pagesDynamically showing data based on filters
Data filteringLearn how data filtering works and how to use it to filter your data in the page builder and actions.
Creating component interactionsSetting up interactions to enable users to dynamically change the content of the pages in their applications.
Showing a single taskUse case 1 of a 9 part use case series. In this article, you'll learn how to show a single task.
Showing a list of tasksUse case 2 of a 9 part use case series. In this article, you'll learn how to show a list of tasks.
Showing a list of tasks belonging to a userUse case 3 of a 9 part use case series. In this article, you'll learn how to show a list of tasks.
Showing a list of tasks created on a specific dateUse case 4 of a 9 part use case series. In this article, you'll learn how to show a list of tasks that are created on a specific date.
Showing a list of tasks created todayUse case 5 of a 9 part use case series. In this article, you'll learn how to show a list of tasks that are created on todays date.
Showing a list of users and their tasksUse case 6 of a 9 part use case series. In this article, you'll learn how to show a list of tasks with their corresponding user.
Showing a list of tasks belonging to a user with a certain statusUse case 7 of a 9 part use case series. In this article, you'll learn how to show a list of tasks with their corresponding user.
Showing a list of tasks of a logged-in user with a certain statusUse case 8 of a 9 part use case series. In this article, you'll learn how to show a list of tasks of the logged-in user with a status.
Showing a list of your own tasksUse case 9 of a 9 part use case series. In this article, you'll learn how to show a list of tasks that are yours.
Changing your page state using component valuesLearn to change page state using component values in Betty Blocks for interactive web apps.
Safe URLs using UUIDsDon't want to show the ID's of your data to the public? In this article we'll show you how to use UUID's instead.
Adding a taskUse case 1 of a 4-part use case series. In this article, you'll learn how to add a task to your application.
Updating a taskUse case 2 of a 4-part use case series. In this article, you'll learn how to update a task in your application.
Deleting a taskUse case 3 of a 4-part use case series. In this article, you'll learn how to delete a task in your application.
Assigning a taskUse case 4 of a 4-part use case series. In this article, you'll learn how to assign a task to some role in your application.