Changes to Sidesheet Behavior

BillH · ‎Jul 14, 2023

I'm not sure who to direct this to, so I hope one of you can help.

I need to get some idea of what is going on with the changes that seem to be going on. I have a interface designed for a client, and finally have reached the point were I am getting to have them upgrade their production account. To get ready I needed to make some final changes based on their feedback using my test account.

I needed to add some list pages with sidesheets that are where some fields are made editable. The ones I have on the existing test interface were easy to format and allowed resizing of the fields as well as positioning several on a line. A partial section looks like

With the changes that have been made all I can do is stack the fields with the labels to the left

This is totally unacceptable. I know it looks like a minor thing, but this was only the simplest example. When you multiply the issue over the number of fields and pages it's much more serious.

It's taken months to get everyone in agreement on how this is to look and behave, and now I can't deliver what they agreed upon.

Please let me know that you will be rolling back these changes.

kuovonne · ‎Jul 14, 2023

@Kamille_Parks Thanks for your additional insights.

To me, if feels like the new "row or column" is like reverting to a flexbox way of laying things out. I don't like it. It is too limiting. I cannot have two shorter fields in a left column and one long text field in a right column (that fills the height of the two shorter fields).

I get that they are trying to address the fact that placing elements in interfaces was tricky. But making things easier by taking away functionality isn't the answer. I'm okay taking a bit more effort to get an interface that works for my users versus having to tell my users that I cannot continue to give them the interface design patterns that they like.

I'm okay with the concept of sections. I used the divider element and headings to visually group things in my side-sheets into sections. Maybe eventually we will be able to collapse sections. But I don't like how they force buttons to be at the top of the section and in a menu. I don't like how I cannot add freeform text. I don't like how I cannot repeat a field in multiple sections.

I get the need to simplify interface designs to work on mobile. But don't cripple the experience on desktop because of mobile.

Kamille_Parks · ‎Jul 14, 2023

In flexbox (or grid) styling, you can control the width and/or height of items within the container with grow/shrink properties. Or you put a flexbox inside another flexbox. It stands to reason anything you put in a section should have an "Appearance" option for width: full (span the whole row), half, third, or quarter, as well as height. That way you can place things side by side predictably, and with varied widths/heights. Since we're all used to having a grid-based interface (all elements were 1 of several pre-defined widths), I think that could be a good compromise between the old and new.

I say "anything inside a section" and not "field" because I agree: I want to place a text element or button inside a section, not just on top.

And linked record fields should have a display type of chart and number so that functionality isn't taken away. Right now most functions aren't gone, they're in a different place and perhaps not how I would like. Charts and Numbers are straight up missing.

Kamille_Parks · ‎Jul 14, 2023

Additional positive:

The new update does allow you to directly add new linked records. That means creating new records, unlinking a currently linked record, or deleting a linked record. Like elsewhere in newer "full page" interface pages, you can independently toggle whether someone can link/unlink records, or create new records. The old layouts did not allow for this and required workarounds.

Also new detail pages are very responsive. Adjust the width of your browser to test. Not bad, though not all elements are suited for a small screen, and may mean mobile-interfaces are very near.

Related negatives:

I don't think you can adjust the height of any linked record sections except for Gallery (which lets you choose how many rows of card there are). This is bad. What if I want a lot of space for a grid/list? Can't do that yet it seems.

While you can create new linked records, you can't just quickly create a new row/card. It pulls up a form view of your choosing. But that can potentially slow down a workflow. A plus button in the bottom left as available in the data view would be nice.

Also the "unlink" right click option might be bugged lol. Great that it will be in place eventually when fixed, but it is not currently unlinking records when I click it.

Kamille_Parks · ‎Jul 15, 2023

Day 2 of Testing

Sections use CSS grid

The new Detail Page sections use CSS grid, not CSS flexbox. This is a good thing. Grids give child elements (in our case, fields) the ability to explicitly identify the column and/or row they start and end. For that reason, I maintain that it should be easy for Airtable to add settings in (preferably) both of the following ways:

Individual fields within sections should get column and row settings to control their span
Sections should get settings for the maximum number of columns in a row

I wrote some truly basic css to force a long text field to span 2 columns and 2 rows (see below). This is the desired end result for the two settings options proposed above. It can be done in two lines of CSS as pointed out by the arrow. I didn't even have to override any styling, just adding those two lines. With my given example, reducing the screen size doesn't break it either, so their responsive code appears clean enough to handle this adjustment fairly gracefully.

