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
This is a neat implementation @Eam_Sibug ๐
@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
This is another sleek UI inspiration from you @Rifad.
@Suvrutt_Gurjar wrote:
This is another sleek UI inspiration from you @Rifad.
Thanks @Suvrutt_Gurjar
status columns are in 1 table only, together with this progress bar. Nice UI that you have!
Could you please share this code?
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
here's a 3 stage code that you can leverage and play around.
CONCATENATE(
"data: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>"
)
thank you for sharing your code
Please share how to do it, or demo. Thank you very much
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
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
I'm looking forward to learning about your technique. ๐