LCS – Using the Back Office Template
3. Locate and hover over the tile titled, “Back office”; this presents two buttons titled, “Use” and “Preview”.
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)
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”.
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:
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).
-
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.
Steps to Edit a Back Office Page
-
Begin by clicking on the Page Schema tab at the top of the left sidebar.
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”.
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.
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.)
-
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:
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
-
To show the Detail, Create, or Update layouts, double-click on the “Overview - Record View” component in the Page Schema list.
3.1. The resulting display offers several options. Click on “Record view”.
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:
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.
-
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:
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)
-
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:
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.
-
Click on the Overview option; this will hide the Details view Form and again display the Overview form for editing.
8. Compile the page, test it, and provide access to it through your application via an open page button.