1. Log in to the Kuika platform.
2. Select the project you will work on from the Apps screen.
3. Enter the UI Design module.

4. From the Elements panel on the left side, drag the Image element under the Display category and drop it on your screen.

• If you drag the Image element to an empty space, it will automatically be added inside a Row element.
• If you drag it into a Column, only the Image element is added.

You can configure the properties of the Image element in the Properties panel on the right sidebar.

• Value: Sets the static or dynamic values that the Image element will receive. With Symbol Picker you can select one of the images from the image library using the Uploaded Images option. When a data connection is established, the image from the data table can also be displayed.
• Placeholder Image: Shows a default image when no image is uploaded. You can change this image according to your needs.
• Zoom On Click: Allows zooming in on the image by double-clicking or tapping.
• Image Fit: Determines how to fit the image to the size specified in Styling > Layout. It can also adapt to the size set by the element's parent element.

Using the Image Library

1. In the Properties panel, click on the Value field.
2. Select Uploaded Images from the drop-down menu.

3. The image library window contains the following options:
   
   • ADD IMAGE: You can add images from your device by dragging and dropping or selecting a file.‍
   • GENERATE WITH AI: You can generate images that are not available in browsers by describing the image you want with the AI assistant. You can add the generated images to the library by clicking the Download icon in the upper right corner.

PNG, JPG and SVG formats can be viewed directly in both web and iOS apps. However, SVG format is not supported in Android apps. For this, you must upload images in Android Vector Drawable - XML format. When you upload both .svg and .xml formats with the same name, Kuika automatically selects the appropriate format based on the device type.

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.

‍

Authorization

To manage access control at the element level, you can use the Authorization section in the Properties panel.

Access Types

Anonymous

Allows all users to view the element without logging in.

Restricted

Restricts access to only verified users or specific roles.

• Everyone: When enabled, all logged-in users can access the element.
• Roles: The roles allowed to access the element are selected here. To edit the role list, click the gear (⚙️) icon next to the Roles field to open the Role Management window. From this window, you can add new roles, create folders, or manage existing roles.

Unauthorized Behavior (Hide / Disable)

If the user does not have the required role, you can specify how the element should behave in the Choose field:

• Hide: If the user is not authorized, the element is completely hidden and does not appear on the screen.
• Disable: The element remains visible but becomes unclickable / unusable.

This setting is used to manage how unauthorized users encounter the element.

Visibility

• Always Visible: Element is always visible.
• Hidden: Element is hidden.
• Sometimes Visible: The element is visible depending on a specific condition.

To configure the setting:

1. Select the element on the screen.
2. Open the Properties panel on the right edge.
3. In the Visibility field, select an option according to your needs.

Editability

• Enabled: Elements can be edited.
• Disabled: Element cannot be edited.
• Sometimes Enabled: The element can be edited or uneditable according to certain conditions.

Interface Design with Style Panel

By customizing your elements with the Styling Panel, you can create impressive interfaces for your web and mobile applications. In this section, you can configure the following settings:

• Layout: Sizing, alignment and padding settings. Settings include Size, Min Size and Align.
• Text: Font, style, color, size and spacing settings.
• Fill: Customize the background with color or images.
• Border: Add borders and corner radius settings.
• Shadow: Add a shadow effect to add depth to elements.

By following these steps, you can configure the Area Chart element to suit your needs.