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

• 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:

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.

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.