Detail Views: Space-Saving Trick to Display Columns Horizontally

GreenFlux
Participant V

Detail Views show all the columns stacked vertically, which leaves a lot of wasted screen space.
2X_e_e41f5b5bf59fff5bee9af3c8a219600f394291cc.png

Make certain columns display in a horizontal list by creating a slice, and a virtual column:

  1. Add slice, select the columns you want, also add the Key column.

  2. Add a Virtual Column: REF_ROWS(โ€œSliceNameโ€,โ€œKeyColumnNameโ€)
    this relates every record back to itself, with the child being the new slice with limited columns

  3. Replace the individual columns on the detail view with the new virtual column.
    2X_a_aefef70752e849298626535f6c0174447f724f11.png 2X_e_e41f5b5bf59fff5bee9af3c8a219600f394291cc.png

This also creates horizontal dividers in the Detail View and can be used to separate sections.

44 31 8,545
31 REPLIES 31

Thatโ€™s a very nice idea. Thank you very much @GreenFlux.

Youโ€™re welcome! You can also hide the VIEW button, since it doesnโ€™t really apply with this approach.

In the UX/Localize section, just rename VIEW to โ€œโ€ when CONTEXT(โ€œViewโ€)=โ€˜View Nameโ€™

However, the (1) remains.

Is there anyway to get rid of the (1)?

โ€œโ€ or "" is not working to me. It will be ignored, and โ€œViewโ€ is shown.
2X_4_468b3672833788d10205df76e78fef31f1249a18.jpeg

" " (with whitespace) is working. But as @Jonathon said, you will still have a clickable area- I marked it gray. And this happens no matter what kind of whitespace you are using. I tried it with hair space , thin space , six-per-em space.
2X_3_36cc41844af3c47ea6f32f62129e8480a8c228db.jpeg

The best result I got from using this expression. Itโ€™s just a NewLine with no whitespace.
"
"
2X_c_cf56daeb51bc9ffabc273256a54d722f11cde075.png
2X_4_4061ba4ca89d1dfd0f80cabc0263d2f3e9f43509.jpeg

The clickable area gets very small.

Cool, this looks like something that could help me, TYTYTY!!!
I have a Meetings App to schedule Meetings, each meeting will have 15 Roles for Members. I need to compactly display a simple/succinct โ€œNext 3 Meetingsโ€ view that shows the next 3 meetings Date & their Roles. See Example below. I am building a Google Doc Template to Workflow email this out to Members, but I would like to also be able to display this inside the App, similar to how my Template image below is laid out. I donโ€™t need the table squares to appear like in my Template image, just the data. I am using a table inside my Template Doc to keep everything lined up nice-nice. I think that you are doing something like this with your brilliant Trick here. The display advantage that I want is that I can only display the Role Name once, down the left hand side, and not for every single Role displayed. This is the only way that I can keep all Roles on one Page in my Template email. I think this view in my App will mainly be viewed on a Desktop, but conserving space on Device screen is just as important as in the Template Doc. Nobody wants a 3 page Report when all data could easily appear in one Page if Smartly formatted.
**And, slightly related, I have not yet figured out how to pull the future Meeting Date 2 & 3 & future Role data into my Workflow template, or into a View inside the App. Itโ€™s gotta be possible, if you know how to do that, I need it, please & TYTY!!
2X_f_fd0b98e8fc61d6d9d9b18777cf8cd944295e25c4.png

Yes. You just need to use <<Start: >> and <<End>>
e.g.:
<<Start: Filter("TableName", condition-that-will-get-you-the-next-3-meetings)>>
<<Greeter>> <<Atendance taker>> <<...other stuff...>>
<<End>>

If you get the filter condition correct, it will iterate over all the records that fulfill that condition and do whatever you put between the Start and End tags for each of those records.

OK great! TYTY! Iโ€™ve already used this <<Start: <> in an Order/Order Detail App, so I should be able to translate to this. Thanks bro!

