LinkedIn
Twitter
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
@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
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>"
)
