UI Inspirations?

[jyothis_m]

may i know which platform you are using for making such SVGs which looks similar to webpage @Rifad

[CA_Ankur_Patida]

Good job done @Rifad , eager to know your sales movie behind order acceptance details view.

[Eam_Sibug]

Im a fan of this UX. Hope you can share a sample app or how to so we can replicate. That’s a great help.

[Suvrutt_Gurjar]

Here something I may post that I tried my hand at in UI

Screenshot:

The small GIF:

[Aurelien]

Love it!

[peterson]

Man, I need to learn how to make images like that. Pleaseeeeeee!!!

[Rifad]

That’s some professional-level SVG work right there! Absolutely incredible, @Suvrutt_Gurjar

[Suvrutt_Gurjar]

Thank you @Rifad for your appreciation. You have mastered the SVG art. So it means a lot. I think @Jonathon pioneered SVGs in the AppSheet world. Thereafter @GreenFlux , @Kirk_Masden , @SkrOYC contributed with some very useful tips on the subject. You have been creating excellent professional UI views with SVGs that are really inspiring.

For a long time, I wanted to try my serious hand at them. With tips based great inputs from you all, spent some good time last week.

And finally new desktop UI makes it easier for such UI SVG tiles.

[Suvrutt_Gurjar]

@peterson ,

The SVGs are created using various tips in the community. I think it ultimately comes down to creating some tiles using rectangles, circles. I have created some bsckground tiles with rectangles and circles and converted them to SVG images.

Then variable information from some AppSheet columns is displayed on that image, using a combined SVG code having SVG image as background.

I will anyway post the image code and overall SVG code for one tile. Currently I am not at my desk and responding from my mobile. I may say that atleast I felt that I needed lot of trial and error to get the desired tile placement of various elements.

But I think with practice that time may reduce. Other colleagues may have their insights to share.

[peterson]

Alright, @Suvrutt_Gurjar . I’d really appreciate if you could give me a hand with this.

I learn fast I just need to know the tools how to import and export the svg arts I make on Canvas, and how to export the urls like that.

I already used some SVG’s in some of my apps, but I copied the codes and adapted it to my app, such as charts, progress bars and QR codes.

I have many ideas and I wish I could use SVG images to replace a whole detail view. I’d definetely buy a course that teaches how to do this.

Please let me know if you can help me with the basics, maybe just make a very simple thing…

[Nani]

Fantastic

[GreenFlux]

@Suvrutt_Gurjar thanks for the mention. I agree, @Jonathon pioneered this technique, and I’m glad to see the AppSheet community continues to innovate with it!

I’ve started asking ChatGPT to write the SVG templates, then just swap out the text, color, size, etc. I even asked it to make a snowflake generator, with params based on actual snowflake structure, just for fun!

We just added a feature where you can ask it to generate SVGs, SQL, or JS based on your data. Just give it a rough idea, then swap out the text or color with variables from your app.

Now I’m working on replicating tags from Airtable and making the color formatting automatic and repeatable for each record, without the dev having to think about it.

Notice how the color changes as you type, with this last one. I got some help from our design team to write a function that loops over an array of base colors, converts any string to a unique number, converts that number to a color, then adds the correct contrast and generates an array of SVG elements with repeatable colors, unique to each string value. Then it converts that whole thing into a data uri so you can display the group of SVGs in a single image field as a url.

I love pushing the limits of no-code/low-code and it always reminds me of the early days of AppSheet. I never would have thought to try this stuff without this forum (or the old Discourse forum, and the OLD Google +!)

[Suvrutt_Gurjar]

@GreenFlux

Then it converts that whole thing into a data uri so you can display the group of SVGs in a single image field as a url.

This is cool @GreenFlux . All the examples you have shown, indeed push the limits of what can be done with SVGs. Your all previous tips have been trailblazing and this post is no exception.

[Rifad]

Have anyone tried using SVG in LongText HTML type column instead of Image type ?

It does not work in appsheet for me.

It works fine when i test it.

Just shows blank space in app.

Here is the code

