Design problems (buttons override, horizontal scrollbar, blank space...)

Hi,

I have many little design problems. Could you tell me please if it's possible to solve it ?

In this exemple, I can't edit or remove the message on smartphone :

Bulubulu_0-1681986391961.png

Why is that space between records so big ? Can I reduce it ?

Bulubulu_1-1681986548537.png

I have to scroll horizontally to see the edit button. Sometimes the scroll bar doesn't show at all.

Bulubulu_2-1681986805214.png

 

Solved Solved
0 3 346
1 ACCEPTED SOLUTION

These are the issues related to the Nested Table property in a Deck view.  I, and others, have requested AppSheet to fix them on a few occasions over the past several years, to no avail.  

It's kind of a "chicken and egg", I think.  I believe AppSheet has lowered the priority on fixing these issues because not many App Creators are using the Nested Table feature.  On the other hand, it is not being used because of the poor UI implementation.

For now, I recommend only using the Nested Table feature if your Nested Table will consistently contain 5 or more rows per Deck View row.  Otherwise, an alternative approach will likely provide better user experience.


@Bulubulu wrote:

In this exemple, I can't edit or remove the message on smartphone :


This is an issue with the Deck View in general when there are Overlay buttons.  If you need the Overlay buttons as they are then you may need to seek alternative methods for Delete and Edit.   For example, if you don't really care about tapping a row to see the Detail View, then change the Row Selected action to go straight to the Edit View and remove the Edit button from the Deck row entirely.

Deck Views do allow Swipe actions on the row.  You could use Swipe Right to open the Swipe menu to allow Delete.  And you could use Swipe Left to allow Edit.  

Maybe these items above will allow for an alternative UI that is still user friendly.


@Bulubulu wrote:

Why is that space between records so big ? Can I reduce it ?


The Nested Table feature "reserves" space for th nested table rows.  There is not a way to eliminate the unused reserved space.  You could reduce the number of nested rows shown to 1 but that only makes sense if ever only expect there to be a single nested row - that doesn't seem to be your use case.


@Bulubulu wrote:

I have to scroll horizontally to see the edit button. Sometimes the scroll bar doesn't show at all.


This is because you are using a Deck View for the Nested Table rows.  It has a minimum width and may very well be based on a normal Deck view - not a nested one, meaning it should maybe need adjusted in the nested use case.  Does it need to be a Deck View? Maybe because of the Image?  Alternatively, you could use a Table view and add Inline buttons for the Edit/Delete but the Image will not be as prevalent.

 

Bottom line, what you are seeing is what you get with the Deck View using a Nested Table.  You will either need to live with the design deficiencies or find an alternative UI approach.

 

 

 

View solution in original post

3 REPLIES 3

These are the issues related to the Nested Table property in a Deck view.  I, and others, have requested AppSheet to fix them on a few occasions over the past several years, to no avail.  

It's kind of a "chicken and egg", I think.  I believe AppSheet has lowered the priority on fixing these issues because not many App Creators are using the Nested Table feature.  On the other hand, it is not being used because of the poor UI implementation.

For now, I recommend only using the Nested Table feature if your Nested Table will consistently contain 5 or more rows per Deck View row.  Otherwise, an alternative approach will likely provide better user experience.


@Bulubulu wrote:

In this exemple, I can't edit or remove the message on smartphone :


This is an issue with the Deck View in general when there are Overlay buttons.  If you need the Overlay buttons as they are then you may need to seek alternative methods for Delete and Edit.   For example, if you don't really care about tapping a row to see the Detail View, then change the Row Selected action to go straight to the Edit View and remove the Edit button from the Deck row entirely.

Deck Views do allow Swipe actions on the row.  You could use Swipe Right to open the Swipe menu to allow Delete.  And you could use Swipe Left to allow Edit.  

Maybe these items above will allow for an alternative UI that is still user friendly.


@Bulubulu wrote:

Why is that space between records so big ? Can I reduce it ?


The Nested Table feature "reserves" space for th nested table rows.  There is not a way to eliminate the unused reserved space.  You could reduce the number of nested rows shown to 1 but that only makes sense if ever only expect there to be a single nested row - that doesn't seem to be your use case.


@Bulubulu wrote:

I have to scroll horizontally to see the edit button. Sometimes the scroll bar doesn't show at all.


This is because you are using a Deck View for the Nested Table rows.  It has a minimum width and may very well be based on a normal Deck view - not a nested one, meaning it should maybe need adjusted in the nested use case.  Does it need to be a Deck View? Maybe because of the Image?  Alternatively, you could use a Table view and add Inline buttons for the Edit/Delete but the Image will not be as prevalent.

 

Bottom line, what you are seeing is what you get with the Deck View using a Nested Table.  You will either need to live with the design deficiencies or find an alternative UI approach.

 

 

 

Thank you very much for this detailed answer!

I found a solution to avoid overlapping buttons.

Just create a virtual column [Footer] of "show" type with a formula containing line breaks in quotes. Also put a space between quotes in "Display Name".

Then add this column to the end of your views.

Top Labels in this Space