LCS - Using the Back Office Template

Using the Back Office template is a fast and simple means to have Betty Blocks generate an out-of-the-box page for a model of your choosing which provides functionality to display an overview of the model (i.e. a list of the model’s rows), display the details for a specific row of the model, create a new row in the model, update a specific row of the model, and delete a specific row of the model.

3. Locate and hover over the tile titled, “Back office; this presents two buttons titled, “Use” and “Preview”.    

screenshot of backoffice page with two buttons

4. Click on the “Use” button; this presents a pop-up page where you will enter: 

4.1. A page name in title case; we recommend the name begin with [BO] (so that it’s readily identifiable as a Back Office page) followed by the name of the model it will support.  (e.g. [BO] Webuser) 

screenshot of create new page and settings

4.2. The system will generate a page path. Please replace any occurrences of multiple consecutive dashes with a single dash. 

4.3. Leave Type of Page as “Authenticated”. 

4.4. Select WebUser as the appropriate Authentication Profile. 

4.5. Click the “Create page” button; this presents a pop-up window titled, “Configure back office, Step 2/3, where you should reference existing partials “Side Menu” and “Footer”.  

configure backoffice screenshot

4.6. Once populated with those names, accept the values by clicking on “Next”; this will present you with another pop-up window titled, “Configure back office”, Step 3/3, where you will enter details: 

configure back office step 3 screenshot

4.6.1. Model – enter the name of the model to be supported by the Back Office page. 

4.6.2. Property used for the search field – it’s imperative that one of the model’s properties be entered in this field. If left blank, the search fields will be included in the page but without any underlying logic to make them work.  

4.6.3. There’s a checkbox for, “Use different properties for forms and detail view; this will be addressed below. 

4.6.4. Properties shown in the data table – select which of the model’s properties you want to have appear on the model’s Overview display 

4.6.4.1. If the checkbox just mentioned is unchecked, the properties you select here (by clicking on the sign for each that you want to be shown) will be included in the forms for Details, Create, and Update, as well as the Overview.   

4.6.4.2. If the checkbox is checked, the properties you select here (by clicking on the sign for each one you want shown) will be included in the Overview, and you will need to also select the properties to be included in the forms for Details, Create, and Update (those three share a common selection of properties).   

  1. Clicking SAVE then generates the page and presents it to you in Page Builder (showing the Overview display in the canvas) where you may edit it.  

overview of back office page

Steps to Edit a Back Office Page 

  1. Begin by clicking on the Page Schema tab at the top of the left sidebar.

editing the back office page

1.1. The sidebar display now shows “Overview - Record View”; to the right of that appears a faint ellipsis (three horizontal dots). Clicking on the ellipses will show a drop-down menu where you will click on “Unlock”. 

how to unlock the back office page

1.2. The left sidebar display now shows components of the Back Office page (the right side of the page still shows the Overview). It’s possible to have custom components and partials within the Back Office page, in which case editing them may also require clicking the ellipsis on each to unlock them. 

finding and unlocking custom components in back office page

1.3. If your Back Office page contains a partial that you need to edit (partials are high-lighted in green when in focus), refer to “LCS - Creating and editing partials in Betty Blocks” for help. (https://kb.wisc.edu/lowcodesolutions/133307 -- URL to be replaced with link when converted to KB doc.) 

  1. By default, when you open a Back Office page, the canvas shows the Overview layout. With the Overview displayed, the left sidebar gives you access to: 

back office sidebar access

2.1. Edit the Side Menu partial 

2.2. Reconfigure the Overview display (drag and drop the properties into a different order, or delete them) 

2.3. Add data table column (add an additional property from the model to the Overview display) 

2.4. Modify the default title that appears on the page 

2.5. Access the Delete action that was generated for the page 

2.6. Edit the permissions for the Delete 

  1. To show the Detail, Create, or Update layouts, double-click on the “Overview - Record View” component in the Page Schema list. 

page schema list in back office

3.1. The resulting display offers several options. Click on “Record view”. 

record view screenshot

4. The resulting display shows the Create Form on the right side of the canvas, and now the left sidebar presents the Create options and the Create Form is available for editing. The left side-bar options give you access to:

create form in sidebar

4.1. Resize the Create Form width 

4.2. Modify the default Create Form title 

4.3. Reconfigure the Create Form (Rearrange or remove form properties) 

4.4. Access the Create Form’s action 

4.5. Set the Create Form permissions  

Note: Components can be inserted into the Form the same way as is done for a front office page. View the page schema (third icon from the left in the left sidebar to ensure any added components are truly within the correct form; it’s easy to have them fall outside the form. Remember to modify the related action after modifying the form.   

  1. Click on the Detail option; this will hide the Update Form and now the left sidebar presents the Details options, and the Details view Form is available for editing. The left side-bar options give you access to:  

detail in sidebar

5.1. Resize the Details Form width

5.2. Modify the default Details Form title

5.3. Reconfigure the Details Form view (Rearrange or remove form properties)

5.4. Add (more properties from the model) to the Details view

5.5. Reconfigure the Details Form subview (Rearrange or remove the subview form properties)

5.6. Add subview item (add properties from a related model) 

  1. Click on the Update option; this will hide the Details Form and now the left sidebar presents the Update options and the Update Form is available for editing. The left side-bar options give you access to: 

update in sidebar

6.1. Resize the Update Form width 

6.2. Modify the default Update Form title 

6.3. Reconfigure the Update Form (Rearrange or remove form properties) 

6.4. Access the Update Form’s action 

6.5. Set the Update Form permissions 

Note:  Components can be inserted into the Form the same way as is done for a front office page; remember to modify the related action after modifying the form. 

  1. Click on the Overview option; this will hide the Details view Form and again display the Overview form for editing. 

overview in sidebar

    8. Compile the page, test it, and provide access to it through your application via an open page button.       



Keywords:
“template”, “BO”, “backoffice”, “back-office”, “back office”, “page create” 
Doc ID:
135082
Owned by:
Celia P. in Low Code Solutions
Created:
2024-01-29
Updated:
2024-06-12
Sites:
DoIT Enterprise Business Systems - Low Code Solutions