Kuika's Get Component Base64 action allows you to retrieve a specific element from a web application in Base64 format. While images, files, and media content are already stored in Base64 format, the primary importance of this action lies in the conversion of complex components used or displayed on the screen into Base64.

This enables elements on complex screens to be converted to Base64 format, making it possible to convert the entire screen to PDF or other formats. This feature provides significant convenience for visual and data conversion in dynamic and rich-content applications.

Technical Features

Base64 Format: The data of the selected component is retrieved in Base64 format.
Quality Setting: The quality level used in Base64 conversion can be adjusted.
Orientation: The output can be selected as horizontal (landscape) or vertical (portrait).
Web Application Support: Works only in web applications.

Get Component Base64 Action Application Steps

Log in to the Kuika platform.
Open the project you will be working on from the Apps screen.
Go to the UI Design module and select the relevant screen.
Identify the element from which you want to retrieve the Base64 value.
If desired, add a button to trigger the process (e.g., ‘Get Base64’).

Select the button and add the Device > Get Component Base64 action from the + ADD ACTION menu according to the trigger event you want (Initial Actions, OnClick, OnBlur, etc.).

Configure the parameters:
- Component To Save As PDF: Select the component to be converted to Base64.
- Quality: Conversion quality level.
- Orientation: (Optional) Whether the output should be horizontal or vertical.
SAVE button to complete the process.

Use Case: Getting the Report Component on the Dynamic Screen in Base64 Format and Downloading it as a PDF

In a business application, users view their reports on a dynamically generated report screen with various graphs, tables, and text components. Users want to convert this report component to Base64 format, convert it to PDF, and download it to their devices.

Adding the Get Component Base64 Action

UI Design module, create a button named ‘Download as PDF’.
Select the button and add the Get Component Base64 action from the Properties panel:
- + ADD ACTION → OnClick → Get Component Base64.
In the Get Component Base64 action:
- Component ID: Specify the ID of the container or panel where the report is located. (For example: reportContainer)
- Set the Quality and Orientation parameters as needed.
Once the Get Component Base64 action is complete, pass the returned Base64 data as a parameter to the next action.

Then, you can use the Base64 data to download the PDF file using Download File From Server or initiate an external API call.

Get Component Base64 Action Advanced Customisations

Dynamic Binding: You can dynamically bind the Base64 output to different components, variables, or API calls.
Quality Optimisation: You can balance performance and quality by controlling the output size with the quality parameter.
Orientation Setting: With the orientation parameter, you can easily change the output orientation according to your application's needs.

Technical Risks

Performance: High quality settings can result in large Base64 outputs and negatively impact application performance.
Orientation Error: Incorrect orientation selection can cause outputs to be encoded incorrectly or not displayed.