How to create collapsing sections in AirTable Interface Expanded View

This is a feature that I wish was part of the regular functionality of building AirTable interfaces because it is incredibly useful when you are building applications that involve a lot of data fields and you don't want your users to be over encumbered with too much information in their expanded record view.

Here is how I used buttons to create collapsing sections that are very easy.

1. Create a checkbox field in your base that will act as your "Edit" mode. This will be hidden from users behind the scenes.

2. Open up your interface designer and create a section that is titled Hidden, set the viewing settings of the hidden section so that users will never see it when they are using the interface.

Tip: if this is a client database, set the visibility of the Hidden section to be dependent on a client with a very unrealistic name so it will never be uncovered!

3. Then you will begin to set up your primary view that you want users to see when they open up the expanded AirTable record in your interface. In this case, I wanted users to see a Read-Only version of the clients and then the button will allow for the further expansion of the record to permit editing the client details.

4. Now go into your editor and arrange the various fields you want to be visible when in NORMAL MODE and visible when in EDIT MODE It might look something like this:

You might have noticed that I have made corresponding view-only fields that are duplicates of the editable fields arranged in a manner that will allow for seamless transition. However, I didn't create view-only fields for FIRST NAME and LAST NAME because the expanded record header is the name of the client, and to save space I didn't feel the need to show the client's name broken up unless for editing purposes.

5. Create your first button in this group. The label is "EDIT", and the action is "Update Record".

You can Require Confirmation if you care about users selecting the Edit Mode after checking off "Yes" on a pop-up window, but personally for our case, this is not necessary.

Now set the update record to make EDIT MODE checked off.

Next I configure the before/after visual functionality of pressing the button.

Please note that we will need to make two (2) buttons because of the limitations of the AirTable interface designer where the update action of a button can only be pressed once, but don't worry this will be mitigated.

Lastly, I set the visibility of this button to only show when EDIT MODE is null or unchecked because we only want users to be able to click this button IF we are in NORMAL view and want to enter EDIT view.

6. Duplicate the EDIT button to begin creating the return button functionality that will return users from the EDIT view back to the NORMAL view.

Next step is to configure the new button to be the opposite of the first button.

This means that the label should be X and the color should be red.

Now change the update record from checking EDIT MODE checkbox field to unchecking the field.

And set the visibility of the EXIT EDIT MODE button to be visible ONLY when the EDIT MODE checkbox is selected or not null.

Congrats, you have now have your buttons set. The next steps is to configure the visibility conditions of your fields that you want to be visible in either EDIT view or NORMAL view.

Now you are done and this is what it will look like with it all together.

What is great about this is that it is seamless to the user in the transition between views so it looks and feels like any other collapsing interface.

ALTERNATIVES:

You may even want to take advantage for section titling in cases where you want more condense visibility in NORMAL view.

Also, you can take advantage of emoji symbols to make buttons look cool.

FINAL THOUGHTS:

I plan to do more articles in my pro tip series on how to optimize AirTable. Let me know if you have any questions or ideas on how you want to build AirTable for you and your organization/team!

#AirTable #LowCode #ProjectMangement