<img src="data&colon;image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?>
    <svg width='420' height='100' fill='none' xmlns='http://www.w3.org/2000/svg'>
        <line x1='1' y1='20' x2='400' y2='20' stroke='rgb(228, 228, 228)' stroke-width='2' stroke-linecap='round' />
        <line x1='1' y1='20' x2='400' y2='20' stroke='rgb(198, 18, 50)' stroke-width='2' stroke-linecap='round' />
        <text x='1' y='10' font-family='Gill Sans' font-size='14' fill='Black' opacity='0.6'>Sales Ranking</text>
        <text x='400' y='40' font-family='Gill Sans' font-size='17' fill='Black' opacity='0.8'>6</text>
        <circle cx='400' cy='20' r='3.50662' fill='rgb(198, 18, 50)' />
        <circle cx='400' cy='20' r='4.25662' stroke='rgb(198, 18, 50)' stroke-opacity='0.18' stroke-width='1.5' />
        <line x1='1' y1='70' x2='400' y2='70' stroke='rgb(228, 228, 228)' stroke-width='2' stroke-linecap='round' />
        <line x1='1' y1='70' x2='400' y2='70' stroke='rgb(198, 18, 50)' stroke-width='2' stroke-linecap='round' />
        <text x='1' y='60' font-family='Gill Sans' font-size='14' fill='Black' opacity='0.6'>Technical Ranking</text>
        <text x='400' y='90' font-family='Gill Sans' font-size='17' fill='Black' opacity='0.8'>10</text>
        <circle cx='400' cy='70' r='3.50662' fill='rgb(198, 18, 50)' />
        <circle cx='400' cy='70' r='4.25662' stroke='rgb(198, 18, 50)' stroke-opacity='0.18' stroke-width='1.5' />
    </svg>">

[Suvrutt_Gurjar]

Hi @Rifad ,

If you could mention the intention behind this configuration through Long Text HTML format, we could possibly look into possibilities. May we know if your are trying to show some static SVG image through long text column? By static , I mean there does not seem to be any variable element through a column value in the SVG code.

[Suvrutt_Gurjar]

@peterson ,

My request to you will be to go through in detail through various tips by other SVG experts in the community, starting with the first tip by @Jonathon . That is a great tip on principles behind the SVG use in the AppSheet apps.

Dynamic SVG graphics - Google Cloud Community

My above post of those images are basically based on the following tip.

Dashboards with dynamic text overlay on SVG images - Google Cloud Community

1. You can create a background placeholder image for the static part of the overall image. These images can be .png, ,jpg or .svg.

2. Then convert those to Base 64 strings using SVG/PNG/JPG using tools available online.

3. Place this Base64 string in a long text column.

4. Then in another SVG code column of image type refer this Base 64 string and any other AppSheet table column values for variables.

Note : I am mentioning these steps for your and others easy reference. You sent a DM to me and in this post also you requested. However I reiterate that whatever small contribution I have placed in this thread and tip is due to some excellent tips by other colleagues that I have mentioned both in my tip and in this thread also. They all have done some pioneering work on SVGs.

[Rifad]

Numerous exciting possibilities emerge when you choose to integrate SVGs into lengthy HTML text. For instance, consider using tags in a detailed view. By employing the IFS() function, you can effortlessly handle multiple tags, allowing HTML to work its magic and neatly arrange them, resulting in an aesthetically pleasing outcome like below.

Additionally, another compelling use case is the fusion of text and SVG images within extensive text content. This approach allows for creative elements like blockquotes and well-formatted text, harmoniously intertwined with small, expressive icons placed above or below, enhancing the overall visual appeal.

@Suvrutt_Gurjar

[Suvrutt_Gurjar]

Hi @Rifad ,

Thank you. These are some nice thoughts on further enhancing the UI.

Could you update what you mean by tags? Do you mean “Tabs” like in a dashboard or form view? Also are you expecting the navigation between these tabs to take place, the way we accomplish with actions currently? When you say IFS() to switch between options, what interaction the user will to with the app.

Currently we typically use navigation actions or view names. May we know your thought on how you wish to do the navigation using that long text html column- will navigating trigger be within the column code or from outside actions?

[Rifad]

@Suvrutt_Gurjar

Could you update what you mean by tags?

@Suvrutt_Gurjar this is what i meant tags.

Using ‘ICONS,’ I want to add flexible SVG elements to HTML. This means we can use SVGs that change, like pictures with words, in lots of different situations.

[Suvrutt_Gurjar]

Okay thank you. Got it. Hope AppSheet team will add more capabilities into HTML option in long text columns by enabling more HTML tags options. More HTMLs tags will make your nice UI ideas further easier to implement.

I will also post back if I can come up with something relevant to share.