Kuika's Image element allows you to enrich the user experience by adding visual content to your application. It supports static images as well as dynamically changing images. Images can be pulled from a fixed URL or from a data table. In addition, the Image element offers clickability, scaling and resizing features. In this tutorial, you will learn how to use the Image element and how to configure its properties.
The Image element is supported in web and mobile applications.
This training content consists of the following topics:
Adding an image element
Image element properties
Adding an image to the data source with the Image element
Remove the image added to the data source
Instant photo upload
Element settings and customization
Add Image Element
Log in to the Kuika platform.
Select the project you will work on from the Apps screen.
Enter the UI Design module.
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.
Image Element Properties
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
In the Properties panel, click on the Value field.
Select Uploaded Images from the drop-down menu.
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.
Add Images to Your Data Source with the Image Element
Open your application on the Kuika platform.
In the UI Design module, drag the Image element from the Elements panel to the screen.
Drag an Icon element from the Elements panel and place it below the Image element.
Click on the Icon element you added.
Click ADD ACTION in the Properties panel on the right edge.
Choose OnClick → Device → Photo From Gallery.
Go back to the ADD ACTION menu and choose OnClick → UI Control → Set Value Of.
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
Place an Icon element (for example, the “X” icon) below the Image element.
Click on the Icon element.
Click ADD ACTION in the Properties panel on the right edge.
ChooseOnClick → UI Control → Set Value Of.
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
Place an Icon element (for example, the “camera” icon) below the Image element.
Click on the Icon element.
Click ADD ACTION in the Properties panel on the right edge.
Choose OnClick → Device → Photo Take.
Go back to the ADD ACTION menu and choose OnClick → UI Control → Set Value Of.
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.
Element Settings and Customization
Authorization
Anonymous Access: Allows users to access without entering account information.
All Roles Access: Provides access by verifying users' account information.
For element-level authorization, edit Authorization settings in the Properties panel.
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:
Select the element on the screen.
Open the Properties panel on the right edge.
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.
Actions
Kuika supports the following system actions:
Arithmetic, Authorization, Condition, Device, Export, Geolocation, Inversion, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.
You can also use SQL actions that you create yourself.
You can use the +ADD ACTION button from the Properties panel to add an action.
Actions support may not be available in some elements.
