LinkedIn
Twitter
Hey everyone! I created a new tool that creates fancy SVG based indicators that dynamically update based on an assigned percent complete column in your app.
SVG stands for Scaleable Vector Graphics and these file types are special in that they are infinitely scaleable. Instead of being made of pixels like a regular image type, they are made from vectors, rays, circles, paths, etc so you can make the image as large (or small) as you need and the device will render these graphics on the fly in real-time without any quality loss.
Because SVG graphics are rendered in real-time we can create indicators that update dynamically as the value of another column changes. These images can be used as headers in โdetailโ views, inline images in your โtableโ views or an image in your โdeckโ view. Below are just a few examples:
I have made this tool available as a sample app that can be found at the link below:
Here are some quick tips to get started:
-
Enter the name of the โpercent column typeโ you will be using in your app into the DIM tool.
-
Select whether you want a circle, horizontal bar or vertical indicator.
-
Adjust the corners of your indicator using the sliders provided.
-
Change the colors of the indicator based on your preferences (you need to use hex codes, click the pallet icon above this section to open up htmlcolorcodes.com. You can adjust the progress color, background color and the text color.
-
As you make these selections, you can view a realtime preview of the indicator you are making at the top of the screen*.
-
When you are happy with the look, simply copy the formula provided at the bottom (or right side of the screen if in full screen) and create an โimage type virtual columnโ in your app with the formula provided.
There are many more opportunities with this idea. I would love to see if anyone from the community can take this idea and make it even better. Please copy! 
*while the app will show that values are trying to sync, this has no effect on what you see on the screen. All calculations are handled via virtual columns so all results/changes are instant.
Cool tool! Super useful
@Grant_Stead @Suvrutt_Gurjar @Fabian @Rich
Thumbnails
One thing you might consider adding is dynamic svg thumbnails as a substitute for the native THUMBNAIL() function which relies on external thumbnail services. A simple thumbnail could be:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
<rect width="100%" height="100%" fill="rgb(67, 135, 191)"/>
<text font-family="Sans-Serif" font-size="35px" text-anchor="middle" fill="white" x="50%" y="65%">JS</text>
</svg>
Which would render as:
You could also get creative to create more rich dynamic thumbnails, such as highway placards:
Dynamic Form Elements
One limitation of AppSheet that can be solved with SVGโs is the creation of dynamic form headers/text or animations within forms. AppSheets format rules are applied upon initiating the form view - they DO NOT recalculate upon changing values in a form until after the form is saved.
For example, you might want text to show up as โEverythings Good!โ in green, and then change to โWarning!โ as red depending on specified values. Currently, the text will change, but the format rules which dictate its color will not. To get the desired behaviour without SVGโs appsheet requires two virtual columns that are preformatted, and SHOW() rulesets to hide one or the other.
I have also used SVGโs in applications to display dynamic images in forms. One example is modifying an excavator to appear to be digging further down / deeper as a user adjusts a numerical range column indicating depth. Another example is highlighting portions of serialized text as users input it:
Pie Charts
You can read about how to create SVG pie charts here:
If no one else has come across this, I thought I would share. I (so far) have successfully imported a font for use in rendering SVGs in AppSheet. This can be done by converting the font to Base64:
"data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 100 50"">
<defs>
<style type=""text/css"">
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(data:application/font-woff;charset=utf-8;base64, <...YOUR BASE64 CODE HERE...>) format('woff');
}
</style>
</defs>
<text font-family=""Roboto"" ...other settings... >"&
[Your Text]
&"</text>
</svg>"
Replacing all of <โฆYOUR BASE64 CODE HEREโฆ> with your actual Base64 code from the converted .WOFF file. I literally canโt show it here as it exceeds the maximum size limitations of a single post.
I think everything is double quoted correctly. I canโt test it on everything though, so feel free to let me know if this doesnโt work for other browsers/devices. As a proof of concept:
Default
vs
Roboto
The reason for this is because when the views are laid out the image is placed inside an HTML <img> tag which kills the ability to link to an external google font all easy peasy - appropriately as a security measure within the HTML itself. The downside being that this method can seriously impact rendering time and trying to navigate the editor with that giant string is a pain (did all the work in notepad).
Edit: After some testing between a VC and regular image column (and ~3000 rows) with the embedded font in the SVG, the performance difference is negligible (within 2 seconds of each other). Average full sync time: 45 seconds. Of which, I only force a full sync at specific moments (and might be able to completely eliminate).
And to make the editor less likely to struggle, I threw the Base64 code into a separate table so I can just grab it. This will, of course, also facilitate the use of multiple fonts if I so choose.
I was so excited about this App that I thought it should be possible to built an own Color Picker.
I already made this Color Picker for RGB, but I thought thatโs not very handy.
So here you go
Cool looking tool. I think something is wrong though. Hereโs what I see. On Firefox here, and just updated this morning.
Interesting. Just doing some testing of my applications on Firefox now. All SVGโs are working, but some are missing elements:
In my case it appears FireFox does not like a certain pattern of <Path> that render fine in other browsersโฆ
I suspect there is some element in the SVGโs generated by the DIM app that firefox is offended by, but it is certainly fixable. My radial progress bars/etc are working in FF.
