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
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: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>">
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 wrote:
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.
Yes currently i have to use static images like this
Instead Could use something like this.
@Rifad wrote:
Here is the code
<img src="data: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 I have managed to get this done.
I had to create simple web server that:
Receives Image Requests: When appsheet asks for an image through a web address (URL), like "website.com/svg/image-name", the server receives this request.
Finds and Alters Image: It looks for the requested image file. If specific changes are asked (like a different color), it makes those changes.
Changes Image Type: The image, originally in SVG format, is converted to PNG format, which is more common and easier to view.
Sends the Image Back: The server then sends this updated PNG image back to the Appsheet.
This whole process is hosted on Google Cloud, ensuring it's always available online.
Integrated dynamic custom parameters into a URL from AppSheet in the following way:
This approach allows for the customization of various parameters such as color and size directly in the URL, tailored to specific needs. Additionally, this method reduces the amount of code characters that need to be entered into the AppSheet database.
Furthermore, by utilizing the Longtext IMGSRC, I was able to enhance the functionality of AppSheet, overcoming the limitations of the image type column which previously only supported images up to 600px.
@Suvrutt_Gurjar. I attempted to include an SVG long text with an Imgsrc tag, setting the width to 600px. However, this size doesn't adapt well to different screen sizes. Is there a method to adjust the image source so that it matches the width of the detail view?
MacBook Screen: Partially cropped out.
27 Inch Monitor: Not Fit to the width of detail view.
Okay, thank you.
My testing in desktop on a simple image type column showed that 600 pixel X 600 pixel image shows perfectly in detail view in new desktop mode. I purposely created an image with borders with some text written at the corners to see if it is getting truncated.
With a hosted image of flower (600 X 600 ) from Wikimedia inside a long text HTML column as an img src also appears fully , even though with slider as highlighted in the image below.
I believe you may need some experimentation around to come up to an optimum pixel size.
Tested on different devices with a 600px base value.
On a Macbook, both in a two-column and single-column layout, it fits well at 110%, which is 660px.
On a Macbook with a multi-column layout, it fits at 80%, or 480px.
On a 27-inch monitor, it fits at 110%, which is 660px.
Looks like there is no other way to fit to width of the container.
I tried these and its ignoring the style:
<img src="https://svgtourl.nw.r.appspot.com/svg/User-Settings/My-SVG-Width-Multiplier.svg?Line01=Width- 660px&Line02=Here is a descripton. Adjust till width fits right for you." style="width: 100%;" />
Rich Text Formatting - in Preview Program - Google Cloud Community
@Amy wrote:
All other attributes will be removed (for example, inline styles such as
<p style="color:red;">A red paragraph.</p>will be removed and will not have any effect).
The main challenge is if the layout is viewed in mobile mode. I can find an ideal pixel size for desktop displays, but when it's opened on a mobile device, the layout doesn't scale properly, resulting in half of the image being completely cut off.
@Rifad ,
Good to know that you can optimize in desktop view.
I believe the difference between mobile and desktop view image display is to be expected because it is clearly mentioned in the AppSheet help article as well.
Display images and documents - AppSheet Help
So far I was under impression that you are mainly using this layout only for desktop views or else I would have referred the article earlier. Please take a look at the section "Images in a detail view" article below.
Hi @Suvrutt_Gurjar ! I hope you are about to enjoy a happy new year.
Your explanation is fine but I found a problem with the AppSheet documentation. I looked at the "Display Images and documents" help page and found myself being a bit puzzled by the following sentences: "For custom images, we generally recommend using square images: 600x600px." Unless I've missed something, I don't think there's an explanation of the following phenomenon:
This is actually a composite image of three test images I made in an svg editor. In each case the text size is the same. I carefully checked the size of the screenshots to make sure that they accurately show how the different sized images compare to each other when displayed inside a detail view. My conclusion is that, in detail view, the "real estate" allotted to an image is 600x280. A square image of 600x280 is actually resized to 280x280. As you can see, that makes the font appear to be considerably smaller. I wonder why the AppSheet documentation doesn't explain this and why we have do various experiments to figure out what sizes to use.
@Rifad wrote:
The main challenge is if the layout is viewed in mobile mode. I can find an ideal pixel size for desktop displays, but when it's opened on a mobile device, the layout doesn't scale properly, resulting in half of the image being completely cut off.
@Adam-google @Arthur_Rallu tagging you here.
I'm not sure if there will be an announcement regarding this. Previously, Appsheet didn't support these formats in its LongText feature as shown below.
As you might recall, I had to use Node.js and the Sharp library to convert files into supported formats like PNG or WebP. However, Appsheet now directly supports SVG files. The reason for the initial restriction might have been related to security concerns. It's interesting to note that this format worked within the Image type column, but not in LongText. But now supports in both.
The most impressive aspect of using SVG is the exceptional quality of images in the apps, which is truly outstanding.