Also earlier up I said "the section button placement seems backwards". That's because it is, explicitly. Their containers have the property "row-reverse" turned on. I would very much like for that to be removed lol

Joseph_Roza · ‎Jul 15, 2023

You break these features down like I’ve never seen. Kudos to you.

I’m still not entirely sold on these sidesheets, but I’m hopeful they go through some iterations until there’s a nice middle-ground. As it stands, I don’t dare touch any of my existing custom sheets, for fear they may break.

While they’re working on sidesheets, I wish they would add some additional options for opening them.

I’d love it if buttons could open a sidesheet record, either fed by a record picker or if the buttons could individually select the record.

I’d also love it if the calendar view ‘+’ button had the option to open up a sidesheet immediately as well, instead of that modal that pops-up.

Kamille_Parks · ‎Jul 15, 2023

I’d love it if buttons could open a sidesheet record, either fed by a record picker or if the buttons could individually select the record.

All detail pages can be opened view a button. Create a formula field in a table for which it makes sense that prefills the url of a particular detail page using the appropriate record IDs. To figure out the url, add a list/gallery/whatever to a page that links to the desired detail page. Navigate to that detail page and grab its url. Ascertain which record ID is that of the detail page, and which is that of whatever page you were just on (likely preceded by "home").

I do that all the time.

I’d also love it if the calendar view ‘+’ button had the option to open up a sidesheet immediately as well, instead of that modal that pops-up.

You can do that too. Set the calendar to non-editable, and enable "open record details". This will immediately open the detail page without the calendar modal.

Joseph_Roza · ‎Jul 15, 2023

All detail pages can be opened view a button. Create a formula field in a table for which it makes sense that prefills the url of a particular detail page using the appropriate record IDs. To figure out the url, add a list/gallery/whatever to a page that links to the desired detail page. Navigate to that detail page and grab its url. Ascertain which record ID is that of the detail page, and which is that of whatever page you were just on (likely preceded by "home").
I do that all the time.

WOW. Now that's something I've never seen, and I love it.

Bit annoying that I can't open that sidesheet to edit it in the interface page that I'm adding it to, but that's serviceable. Still a workaround that I wish airtable would add natively, but I'll take whatever I can get.

So, I'm assuming the button action to get this working is 'go to url in record', is that right?

Have you gotten it to work on the pre-made interface pages (ie. calendar, list, etc.)? I get it to open the record, but it has to reload the page. Not the biggest issue, but I wonder if maybe I'm doing something wrong. Those buttons are limited to only three options though (go to interface page, open record creation form, and external URL). I'm assuming this is happening because of the action 'open external URL'.

I’d also love it if the calendar view ‘+’ button had the option to open up a sidesheet immediately as well, instead of that modal that pops-up.
You can do that too. Set the calendar to non-editable, and enable "open record details". This will immediately open the detail page without the calendar modal.

I tried that in both the element version of calendar and the pre-made calendar page. Neither showed the '+' button when hovering over a day. It only worked if a record was already present in that day. It works great for that use case, but I want to be able to add records to that day by just pressing the '+' button.

Either way, really fantastic tidbits you've shared. I really appreciate it.

Tobias_LGKR · ‎Jul 15, 2023

I also posted my observations in this thread:

https://community.airtable.com/t5/interface-designer/2023-07-11-new-record-detail-layout-feature-set...

Tobias_LGKR · ‎Jul 15, 2023

We have been building interfaces for months and months and months. Tediously trying to make design decisions that work for functionality with an already very limited design-toolset. Personally I don't care right now where Airtable is going with this. It freaks me out that the paradigm changes on a whim. We have established how certain elements work throughout all interfaces so that functionality makes sense where ever you are. And boom, you wake up one morning and all your tools have been pulled. Just like that. And to make things worse (which is hardly possible), there is no announcement from Airtable at all. Nowhere that I could find. And I thought Webflow was bad about client-realations...

BillH · ‎Jul 16, 2023

Thank you @Kamille_Parks for the explanations that are far more complete than anything Airtable has supplied.

My problem is that Airtable has taken away flexibility in the process, and we shouldn't be presented with a situation where we need to use scripts or external code to bring back a portion of what was originally present.

It looks to me like Airtable is putting the code back into no-code.