Image

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

2. In the “UI Design” (1) module, drag and drop the Image element (4) under the “Display” (3) category from the “Elements” (2) panel on the left edge.

3. Then click Value from the “Properties” panel on the right side. Select “Uploaded Images” from the drop-down menu. There are “ADD IMAGE” and “GENERATE WITH AI” buttons in the image library.

• ADD IMAGE: You can add images from your device by drag and drop or by selecting them from your computer.

• GENERATE WITH AI: When you click on the button, a chatbot opens. As a result of the definition sentences you write to the chatbot, artificial intelligence generates images that are not available in browsers. To add the generated images to the Image Library, you can click the download icon on the top right corner of each image to add the image to the library.

If you drag the Image element to an empty space on the screen, it will be added with the Row element. However, if you drag it into a Column, only the Image element will be added.

If you have your own custom icon set, you can add it with Image or Uploaded Images options. Image formats such as PNG, JPG and SVG are displayed directly in both your Web and Native iOS apps. However, SVG format images cannot be displayed in Native Android apps. For this, you must upload images in Android Vector Drawable - XML format. When adding the corresponding static image, you must upload both .svg and .xml formats with the same name. Kuika checks this name when developing code for Android and iOS and selects the appropriate format for the device.

The Kuika platform accesses photos stored in base64 format through the ID of the table so that it does not slow down the network.

Image Properties panel, to view the properties of the Image element, select the element and open the Properties panel. This is the panel where you can set and change the properties and contents of the Image element.

This panel contains the following properties:

• Value,
• Placeholder Image,
• Zoom Onclick,
• Image Fit.

1. Value: This is the field where you specify the static or dynamic values that the Image element will take. With Symbol Picker, you can select one of the images you have added to the image library using the Uploaded Image option. You can also show the image added to an element as well as the predefined images through Symbol Picker. When a data connection is established, the relevant image in the data table can also be displayed.

Image Library with AI Assistant: Kuika platform has integrated AI technology to speed up and simplify the application development process. Using the AI assistant, you can describe the image you want to add in just a few words.

2. Placeholder Image: You can add a placeholder image in cases where the image is not loaded. It comes with a default image, but you can change it according to your needs.
3. Zoom On Click: In mobile or web applications that you create with the Image element, you can zoom in after double-clicking or tapping on the image.
4. Image Fit: The Image element can have a custom size based on the values specified in Styling > Layout. It can also adapt to the size specified by the element's parent element. In this case, you can specify how the image fits into the Image element frame.

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.

You can customize user access with “Anonymous Access” and “All Roles Access” authorization options on the screens and elements of your application. While “Anonymous Access” enables access without any account information query, “All Roles Access” provides access by verifying user account information.

For element level authorization, you can manage the security and user experience of your application by selecting the relevant element and editing the “Authorization” settings from the Properties panel.

It allows you to adjust the visibility of screens or elements. Visibility in Elements allows you to regulate visibility based on a specific state or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.

1. Click on the element on the screen.
2. Open the “Properties” panel on the right side.
3. Click on the “Visibility” field and make one of the following selections according to the needs of your application. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.

• Always Visible: Ensures that the screens in your app are always visible. ‍
• Hidden: Allows hiding screens in your application. ‍
• Sometimes Visible: Makes screens in your application conditionally visible.

Allows you to make elements editable.

• Enabled: Selecting this option makes the element editable.
• Disabled: In this case, the element cannot be edited.
• Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.

By customizing your elements with the Styling Panel, you can create unique and impressive user interfaces in your web and mobile applications.

The sections defined below vary depending on the element.

• Layout‍: Here you can make visual adjustments such as sizing, alignment and padding of elements. These settings also affect the layout of other elements within the element. Properties include Size, Min Size and Align; however, some elements may not support the Display property.
• Text: The element's text properties can be edited here through font family, style, color, size, spacing and other options. This section supports all Text related adjustments.
• Fill: You can use the Fill setting to customize the element's background with color or images.
• Border: You can give your elements a more aesthetic look by adding borders and adjusting the corner radii.
• Shadow: You can add a shadow effect to elements used in web applications to give a sense of depth. However, the shadow feature may not be supported as some elements are not suitable for mobile applications.

Kuika contains system actions such as Arithmetic, Authorization, Condition, Device, Export, Geolocation, Invers, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.

In addition to system actions, you can also use SQL actions that you create yourself.

To add actions to elements, you can use the “+ADD ACTION” button from the Properties panel on the right side.