UI Inspirations🥳

[Rifad]

Hello Community,

I'm excited to see the incredible UIs you've crafted using AppSheet! I'm on the lookout for inspiration from seasoned app developers in our community.

Let's kick things off by showcasing a few UIs that I have done, particularly those created with the new desktop UI. A special shoutout goes to @Arthur_Rallu  and their team for their outstanding work on new desktop UI.

Now, I invite to all you talented developers and contributors in our community. Share your remarkable UI creations here! 🚀👨‍💻🎨

@MultiTech @Suvrutt_Gurjar @Koichi_Tsuji @SkrOYC @Kirk_Masden @Marc_Dillon @Jonathon @JuneCorpuz @Joseph_Seddik

[Rifad]

Thank you for your kind words! Your willingness to contribute is much appreciated. Thanks again!

@Suvrutt_Gurjar 

[Kirk_Masden]

Discussion here has been of great interest to me and led me to add this little tip for others:

Display images in LongText columns via HTML (rich text)

https://www.googlecloudcommunity.com/gc/Tips-Tricks/Display-images-in-LongText-columns-via-HTML-rich...

I haven't tried to add svg images to LongText columns.  For now, my needs are met so I just posted about what I have learned here and my own experience.

[dylanarnold]

May I ask how you change the component (text) in an SVG file with long text HTML within appsheet? I have tried, but it doesn't change while using URL parameters within appsheet.

[marinocity]

It would be great if some expert in SVG for Appsheet created an easy-to-understand tutorial for everyone.

[Eam_Sibug]

Thanks to this inspiration post. I have implemented a dynamic status bar to my app

[Suvrutt_Gurjar]

This is a neat implementation @Eam_Sibug  👍

[Rifad]

---

@Eam_Sibug wrote:

Thanks to this inspiration post. I have implemented a dynamic status bar to my app

---

This is super cool! How did you set this up? Did you make a separate table to keep track of the status, kind of like what we see here? And then, did you create that dynamic SVG like the one above? @Eam_Sibug 

[Suvrutt_Gurjar]

This is another sleek UI inspiration from you @Rifad. 

[Rifad]

---

@Suvrutt_Gurjar wrote:

This is another sleek UI inspiration from you @Rifad. 

---

Thanks @Suvrutt_Gurjar 

[Eam_Sibug]

status columns are in 1 table only, together with this progress bar. Nice UI that you have!

[KareemElkafi]

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 ?

[Rifad]

In the detail view you can increase this number @KareemElkafi 

[KareemElkafi]

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

[peterson]

Could you please share this code?

[Rifad]

Hey @peterson which code did you mean ? Those texts are simple combination of HTML LongText column type. 

Rich Text Formatting - in Preview Program - Google Cloud Community  

---

@Amy wrote:
 

Updating Media

---

[Eam_Sibug]

here's a 3 stage code that you can leverage and play around.

