How to Create a Before/After Progress Bar in AppSheet
Follow these steps to integrate your images and create a visual progress comparison:
1. Prepare Your Images
Prepare two photos (Before and After). You can ask Gemini to generate these images for you to ensure high-quality and consistent results.
2. Resize Images
Resize your images (e.g., 250x250 pixels). Resizing is crucial to keep the file size small, as you will be converting them into Base64 format.
3. Convert to Base64
Convert your resized images to Base64 code using an online converter tool. Once converted, keep the resulting text codes ready.
4. Create “Before” Virtual Column
Create a new Virtual Column named B64 BEFORE EFFECT 1, set the type to LongText, and use this formula:
concatenate('<image href="PASTE_BASE64_CODE_HERE" width="480" height="480" />',"")
Replace PASTE_BASE64_CODE_HERE with the Base64 code you generated for the “Before” image.
5. Create “After” Virtual Column
Create a new Virtual Column named B64 AFTER EFFECT 1, set the type to LongText, and use this formula:
concatenate('<image href="PASTE_BASE64_CODE_HERE" width="480" height="480" />',"")
Replace PASTE_BASE64_CODE_HERE with the Base64 code you generated for the “After” image.
6. Create the SVG Display Column
Create a new Virtual Column (e.g., named DISPLAY SVG) with the type set to Image. Paste your SVG code into this column to render the graphic from SALIN KODE SVG.
Or from here
Good luck and hope it works!
