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 QR Renderer element under the Display category and drop it on your screen.

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

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

• Value: Determines the data to be converted to QR code. You can enter a static value or dynamically retrieve the content of an Input element or the value obtained as a result of an action using Symbol Picker.

QR code creation in Kuika is an effective way to improve the user experience in your app and make data more accessible. QR codes are often used in product tracking, user verification or mobile payment systems.

• Data Encoding: You can provide fast information access by turning your data into QR codes. QR codes are created by converting string format data (e.g. text or URL) into base64 format and can be read via scanners or mobile devices.
• Customization: QR codes can be integrated into your visual content. You can dynamically generate QR codes for different data and create codes specific to each user or product.
• Performance: QR codes can be created and read quickly. By optimizing the data size, scanning speed can be increased and fast feedback can be provided when scanning with mobile devices.

QR Code Generation

The first step to create a QR code is to select the data you want to convert into a QR code. This data is usually kept in string format and is converted to base64 format during the QR code generation process. In this example, you will learn how to create a QR code using the URL element.

1. Log in to the Kuika platform.
2. Enter the UI Design module.

3. Drag the URL element under the Text Input category from the Elements panel on the left side to the screen.

4. In the Properties panel on the right side, enter the URL you want to convert into a QR code in the Value field.

5. Choose On Change → Export → Generate QR Code from the ADD ACTION drop-down menu.

6. In the Value field in the drop-down menu, click Symbol Picker and select Components → URL.

After these processes are completed, the QR code of the entered URL will be generated automatically.

QR Code Display

To display the QR code on a different screen, you can use the Navigate action to redirect to a new screen.

1. To display the QR code on a different screen, click on the + icon from the Screens panel of the UI Design module.

2. Select New Screen and name the screen "QR Code ”.

3. Drag and drop the Image element under the Display category from the Elements panel on the left side.
4. Go back to the screen where you added the Generate QR Code action.

5. In the Properties panel on the right side, add the On Change → Navigation → Navigate action from the ADD ACTION drop-down menu.

6. Select the "QR Code ” screen and the opening method from the To Screen field.
7. Define the ID of the QR code by clicking on the Screen Input field on the right side.

Once this process is complete, your QR code will be displayed on the screen you just created.

QR Code Reading

Mobile devices and scanners can be used to scan QR codes. Simply add the Scan Barcode action to the element where you want to scan the QR code.

1. Go back to the URL element.

2. Add the On Change → Device → Scan Barcode action from the ADD ACTION drop-down menu.

This action allows users to scan the QR code via their mobile device or browser.

Important Notes

• QR codes can be generated and read quickly, even with large data sets.
• The QR Renderer element gives users instant access to a specific data or link.
• Easily scannable by mobile devices, QR codes enhance the user experience and make your app more user-friendly.

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.