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.