Yet another way to view your data in Claris Studio is with List-Detail. This type of view is also called master-detail. Although you may not know the name, you will likely be quite familiar with this view from other apps such as Mail or Contacts.
Updated 2 May 2023
The interface is made up of a master list and a detail area. When an item is selected in the list, the details are displayed in the detail area. The list usually displays key data about each item; the detail shows more data for the selected item.
The list and detail are commonly displayed side by side (as shown above). When there is less room, such as on a mobile device, a stacked approach displays the list by default. When an item is clicked or tapped, the view changes to detail for that item. A back button returns to the list.
List-Detail View
If you are a Manager, it is important to understand that you can only work with data in List-Detail with Developer Mode switched off. Edit the view structure in Developer Mode.
Before we look at creating a List-Detail View, let’s take a look at a completed example. The following is a screenshot of a List-Detail View of Construction tasks.
The List-Detail View in Claris Studio has the list on the left and detail on the right. In the above example, the third record is selected in the list. The View has an optional header object (blue bar).
At the top of the List there are search, filter and sort tools. At the bottom of the List, the + Add button allows you to add a new record. If there are more records, the list is vertically scrollable. Navigate between records by:
- clicking them in the list,
- using the navigation chevron buttons at the lower right of the Detail, or
- using the up/left and down/right arrow keys on your keyboard.
The record Detail on the right of the View allows editing of the data.
Musings: The View has a fixed maximum size regardless of the browser window size. This may be addressed in future updates.
Create New List-Detail View
When using Add Views > New Views from a Hub, List-Detail is one of the Views available. This will either create a new Table for the data underlying the View, or create a View based on existing data (table).
If you created the View from an existing View (table), all fields from the table will be on the form. They can be deleted or rearranged as needed.
Edit List-Detail View
If you have been following along with previous articles for other Claris Studio Views, you will see a very similar structure in the top two white toolbars.
- Sidebar - click to toggle the sidebar, showing Fields (in table)
- Add Object - show the Add Object panel used to drag and drop field and static objects onto the page. Panel can be pinned to remain open.
- Cogwheel icon – Page Settings – theme colour and option to make all field objects on the Detail required
- Meatballs icon – Delete Page – deletes the View
- meatballs icon – Delete header object
The Header Settings are similar to other Views and allow you to control the header content in the Properties panel.
- The header Background can be a colour (set by the page theme) or an image.
- Add a Logo (choose image) and set to left or right of header
- Two text sections – Title and Subtitle – show or hide, set alignment
Edit List
The List Title is optional. If displayed, it appears in a fixed position above the List records and can be edited directly or in Properties.
The other three fields – Card Label 1, Card Label 2 and Card Label 3 – allow you to choose a field to display in a fixed position and format for each List record. This displays key data to enable the user to distinguish between records. Only one field can be displayed per position and there are no formatting options available. You must show a field for the List Title but all other fields are optional.
In addition, you can set Filter conditions and Sort rules. These can be reset by any user using the View.
Edit Detail
The Detail area can contain both Field Objects and Static Objects. These can be added via the Add Object tool. Adding a Field Object in this way will create a new Field in your Table. To add an existing field not currently in the Detail area, drag it from the Sidebar Fields list.
The Detail area is edited in much the same way as a Form page. Refer to our previous article Claris Studio: Edit Web Forms for details of the features and methods.
Using List-Detail View
Search, Filter and Sort
Search – enter text in the Search box to progressively reduce the number of matching records as each character is entered. The number of records in the list is reduced, matching the search. The search is applied to every field e.g. searching for steel searches for the string in every field in the table. The search is not case sensitive.
Something to watch out for – if you have a current search and click + Add to create a new record, you will probably not see the new record – it does not match the search. So you think it has not worked and click it again! And again! Until you realise you have been creating a lot of empty records.
Clear the search by deleting the string or by clicking the x in the search box.
Filter – works by adding conditions as in other views such as Spreadsheet view. Refer to our previous article Claris Studio: Spreadsheet View for details.
Note that Search and Filter are additive – you will see the intersection of both results. Search is good for a quick search of all fields; Filter is better for more specific searches of certain fields.
Sort – works by adding rules as in other views such as Spreadsheet view. Refer to our previous article Claris Studio: Spreadsheet View for details. The records in the list are sorted according to the rules entered. For example, you can sort people by Last Name and then First Name.
Work with Records
Working with records means all the CRUD operations – create, read, update and delete.
Create – this is simply done using the + Add button at the bottom of the List on the left. As mentioned above, be aware of the effects of any search or filters in action – you may not see your new record. Also be careful with sort rules in place – new records may be added at the start or end of the list and you may not land on your new record! (likely a bug)
Read – You can read a record in the Detail area on the right. Simply navigate to the record by clicking on it in the List, use the previous and next chevron buttons, or use your keyboard arrows.
Update – Update a record by entering a field in the Detail area. Depending on the field type, various options will be available.
Delete – delete a record in the List area. Select the record and click the meatballs icon in the top right of the list item.
Warning – there is no delete confirmation and no undo – the record immediately disappears! That is not very nice!