Hola buenas tardes, soy nuevo en la comunidad pero no veo como puedo generar una consulta general sobre unos temas que tengo dudas, lamentablemente no hay mucha informaciรณn de video tutoriales en espaรฑol y esto hace que no pueda avanzar, le agradecerรญa si me indica como se hace para hacer la consulta en la comunidad o si tiene informaciรณn donde hay vรญdeos en espaรฑol. Gracias.

adamflord
Participant I

This is super slick, thank you!

Iโ€™ve got the slice and VC setup as youโ€™ve described and it appears to be working! That being said, for some reason only the values are showing on my Detail page and not the column headers (in your example, โ€˜Statusโ€™ | โ€˜Deadlineโ€™ | โ€˜Totalโ€™). In my image below, the values are represented with โ€˜1โ€™, โ€˜2โ€™, โ€˜3โ€™, that I am hoping I can get to show with qualifying column names above them. Any thoughts?

UX>Options>Table View> Show column headers

Iโ€™m clearly new here.

Thank you my friend. That (obviously) worked like a charm!

This works also perfect with Deck View or other views
Thanks again to @GreenFlux

Bahbus
Participant V

Cards also display nicely horizontally, except the headers get centered for some reason, not that I mind.

GreenFlux
Participant V

I havenโ€™t tried using this with deck or card view. Thanks for the tip, @Fabian and @Bahbus!

I just realized it would be useful for adding a โ€˜header sectionโ€™ to the Gallery or Deck View, which I have previously used Dashboards to achieve. But Keeping everything in the same view has its advantages when it comes to CONTEXT() and other Dashboard limitations.

The nice things about Gallery vs Card for inlines (unless itโ€™s been changed recently) is that Gallery inlines display a single line with a scrollbar if it exceeds the view. Cards move downward as they exceed the horizontal space. I also like inline Decks occasionally.

Youโ€™re welcome! You can also hide the VIEW button, since it doesnโ€™t really apply with this approach.

In the UX/Localize section, just rename VIEW to โ€œโ€ when CONTEXT(โ€œViewโ€)=โ€˜View Nameโ€™

However, the (1) remains.

AppSheet moved where the (1) is shown, so this is less of a problem now. Unfortunately there is still a small clickable area that canโ€™t be removed - but at least its less obvious.

Another use case:

Jake_Naude
Participant V

A clever and useful trickโ€ฆ Thanks @GreenFluxโ€ฆ

Jerry_Lan
Participant V

I wonder if we use the โ€œEnable Quick Editโ€ for this inline space-saving table, we can use this as a filter on another โ€œRef_Rowsโ€?
I did not manage to do it as when I click, it will navigate into the record in detail view and not edit for example [Status] in your caseโ€ฆ

Hi @Jerry_Lan the only thing I could think of is using inline actions.

3X_d_d_dd2058170204a91e5d365762f379fcfac27eb66f.gif

So cool Fabian!! This might be a workaround to a feature request I made yesterday of splitting inline tables into pages!

Hi @Fabian how did you recorded your app and link it to this post? thanks in advance mate!

I use this:

Thanks a lot @Marc_Dillon!! its very useful!

I used this trick today. got a perfect result.

thanks a lot for sharing.

nice trick
thanks


i want to make like this, its possible?
jumlah and target in one table

Yes, you can do it. Appsheet tables are easier to set up but sometimes need to accommodate everything in a single screen I use dynamic data like below. Screenshot 2022-03-10 at 10.06.11 PM.png

 

 

Hi rifad, how to make like that ?

I followed these steps, however instead of showing me the columns I chose, it's showing me every column. Not sure what I'm doing wrong.

drfuadj
Participant IV

Thanks for the tips this is a very efficient way to show datas. Btw i plan to use it for a data that is optional. How can i hide the horizontal list if theres no data entered in that field?

error hide.jpg

And also i tried to hide the VIEW button using this: 

CONTEXT(โ€œVIEW โ€)=โ€˜Blood Data Menu_Detailโ€™

But it now it shows "Y" on the view button.
1679616289749.jpg

Any idea how to remove those? Thanks a lot for the help.

Top Labels in this Space