2 Likes
You’re welcome!
@Gustavo_Eduardo
2 Likes
That’s a multi-column detail view.
Hello Rifad
In related table called Development Stage .. how can you show all rows
In my related table only show 5 rows and if i want show all rows i should click expand
How can i do it ?
In the detail view you can increase this number @KareemElkafi
2 Likes
Yes Yes Rifad
Thank You Sooo Much
I have another question about svg with html longtext .. i will ask you about it after try some things
I think UI inspirations topic on of the best topics ever
2 Likes
I’ve recently posted a tiny tip about a little alternative to the
tag that one can use to improve the UIs of your apps: Blockquote vs. UL in HTML. I’m posting here in part to shamelessly promote my little tip but also to improve the visibility of this thread. If any of you reading this are not yet familiar with the information that has been brought together on this thread, please scroll up and take a look. I think you’ll find lots of good ideas – most of which are far more sophisticated and useful than what I’ve written about HTML.
3 Likes
Just to add here few Button UIs
I use this to significantly improve UI usability. Here are a few examples.
6 Likes
I took inspiration from your post and create a little Filter feature having 1 customized button in Detail view.
For the button part, i used this free online tools
2 Likes
A client requested a conversation view, but all card-based and existing UIs lacked it. So, I built a solution using SVG, super practical and ready to elevate the experience.
5 Likes
Very good job Rifad! So creative you are!
May I ask:
- Does virtual column with an image type on each row, like this, have much performance impact?
- Would you mind to share some tips about how to make this svg? Im trying to make the same but stucking at having the correct width and height.
P.S.: I have tried to copy the style in your picture, but without success:
- I made an image column for the SVG for each comment in each row.
- Then I realized that all AppSheet inline views, that support an image column, cannot hold a dynamic height SVG: deck, table, gallery, card. Furthermore, gallery and card views arrange the items horizontally (resulting in a horizontal scrollbar).
So my assumption is, that your second screenshot is just a large SVG containing a fixed amount of comments (perhaps a maximum of 5 latest comments).
1 Like
Thanks! Great questions:
I use a normal column (not virtual) with LongText type and IMGSRC formula. Each comment is its own row with an individual SVG.
For dynamic height: I have an n8n workflow with a webhook endpoint. When a comment is added/updated, an action triggers a GET request to n8n with the message text as a parameter.
The JavaScript node calculates the required height based on text length and word wrapping, then generates a properly sized SVG. The URL returns the SVG directly via IMGSRC.
Key insight: Each SVG is generated on-the-fly per comment, not one large fixed SVG. The inline view shows multiple rows, each with its own dynamically-sized image.
2 Likes
Are you using Card view (inline view)?
Very creative way of implementing this @Rifad ,
I have not dwelled in to dynamic SVG myself, but i was wondering, can the webhook end point be hosted in Appscripts WebApp using doGet() rather than spinning up a n8n workflow?
Ideally keeping everything within google workspace.
1 Like
Great initiative! @Rifad Your UIs look clean and well thought out. It’s always inspiring to see how others approach AppSheet design. Thanks for sharing your work and for recognizing the AppSheet team’s efforts on the new desktop UI.
1 Like