Claris Studio: List-Detail View

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.

List-Detail showing detail for second item (selected)

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. 

Standard List-Detail View in Claris Studio (via a Hub)

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).

A List-Detail View created using Blank (new table) will not have any fields. You can use Add Object to drag new field objects to the form, which creates fields in the table.
New List-Detail View from Blank

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

As mentioned above, when the List-Detail View is opened in Developer Mode, it can be edited. This allows you to set up the list and detail areas as needed. 

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.

The grey toolbar has four tools:
  • 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
The Properties panel on the right can be toggled open and closed with the Properties button tag the right of the second grey toolbar. The panel shows options for various selected objects. 
The Header displays title text by default. This can be edited directly in the header. When the header is active, there is one button at the right:
  • 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
The header also has a resize icon (two lines) in the middle of the bottom that allows you to adjust the height.

Edit List

The List area can be configured in the Properties panel when it is active.

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

As mentioned above, List-Detail Views only display data from the underlying table when viewed via a Hub. This applies to both Manager and Member users. When viewing via a Hub, none of the View editing tools are available. 

Search, Filter and Sort

Initially all records will probably be displayed in the list. The list is scrollable but there is no indication of the record count. There are three tools at the top of the list – 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!


That’s about it. Yet another view of your data in Claris Studio. My current opinion is that this View seems unfinished – there are a few things that just don’t seem to be well thought through. I would like to see some significant updates for this view. 

Leave a Reply

Your email address will not be published. Required fields are marked *