Add Images to Your Data Source with the Image Element

The Image element allows you to add images to your data sources, and this helps you to increase visualization in your application. It is especially useful for pages with visual content such as product catalogs, user profiles or reports. General functions of the Image element:

• Adding Images: You can add images to a table, form or any data component using image URLs from your data sources. It allows product images, avatars or graphics to be displayed directly in the user interface.
• Customization: You can customize the size, alignment, and other style properties of images according to your needs. You can present visual content that fits the overall design of your app.
• Performance: The Image element loads fast, even on large datasets, and provides high performance without negatively impacting the user experience. By optimizing images, you can improve performance and minimize page load times.

This training content consists of the following topics:

1. Adding images to the data source with the Image element,
2. Remove the image added to the data source,
3. Instant photo upload.

Adding an Image to a Data Source with Image Element

To add images to your data source with the Image element;

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

2. In the “UI Design” module, drag and drop the Image element under the “Display” category from the “Elements” panel on the left side.
3. To add an image to the Image element while your application is running, drag an “Icon” element from the “Elements” panel and place it under the Image element.
4. Then click on the Icon element you added.
5. Click “ADD ACTION” from the Properties panel on the right side.
6. Select “Onclick → Device → Photo From Gallery”.
7. Return to the “ADD ACTION” drop-down menu and select “Onclick → UI Control → Set Value Of”.
8. In the “Component To Change” field, select the Image element you want to load the related image.
9. In the “Value” field, click the Symbol Picker and select “Action Results → Photo From Gallery”.

Now, when you run the app, you can upload an image from your computer when you tap the icon below the display area.

Remove Image Added to Data Source

1. Place one more “Icon” element under the Image element. For example, you can choose an “X” icon.
2. Click on the “Icon” element you added.
3. Click “ADD ACTION” in the Properties panel on the right side.
4. Select “Onclick → UI Control → Set Value Of”.
5. In the “Component To Change” field, select the Image element you want to delete.
6. In the “Value” field, click the Symbol Picker and select “Default → Empty”.

Once you have done this, your image will now be removed when you click the “X” icon.

Upload a Snapshot

1. Place one more “Icon” element under the Image element. For example, you can choose a “camera” icon.
2. Click on the “Icon” element you added.
3. Click “ADD ACTION” in the Properties panel on the right side.
4. Select “Onclick → Device → Photo Take”.
5. Return to the “ADD ACTION” drop-down menu and select “Onclick → UI Control → Set Value Of”.
6. In the “Component To Change” field, select the Image element you want to load the related image.
7. In the “Value” field, click the Symbol Picker and select “Action Results → Photo Take”.

After completing these actions, when you click on the camera icon, your device's camera will open and you will be able to take snapshots and upload them to your app.