Add Images to Your Data Source with the Image Element

1. Open your application on the Kuika platform.

2. In the UI Design module, drag the Image element from the Elements panel to the screen.
3. Drag an Icon element from the Elements panel and place it below the Image element.
4. Click on the Icon element you added.
5. Click ADD ACTION in the Properties panel on the right edge.
6. Choose OnClick → Device → Photo From Gallery.
7. Go back to the ADD ACTION menu and choose OnClick → UI Control → Set Value Of.
8. In the drop-down menu:
   
   • Component To Change: Select the Image element where the image will be loaded.
   • Value: Select Action Results → Photo From Gallery via Symbol Picker.

Now when you run the app, you can upload an image from your device by clicking on the corresponding icon.

Removing an Image Added to a Data Source

1. Place an Icon element (for example, the “X” icon) below the Image element.
2. Click on the Icon element.
3. Click ADD ACTION in the Properties panel on the right edge.
4. ChooseOnClick → UI Control → Set Value Of.
5. In the menu that opens:
   
   • Component To Change: Select the Image element from which the image will be deleted.
   • Value: Select Default → Empty via Symbol Picker.

Once this is done, the image will be removed when the user clicks the “X” icon.

Uploading a Snapshot

1. Place an Icon element (for example, the “camera” icon) below the Image element.
2. Click on the Icon element.
3. Click ADD ACTION in the Properties panel on the right edge.
4. Choose OnClick → Device → Photo Take.
5. Go back to the ADD ACTION menu and choose OnClick → UI Control → Set Value Of.
6. In the menu that opens:
   
   • Component To Change: Select the Image element where the image will be loaded.
   • Value: Select Action Results → Photo Take via Symbol Picker.

Once this is done, clicking on the camera icon will open your device's camera and you will be able to take snapshots and upload them to your app.

Important Notes

• The Image element loads fast even with large datasets and provides high performance without negatively impacting the user experience.
• Photos stored in Base64 format are displayed through the ID of the table to avoid network slowdowns.
• You can customize the size, alignment and other styling properties of images using the Styling > Layout settings.

‍