Profile Template For Appsheet

AppSheet Tips & Tricks
1

Hi everyone! As a beginner, I’m excited to share another SVG template I’ve developed with the help of Gemini AI. This time, I’ve created an Animated Profile Template packed with dynamic visual effects.

​Key features included in this template:

  • ​Rotating Gradients: Smooth, continuous color transitions.

  • ​Stroke Animation: Dynamic outlines that draw themselves.

  • ​Color-Shift Effects: Interactive or timed palette transitions.

  • ​Shape Morphing: Fluid transitions between different geometric forms.

  • ​Glassmorphism Effect: That trendy, frosted-glass aesthetic.

  • ​feMorphology Animation: Unique outline/contour effects generated directly on the photo.

  • ​Text Pattern Animation: Creative animated fills for your typography.

​I hope you find this useful for your projects! I’d love to hear your thoughts.

Mobile app link

20260315_092917
20260315_092917575×1280 68.1 KB

6 Likes
Can appsheet create icons like Icon Composer?
Does AppSheet need a Button Maker?
Banner Animation Template (Card View Type) for AppSheet
How to Create an Animated Launch/Sync Image in AppSheet?
2

​How to Use the Profile Template

​To get started, you need to create several Virtual Columns with the following configurations. Make sure to use the LongText type for text and image data to ensure the app stays stable and avoids any rendering errors.

​1. Text Content Columns

​Create six Virtual Columns for your text data. Set the type to LongText and use these formulas:

  • ​[Isi_teks] Formula: TEXT([your data1])

  • ​[Isi_teks_2] Formula: TEXT([your data2])

  • ​[Isi_teks_3]. Formula: TEXT([your data3])

  • ​[Isi_teks_4] Formula: TEXT([your data4])

  • ​[Isi_teks_5]. Formula: TEXT([your data5])

  • ​[Isi_teks_6] Formula: TEXT([your data6])

​2. Photo Configuration

​For the photo, create a Virtual Column named [Photo 1] with the type LongText.

​Important: Before using the photo, convert it to a Base64 string. Use a small image size (e.g., 180 x 180 pixels) to keep the code compact and prevent performance issues.

​Formula:

CONCATENATE (
'<image href="image_base64" x="155" y="45" width="160" height="160" preserveAspectRatio="xMidYMid slice" />')

Adjust the x and y positions to the size of your photo.

……according to template

[Photo_4] with the type LongText.

Formula :

CONCATENATE (
'<image href="image_base64" x="0" y="0" width="480" height="480" preserveAspectRatio="xMidYMid slice" />')

Adjust the X and Y positions to the size of your photo.

Link base 64 : https://www.base64-image.de/

​3. Final Output

​Create a Virtual Column named [Salin_kode] with the type Image. This is where you will paste the full SVG code template that references the columns above.

1 Like
3

​How to Use the Profile Template

​To get started, you need to create several Virtual Columns with the following configurations. Make sure to use the LongText type for text and image data to ensure the app stays stable and avoids any rendering errors.

​1. Text Content Columns

​Create six Virtual Columns for your text data. Set the type to LongText and use these formulas:

  • ​[Isi_teks] Formula: TEXT([your data1])

  • ​[Isi_teks_2] Formula: TEXT([your data2])

  • ​[Isi_teks_3]. Formula: TEXT([your data3])

  • ​[Isi_teks_4] Formula: TEXT([your data4])

  • ​[Isi_teks_5]. Formula: TEXT([your data5])

  • ​[Isi_teks_6] Formula: TEXT([your data6])

​2. Photo Configuration

​For the photo, create a Virtual Column named [Photo 1] with the type LongText.

​Important: Before using the photo, convert it to a Base64 string. Use a small image size (e.g., 180 x 180 pixels) to keep the code compact and prevent performance issues.

​Formula:

CONCATENATE (
'<image href="image_base64" x="155" y="45" width="160" height="160" preserveAspectRatio="xMidYMid slice" />')

Adjust the x and y positions to the size of your photo.

……according to template

[Photo_4] with the type LongText.

Formula :

CONCATENATE (
'<image href="image_base64" x="0" y="0" width="480" height="480" preserveAspectRatio="xMidYMid slice" />')

Adjust the X and Y positions to the size of your photo.

Link base 64 : https://www.base64-image.de/

​3. Final Output

​Create a Virtual Column named [Salin_kode] with the type Image. This is where you will paste the full SVG code template that references the columns above.

20260327_071348
20260327_071348575×1280 135 KB

20260327_071459
20260327_071459575×1280 82.2 KB

1 Like
4

To create a new view, select UX >>for this data select your table >>on view type select Gallery >> in the image size, there are options Large, medium, small, and tiny. Choose according to your wishes, for example, the medium results are as shown in the image below.

20260516_095733
20260516_095733575×1280 83.6 KB

20260516_095958
20260516_095958575×1280 79.5 KB

20260516_100117
20260516_100117575×1280 115 KB

20260530_205400

other templates :

  1. Launch image
  2. Banner Animation Template (Card View Type) for AppSheet
  3. Progress Bar: "Before & After"
  4. ANIMATED HTML IN APPSHEET: A Limitless Solution for Modern UI
5

​To create a profile with a photo, don’t forget to convert the photo to Base64 first. If it is not converted, the photo will not be displayed. Adjust its X and Y positions, as well as its size.

​Things to keep in mind regarding SVG code: do not use the “Show” column type if you are using a Base64 image. When you are working with SVG, make it a habit to use the “LongText” column type for text columns, because if the character count is too long, it usually hangs (this hanging typically occurs during a Quick Edit on a “Text” column type with long text characters).

​Severe Warning: Do not write SVG code in the middle of a highway, or you will get hit by a car. Always obey traffic signs so you stay safe on the road and can keep contributing to this community.

1 Like