At Betty Blocks, we believe app development doesn't have to be hard. With Betty Blocks' Page Builder, creating webpages is easier than ever.
In this article, you'll learn the following things in the Page Builder:
- Creating a Page
- Using Variables
- Using Components
Note: This article assumes you possess basic knowledge of the Betty Blocks platform and have an application ready to try out the subjects in this article.
In the examples, an Employee model is used, containing basic data like:
- Email address
- Date of birth
- Phone number
Feel free to extend the model to your needs, or use a different model.
Creating a Page
In this task we are going to create a webpage to show our employees by using the Page Builder. The Page Builder enables you to create webpages without typing a single line of code.
To start off, go to Pages.
After clicking the Pages button, a new screen will appear showing all pages in your application, which is probably none. You can click on
+ New page in the top-left corner to create a new one. Choose UI builder.
To get a simple but dashing look, choose Header, footer, left nav as Layout.
Choose Blank page as Content.
Finally, enter employees as Path value. This means the webpage will be shown when going to
*yourapp* part needs to be replaced with your own app url, of course.
Click Finish in the bottom-right corner and you've got yourself your first page!
Adding a Variable to a Page
We're going to create a table where some of the employees' properties are included.
First, go to the Data tab and create a Collection variable to collect all employee records. Click on
+ New variable.
Leave Context on Normal, choose Collection as Kind, name the variable employees and choose Employee as Model.
That's all there is to it. This will collect all employees in a collection to use in our webpage. Click
Save to save the variable.
Using a Dynamic Table component
This component will automatically load the records from a collection in the table. Go back the Design tab (first one) in the Pallete and search for "dynamic table". We need the second one from the image below.
Drag the Dynamic table component to your canvas and make sure it sticks. A blue line in the Page container should show.
Release the component to see 2 columns appear in the Dynamic table component.
Open the Object Tree (fourth and last tab in the Pallette).
Double-click on Dynamic table to open its settings. Click on the Data icon and click on the blue variable button (chain-link icon) to select a variable for the Dynamic table.
Choose the employees variable we created earlier and click
Select. We're not using any relations or nested collections yet.
By doing these last steps, we've set the employees collection as content for the table. Now we need to sort the data so each piece of information is shown in the correct place.
Each object within the Dynamic table has been made available through the employees_item variable. Therefore, we're using that variable in each Dynamic table column.
Click on the first
[select a variable] to set one of the properties as content in the fourth tab of the component.
A variable browser opens with the employees_item variable pre-selected. You just need to choose one of the properties. Click on full_name and then
Add an extra column to the dynamic table by clicking the dynamic table in the Object Tree and adding a child component. This is done by clicking the
+ button. Assign all columns so all properties you want to shown in your table.
Using the Dynamic Form component
Besides showing data with a table, we're also creating new data with a form.
Create a new Page, but this time call it
Repeat all steps from earlier so the page looks roughly the same.
After the Page is loaded, go to the components overview and search for "dynamic form". Only 1 result should pop up, use this one.
Drag the component to your canvas and wizard will show. No, not the "long beard/pointy hat" kind, but a menu to automatically guiding you into doing the right thing.
Fill in/select all options as follows:
- Add new record
- Choose model Employee
- Select a few properties (the ones you want to enter)
- Redirect to Other page after submit: /employees
- Click Finish
Or just watch the GIF below and see how we would do it! Spoiler alert: exactly how I just explained it.
Doing this will leave you with a neat form, and some other stuff. Take a look at this:
So now you have:
- A form
- A Custom model (called
employee) that temporarily holds the data as it being sent to...
- A processing page called
Click on the gear next to the processing page to open the action where it all happens.
In the first event, you'll see how the new record is created and the second event will redirect back to the page selected in the last step of the wizard.
After performing these steps, it's time to try it out.
Open the page containing the form and enter new Employee data. The action redirects you to the employee overview and shows the newly created employee record.
Layouts in Pages
As you've done in one of the first steps of using the Page Builder, each page can use a layout. You'll only have to create a layout once, then you can reuse it in all your pages.
For the 2 pages, we used the same Layout. Now we're changing the layout in one page, so we can see the results in the other one.
We'll are going to:
- Add menu items for our pages
- Change the color of our banner
- Choose a new image/logo
Unlocking the Layout
First we'll need to unlock our Layout. Click on the menu on the left side of your page so the Builder grey's out your layout. The content of the page should still be clear.
Now click on the lock to unlock it. This will make the layout clear, and grey's out the page's content.
Add menu items for our pages
Click on one of the existing buttons within the layout and select a page in the Link option. The page selected will be the destination whenever a user clicks on the button. After setting a new page, the Builder will show a notification, stating the layout has been changed.
Repeat as necessary for all pages in your app.
Change the color of our banner
Click on the turquoise/cyan colored banner at the top of the page. This will select a Grid column component.
Go to the Style tab (the one with the paintbrush) and select a new background color.
This can be done for every component in the Page Builder, as long as the Background checkbox in the Style tab is ticked.
Choose a new image/logo
Choosing a new color for a banner immediately makes the page look different, but now we're also going to use a new image. This can be whatever you want, so just pick one. Got it? Alright.
Note: PNG files or images with a transparent background work best.
Click on the existing logo in the banner, or add a new Image component to your page. Go to the component's Properties tab (the one with the pencil).
Click on the Image source input field and choose a new file. This can be done through:
- Uploading a new file from your computer
- Choosing a Public file in the application
- Selecting a file/image property through a variable
- Pasting a URL
Happy with your choice? Click Next and set some dimension values so the image will be reasonable size. Click Select Image and the new banner image is added to the layout!
Besided Layouts, Partials are another great way to speed up development. Where Layouts are somewhat of an overlay for your page, Partials can be used wherever you want, and combined with each other. This means they integrate with the content of your page!
Keep in mind! Changing a Partial in one page will also change it in the other one.
Let's say, we want to use the new employee form in multiple parts of our app. We already created a dynamic form, there's no need to create on again. We can use the same one over and over.
Go to the
/new-employee page and select the Dynamic form component.
Click on the Convert to partial button or click
H on your keyboard. Enter a name for the partial and pick a category.
Your partials can be found under the Partials tab in your Page Builder (next to Components). Now you can use this partial wherever you want, and it will always work exactly the same!
Prefabs are easily confused with Partials. The main reason is because you define them once, and can use them as much as you want.
See them as a configured set of components, each with their own purpose and their own styling.
What separates them, is that Prefabs are an exact copy, but not connected after placing in your page.
So you can use a Prefab and change it all you want without worrying about a different page falling apart due to the changes.
What's also nice about Prefabs, is that we provided the Page Builder with a nice collection of all kinds of them!