Creating an Object Page
Creating an object page to that we will use for a detailed view and edit tasks.
For this part of the tutorial, we will be using Object Pages to build a detailed page to view and edit specific tasks. To create a new Object Page, click in the➕New Page in the Layouts windows and click on Object Page.
Next, we want to name this new page. Click on Page Settings⚙️on top, and in the Page Properties enter Details in the Name field.
Header
Just like we did for the App Page, we add a Layout Container and a Header to our new Object page, by finding them in the list and dragging them to the designer area.
We want our Header to be dynamic, and the title to reflect the name of the current task the user is looking at. Go the header's Properties window set the Text field to "Details - {{instance.name}}"
The {{instance.name}} token will be replaced by the name of the task that we click on.
Toolbar
Next, we want to add a toolbar which will allow users to refresh the details of the current task item. Find the Toolbar Control and drag it underneath the header. Inside the Toolbar, we then add an Action Control.
Time to configure the Action. In its Properties windows :
Note that for this Action Control, we did not provide anything to the Text field. This is because we only want the icon to be displayed.
Designing the Page
We can now proceed to add the main controls of the page which will allow the user to view and modify a task.
Firstly, we add a Scroll Panel to the middle part of our Layout Container. Inside it proceed to insert a Collapse Panel.
Collapse Panels can expand or collapse to reveal or hide other controls. This is a great way to group multiple controls while keeping the interface uncluttered. In the properties window of this panel, set the Text to General
In this panel, we can now add the fields of our task that we want to display. In the leftmost list in the Object page will be a list of fields from out To Do class. We select the Title, Is Completed, and Notes fields and place them under each other in the General Collapse Panel.
Next, we want to have 3 fields displayed next to each other horizontally. To achieve this, we make use of the Horizontal Panel. We and now add our next three fields Owner, Due Date and Priority to it. The Horizontal Panel Control makes use of a 12-column responsive grid system.
This system divides a row into 12 columns. Controls can be allocated multiple of those 12 columns depending on the width you want it to occupy. The Horizontal Panel is also able to display content differently depending on the screen size by allocating a different amount of columns to the control in the Small and Normal Fields. For example, on a Normal screen, we might have a particular control displayed in 3 columns, but on a small screen, we only want 6 columns.
For our 3 fields, we want columns to always be evenly distributed, we go into the Properties windows and set the width for each element to 4 (12 columns divided by 3 fields).
TIVITY File Integration
After having added all the fields for our class, we want to be able to view and attach TIVITY Files to our task.
To start, let's add a second Collapse Panel to keep the page organised and in its Properties, we are going to name it TIVITY File.
Now in the leftmost list, under Links - Main > Links, find the TIVITY File component, drag it and drop into our Collapse Panel.
The Controls inside the TIVITY File integration are already preconfigured, and without any further changes, we can now proceed to finish up this page.
Footer Actions
Now to complete our Detail Page we want to add Save and Delete Actions at the bottom of our page.
Let's start by adding a Toolbar Control to the bottom/footer section of our Layout Container
Save Button
The save functionality is not always available, for instance, if Read Only. For this reason, we do not want to show the save button. To achieve this, we make use of the Conditional Panel.
The Conditional Panel's content is visible only of some particular requirements are met. To add a Conditional Panel, search for it in the list of Controls and drag it to Toolbar. Then in its Properties windows :
The expression "{{instance.options.readOnly}} = False"checks if the object is Read Only. If that’s the case, it won’t display the Save Button.
In case a Conditional Panel is not added, the save button simply will not work on Read Only objects
Now that our Conditional Panel is all set up, we can add an Action Control to it to act as save button. In its properties :
Delete Button
For the Delete Button, we configure the Conditional Panel to cater for Read Only objects the same way as for the Save Button, then add an Action Control to it.
The Action Control Properties this time is set as such:
Final Page
Finally, our page looks like this :
We can now proceed to create our last page for this tutorial.
Last updated
Was this helpful?