Skip to content

Custom Layouts

Creating a custom layout in Backendless is a versatile process, catering to different preferences and needs. In this chapter, we'll discuss two approaches to creating a custom layout.

Approach 1: Starting with a Predefined Layout

  1. Go to the LAYOUTS tab in the UI Builder.
  2. Choose a predefined layout that closely matches your vision, or opt for the Blank layout for full freedom.
  3. Once selected and created, you can fully modify this layout to suit your specific needs.

Approach 2: Converting a Page into a Layout

  1. Begin in the USER INTERFACE tab.
  2. Create/customize a page, crafting any functional areas you anticipate reusing across different pages.
  3. Once you're satisfied, select the top-level Page element and Click the MAKE LAYOUT button.
    make-layout-from-page.zoom80
  4. Enter a name for your new layout and click CREATE. Upon saving, the new layout will be accessible in the LAYOUTS tab.

Important

When a layout is created from a page, it is more than likely that the Page Render Area component will not be positioned where you expect it to be. In this case, make sure to open the new layout for editing and adjust the location of the component.

Editing Your Custom Layout

  • To edit your layout, visit the LAYOUTS tab.
  • Click the Edit UI and Logic icon next to your layout.

Customization Options

  • Editing a layout is similar to editing a page. You can add, move components, tweak logic, and alter styles.
  • A unique feature of a layout is the Page Render Area component. This component is movable and marks where pages linked to the layout will be displayed.

Below is a demonstration of creating a custom layout from a page. Notice how the Page Render Area is brought into the central area of the layout after it is created:

What's Next?

In the upcoming chapter, we'll delve into adding logic to your layout. We will also explore the Layout Data block, a special data model that facilitates communication between your layout and its linked pages. This feature enhances the interactivity and dynamic nature of your app, making your layout not just a static design element, but a part of your app's functionality.