Templates
      Back to home
      1. Betty Blocks Documentation
      2. Building your application
      3. Templates

      Introduction to page templates

      This article explains what the page templates are and how to start using them in your application.

      What are page templates?

      Page templates deliver the predesigned structure for displaying your content on the web page. They serve as an ideal solution for citizen developers who already have a specific purpose standing in front of them. Instead of constructing every page from scratch, a user is able to apply some ready-to-use patterns to create pages in an application.

      So what are the advantages of using templates? First of all, they increase your work efficiency as you don’t have to spend loads of time completing some simple page layouts. Secondly, they come with explanations so you most probably won’t have any trouble constructing your page and filling it with your data. Moreover, the templates are customizable: add, delete, or replace elements whenever you need that.

      What kind of page templates does Betty Blocks offer?

      Betty Blocks provides predesigned page templates that serve different aims: display tables with your data, login forms, card views, dashboards, etc. All of them have a special preview button (enabled when you hover over a particular template) so that you can easily try every single template to make sure it suits your needs and expectations.

      Currently, there are 17 templates available on the Betty Blocks service:

      • Back office

      • CRUD with dialogs

      • CRUD with slide-out panel

      • Card and list view

      • Card view

      • Column layout configurator

      • Error pages

      • Header and footer

      • Inspirational dashboard

      • List view

      • Login and register form

      • Login form with image

      • Overview and detail view

      • Page with homepage layout

      • Profile details

      • Register form

      • Simple dashboard

       

      Using page templates

      1. Once you’ve created your application, the next thing you might do is create pages in it. Open your application’s dashboard, go to the Pages section and choose the '+' button to add a new page.

      2. Then you will be automatically redirected to the page templates screen. You would have to choose either to use a blank page to start building a page from scratch or choose one of the ready-to-use templates.

      3. Press the 'Use' button to create a new page using the template you’ve chosen, or click on 'Preview' to open a preview of the selected page.

      4. You can click on the individual icons to preview the template page in different browser views. For example, laptop, tablet, mobile, or full screen.

      5. Now fill in the name and edit the page path to your liking (use an underscore instead of a dash, for example). Also, you can set the page’s type as public (by default) or authenticated.

      If you choose it to be authenticated, you will have to select an authentication profile. By doing this, you will be able to provide access to the page for some particular role(s) in your application.

      After the latest step, the page configuration of each template will be different. For example, for data table pages you’ll have to select some particular data models, for login forms - choose authentication profiles, in other cases, you would need to select various properties: image, title, description, etc. Within most template configurations, it is possible to select partials, like header and footer.