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

      Back office template

      Manage your application data using the back office page template.

      After reading this article you’ll know the following:

      • What the back office is

      • How to create your back office using a page template

      • How to configure permissions for roles in your application

      • What kind of reconfiguring options are included in the back office

      What is the back office?

      The back office is used for managing the data in your application. Applying the back office, you can easily view, create, update, or delete records from your data models in a rather convenient way. It is intended for use by internal application users only.

      Within our platform, the back office comes in as a page template that can be set up via the page builder. Visually, it is represented as a page with a sidebar, data table, and a slide-out window (with tabs). The sidebar is used to switch between views (like Companies or Clients), the data table shows the content from a specific model, and the slide-out windows (tabs) are shown when you want to create a new record, update, or view details of the existing one.

      Below you can see the example of the back office view. This one displays the client base and enables an application’s administrator to organize the overview, view, and manage the personal information of each client. More about creating such tables in the next chapter.

      backoffice overview

      Setting the back office template

      As already mentioned, you can create a new back office from the page builder. When creating a new page, pick up the Back office template.

      Come up with a name, type of page (authenticated or public), set partials, and model with your database that will be shown on this page.

      Note: For this particular template, it's better to avoid using header and footer partials, just because they won't fit into the page that is sidebar-based. Nevertheless, if you need to reuse the sidebar from your back office page, you can turn it into a partial or auto-generate partial in the template configuration.

      When the page is generated, you’ll see it in the page builder overview. Mind the warning on top of it saying that you need to configure the permissions of the create, update, and delete actions in order to use this template. It means you can select roles in your application that will be granted permission to perform certain actions.

      In the example below, we are going to enable the admin role to view and perform actions in the back office. To do this, just click once on the free space on the right side of a page, then hit Edit permissions in the actions section (the options menu on the left). In the slide-out setting menu, tick the needed role and set the permission to Allowed. Press Save as you finish configuring it.

      Don’t forget that there are also model permissions and they have to be set as well. Check this article to learn more about it.

      In case you need another back office page, let’s say, not only for clients but also for companies, you can create it separately but then easily switch between these two back office pages. In order to enable this, you need to select a side menu (if you’re using partial) and click on Edit partial (1), then pick up the needed list item (2) and select a page with another back office page (3) - Companies in our case.

      Note: If you’re not using a partial, start from step 2.

      Press the Play button in order to compile the page and enable the changes you've made.

      Reconfiguring options

      After you've created your back office using the template, you can use multiple options on the page wrapper, even without unlocking the template. Let's have a quick look at what can be done here.

      By default, the options open on the general page overview where you can reconfigure the data table and add data table columns as explained in the Data component reference. Also, you can switch to the record view to edit and reconfigure the tabs: create, detail, and update.

      Each tab shares the same width-changing option. By setting it, you can regulate how wide you want your slide-out window to be. If you change it in one tab (e.g. create tab), it automatically applies to the rest (detail and update).

      Also, all the tabs have their own actions attached to them. You can get to editing the action in the action builder by pressing the pen button and clicking on 'Edit permissions' will open the action's permissions.

      Create and update reconfigure options works in the same way. By pressing the corresponding button, you'll open a new modal that enables reordering or removing existing form inputs (or alerts). Simply use the dotted icon on the left of a component's name and drag it to the needed place to change the order, or delete a component by pressing the delete button on the right.

      The detail tab has more options to choose from because it's divided into a detail view and a subview. The detail view includes the properties of a model that were chosen to be displayed and the subview is used to navigate to certain pages.

      In addition to reconfiguring options, you can add more items to both the detail view and subview. For example, if you want the user picture to be displayed in the detail view, simply press Add detail view and choose the corresponding property. The subview configuration will include both properties and page selection. Let's say, you want to be able to choose a role for a current user, therefore you need to point to the page where this setting can be changed.

      Note: In order to choose a subview property, make sure your models are connected together, as in the example below.

      #backoffice #back office