Kuika's QR Renderer element is used to dynamically generate and display QR codes in your application. It allows users to quickly scan and access specific data or a link. QR codes are typically scanned by mobile devices to direct users to a specific page, share a link, or initiate an app action. For example, you can display a QR code for a checkout page or an event ticket. In this tutorial, you will learn how to create and display QR codes in your application using the QR Renderer element.
The QR Renderer element only supports web applications.
This training content consists of the following topics:
Adding a QR Renderer element,
QR Renderer element properties,
Authorization,
Visibility,
Editability,
Customize the interface design with Style Panel,
Actions.
Add Qr Renderer Element
After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.
In the “UI Design” (1) module, drag and drop the QR Renderer element (4) under the “Display” (3) category from the “Elements” (2) panel on the left side.
You can drag and drop the QR Renderer element from the Elements panel to the screen. If you drag it to an empty space on the screen, it will be added together with the Row element. If you drag it into a Column, only the QR Renderer element is added.
Qr Renderer Element Properties
Value: This is the field where you set the static or dynamic value to be translated into QR code.
Creating and Reading Data with QR Code
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 especially useful in product tracking, user verification or mobile payment systems. General functions of the QR code generation process:
Data Encoding: By turning your data into a QR code, you can provide quick access to information about a product, user profile or transaction. QR codes are created by converting string format data (e.g. text, URL, etc.) into base64 format and can be read via browsers 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, especially with large data sets. By optimizing the data size, the scanning speed of QR codes can be increased and fast feedback can be provided when scanning with mobile devices. Using QR codes makes your application high-performance and user-friendly.
This training content consists of the following topics:
QR Code creation,
QR Code display,
QR Code scanning.
Create QR Code
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 tutorial, you will learn how to create a QR code using the URL element.
After logging into the Kuika platform, open the project you will work on from the “Apps” screen.
In the “UI Design” module, drag and drop the URL element under the “Text Input” category from the “Elements” panel on the left side.
From the Properties panel on the right side, enter the URL you want to convert to QR Code in the “Value” field.
Then select “On Change > Export > Generate QR Code” from the “ADD ACTION” drop-down menu.
Select “Components → URL” by clicking Symbol Picker from the “Value” field in the drop-down menu.
View QR Code
If you want to view the QR Code on a different screen, you can use the “Navigate” action to redirect to a new screen.
After creating a QR Code, follow the steps below:
To display the QR code on a different screen, click on the “+” icon from the Screens panel of the UI Design module.
Select “New Screen” and name the screen you created “QR Code”.
Drag and drop the Image element under the “Display” category from the “Elements” panel on the left side.
Go back to the screen where you added the Generate QR Code action.
Add the “On Change → Navigation → Navigate” action from the “ADD ACTION” drop-down menu on the right side.
In the “To Screen” field, select the “QR Code” screen and the method of opening it.
Then click on “Screen Input” on the right side and define the ID of the QR code.
Your QR code will now be displayed on the screen you just created.
Reading the QR Code
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.
Go back to the URL element.
Add the “On Change → Device → Scan Barcode” action from the “ADD ACTION” drop-down menu.
With this action, you can scan QR code on mobile devices and browsers.
Authorization.
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.
Visibility.
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.
Click on the element on the screen.
Open the “Properties” panel on the right side.
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.
Editability
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.
Customize the İnterface Design with Style Panel
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.
Actions.
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.