CONCATENATE(
"data&colon;image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" width=""600"" height=""150"">",

"<filter id=""drop-shadow"" height=""130%"">",
"<feGaussianBlur in=""SourceAlpha"" stdDeviation=""3""/>",
"<feOffset dx=""2"" dy=""2"" result=""offsetblur""/>",
"<feComponentTransfer>",
"<feFuncA type=""linear"" slope=""0.5""/>",
"</feComponentTransfer>",
"<feMerge>",
"<feMergeNode/>",
"<feMergeNode in=""SourceGraphic""/>",
"</feMerge>",
"</filter>",

"<rect x=""20"" y=""20"" width=""560"" height=""110"" rx=""15"" ry=""15"" fill=""%23eff0f1"" filter=""url(%23drop-shadow)""/>",

"<circle cx=""100"" cy=""55"" r=""20"" class=""stage"" fill=""",
IF([Status 1]="Approved", "%23b6d7a8", "%23cccccc"),
""" />""",
"<svg x=""88"" y=""44"" width=""25"" height=""25"" viewBox=""0 0 24 24"" fill=""none"" stroke=""",
IF([Status 1]="Approved", "green", "white"),
""" stroke-width=""4"" stroke-linecap=""round"" stroke-linejoin=""round""><polyline points=""20 6 9 17 4 12""></polyline></svg>""",
"<text x=""100"" y=""100"" font-size=""14"" font-family=""Arial"" text-anchor=""middle"" fill=""%23747474"">",[Status 1],"</text>",
"<text x=""100"" y=""120"" font-size=""12"" font-family=""Arial"" text-anchor=""middle"" fill=""%23747474"">Your second line of text</text>",

"<circle cx=""300"" cy=""55"" r=""20"" class=""stage"" fill=""",
IF([Status 2]="Approved",  "%23b6d7a8", "%23cccccc"),
""" />""",
"<svg x=""288"" y=""44"" width=""25"" height=""25"" viewBox=""0 0 24 24"" fill=""none"" stroke=""",
IF([Status 2]="Approved", "green", "white"),
""" stroke-width=""4"" stroke-linecap=""round"" stroke-linejoin=""round""><polyline points=""20 6 9 17 4 12""></polyline></svg>""",
"<text x=""300"" y=""100"" font-size=""14"" font-family=""Arial"" text-anchor=""middle"" fill=""%23747474"">",[Status 2],"</text>",
"<text x=""300"" y=""120"" font-size=""12"" font-family=""Arial"" text-anchor=""middle"" fill=""%23747474"">Your second line of text</text>",

"<circle cx=""500"" cy=""55"" r=""20"" class=""stage"" fill=""",
IF([Status 3]="Approved",  "%23b6d7a8", "%23cccccc"),
""" />""",
"<svg x=""488"" y=""44"" width=""25"" height=""25"" viewBox=""0 0 24 24"" fill=""none"" stroke=""",
IF([Status 3]="For Sourcing", "green", "white"),
""" stroke-width=""4"" stroke-linecap=""round"" stroke-linejoin=""round""><polyline points=""20 6 9 17 4 12""></polyline></svg>""",
"<text x=""500"" y=""100"" font-size=""14"" font-family=""Arial"" text-anchor=""middle"" fill=""%23747474"">",[Status 3],"</text>",
"<text x=""500"" y=""120"" font-size=""12"" font-family=""Arial"" text-anchor=""middle"" fill=""%23747474"">Your second line of text</text>",

"<line x1=""125"" y1=""55"" x2=""275"" y2=""55"" stroke=""",
IF([Status 1]="Approved", "%23b6d7a8", "%23cccccc"),
""" stroke-width=""4"" stroke-linecap=""round""/>""",
"<line x1=""325"" y1=""55"" x2=""475"" y2=""55"" stroke=""",
IF([Status 2]="Approved", "%23b6d7a8", "%23cccccc"),
""" stroke-width=""4"" stroke-linecap=""round""/>""",
"</svg>"
)

[dylanarnold]

thank you for sharing your code

[dohuuduy1985]

Please share how to do it, or demo. Thank you very much

[Kirk_Masden]

Hi @Rifad !  This little "tip" of mine is a low-level (not nearly as sophisticated as your innovations) attempt to work around two current UI limitations: 1) lack of support for portrait (vertically) oriented images and 2) insufficient support for audio and video:
https://www.googlecloudcommunity.com/gc/Tips-Tricks/No-server-for-media-no-problem/m-p/695452#M9229

[Rifad]

Great idea! I plan to apply this technique in a slightly modified manner for a different use case, diverging from the original post's context. Thanks @Kirk_Masden 

[Kirk_Masden]

I'm looking forward to learning about your technique.  🙂

[peterson]

Hi, @Rifad 

I was wondering how did you get this 2 column in detail view. Is it a multicolumn detail view only or is there another thing you're doing

?

[Rifad]

That's a multi-column detail view.

[Kirk_Masden]

Hi Rifad!  Even at this very late stage in my learning the AppSheet platform, I had yet to explore all of the basic possibilities for image display:

* directly in Image column
* as "Main image" in a Detail view
* in Show column
* via LongText column (taking a public URL for the image placed in the Image column)

I hope this little post of mine is something you find to be relevant to this discussion on UI ideas.  🙂

https://www.googlecloudcommunity.com/gc/Tips-Tricks/Pull-Image-column-pics-into-LongText-columns/td-...

[Gustavo_Eduardo]

Thank you very much for your initiative @Rifad 

[Rifad]

You're welcome!
@Gustavo_Eduardo 

[Kirk_Masden]

I've recently posted a tiny tip about a little alternative to the <blockquote> 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.