Report Designer

To create a new report:

1. After logging into the Kuika platform, open the project you will work with from the “Apps” screen.

2. Then click on the “Report Designer” module.
3. From the screen that opens, give the report a name (1) and click the “CREATE” (2) button.

So you have added a new report to your application.

When you examine the Report Designer Canvas, you will notice a gridded background and a “free position” feature that allows you to position elements freely. Thanks to this feature, you can add elements to different areas of your design as you wish, thus shaping the report page in a unique way.

There are horizontal and vertical blue rulers on the canvas, which facilitate the alignment and editing processes while designing. With the help of the rulers, you can achieve an aesthetic look by positioning the elements in a symmetrical and organized manner.

When designing the report page, you can customize the width setting by holding down the sizing icon that appears by clicking on the edge of the Canvas. Canvas allows you to set the width between a minimum of 320 pixels and a maximum of 517 pixels. This customization determines how the report will appear in digital or printed format. Especially when reports are designed to be printed or shared digitally, setting the Canvas to the correct dimensions ensures that the output looks responsive on paper or digital devices.

On the left side of Canvas there is a structure similar to the one in the UI Design panel. This section contains the Elements Panel, Custom Actions and Item Tree panels that you will need to create your report. In the Elements panel, you can see the different types of elements you can add to your report. The Custom Actions panel allows you to define custom actions, for example, you can define dynamic filters or conditional formatting within the report. Item Tree allows you to view and organize all the elements you use in the report in a hierarchical structure.

With this module, you can make your reports more than just a tool focused on data presentation, you can make them visually effective and user-friendly, and design reports tailored to your business needs.

While in the Report Designer module, let's examine the elements and their usage areas in the “Elements” panel on the left side.

• Header: It is a fixed header field used to show the report title and general information. The header acts like a panel and is automatically added on each report page. For example, when you create a 10-page report, the header section appears at the top of each page, ensuring consistency across all pages.
• Footer: A fixed footer area at the bottom of the report used to show general information or explanations. Just like the header, the footer is added automatically on each page. When you create a 10-page report, each page will have a footer at the bottom, ensuring a consistent footer area across pages.
• Label: An element used to add text, descriptions or labels. Unlike UI Design, it can be automatically resized according to the text length. With the “Writing Mode” property of the Label element, you can set the text orientation horizontally or vertically, making the text more readable and cohesive.
• Icon: Used to add visual icons to your reports. This element is ideal for highlighting important information or specific content in the report.
• Box: It is a box element used to create an organized look by grouping certain sections. Box allows you to customize the background color or style and creates distinct areas within the report.
• Panel: An element used to group a group of elements together to create an organized structure. A panel allows you to edit and organize other elements within it.
• Barcode Renderer: An element used to display product information, ID numbers or other data in barcode format. In this way, the data can be read quickly with scanner devices.
• Page Break: Creates a break between report pages. This element is used to break long reports into pages in an organized way.
• Image: Used to add logos, photos or other visual elements to reports. It supports Base64 format images and can be easily resized with the mouse. Also, sizing and styling settings can be made from the styling panel.
• QR Renderer: It is an element used to display data in QR code format. QR codes can be easily scanned with mobile devices.
• Report Table: It is an element used to create data tables. With the Panel Block feature, you can edit the contents in the table and make your tables more organized and user-friendly.

Additional Features and Usage Details

Adding Elements to Canvas from the Elements Panel:

• Elements are added to Canvas automatically by creating a panel.
• In panel sizing, a value smaller than the size of the element cannot be given. Elements cannot extend beyond the panel.

Position and Size Changes:

• When the positions of the elements on the canvas are changed by drag and drop, the position (X-Y) values in the styling panel are automatically displayed according to the new position.
• The size of the panel behind the elements also changes according to the changes made in the size values.

Kuika's Report Designer elements and features allow you to design your reports more effectively and present the data you want in a visually rich format.

Reports Panel in Report Designer is the main window where all reports in the application are listed and managed. With this panel, you can view and edit existing reports and create new reports. With its user-friendly interface, it allows you to quickly access and manage the reports you need.

To create a new report, click on the “+” icon at the top of the panel. This will start the process of creating a new report. On the screen that opens, enter a meaningful and descriptive name for the report you want to create. After the naming process is completed, you can start the report creation process by clicking the CREATE button.

After the new report is created, your report is ready for design and you will be directed to the editing screen. On this screen, you can customize your report and shape it according to your needs by using the wide set of tools offered by Report Designer. While creating your report, you can add data sources and make your data more understandable by using visual elements such as graphs and tables.

Reports Panel also allows you to perform various operations on existing reports. You can perform basic management operations such as editing, copying or deleting reports through the listed reports. These features make it possible to manage the reports in your application in a neat and organized way.

In conclusion, Reports Panel is a comprehensive tool that allows you to manage, edit and create new reports from a single centralized location. This panel gives you full control over your reports, making it easy to create visually powerful reports that fit your business needs.

The Properties Panel in Report Designer dynamically changes and offers different options depending on the selected element or Canvas properties. It allows you to customize your report design in detail. The Actions and Report Inputs sections in particular contain important settings that will improve the functionality of the report.

Main Sections in the Properties Panel

1. Actions

The Actions section in the Properties Panel is the area where the actions that will work in the report content are defined. You can use all system actions defined in the Kuika system or special actions that you create according to your needs. For example, you can share the report by using the “Share” system action in the report design. Thanks to these actions, user interactions can be easily defined and reports can be made more functional. You can find more information about actions in System Actions and Custom Actions.

2. Report Inputs

Report Inputs are used to facilitate the process of moving data from another screen to the report. These inputs come into play when the report needs to get information from different screens while creating the report. For example, you can use date inputs to filter a specific date range in a sales report. To create a new Report Input, click the +ADD REPORT INPUT button. In the window that opens, specify the input name, select the input type and then easily define a new input by clicking the Create button. In this way, your reports can dynamically receive data and be updated according to specific criteria.

Differentiation of Properties Panel by Elements

As in the UI Design module, the Properties Panel in Report Designer differs according to the selected element. Since each element has its own properties, different elements offer different setting options. For example: 

• Icon: When you select the Icon element, the Properties Panel focuses on settings such as the size, color, and style of the icon. With these properties, you can make icons visually harmonious in your design.

• Label: When you select the Label element, you are presented with settings such as text size, font, alignment and color. You can also set the horizontal or vertical positioning of the text with the Writing Mode property of the Label element. This allows you to easily adjust the position and appearance of the text to match the design.

The Properties Panel allows you to have detailed control over your reports as it shows the custom settings for each element. With this panel, you can make your reports user-friendly and fit for purpose, both visually and functionally.

The Styling Panel in Report Designer is similar to the structure in UI Design, but with some limitations. It provides the necessary tools to set and edit the visual style of the report, but some features from UI Design are disabled here due to limitations specific to Report Designer.

Styling Panel Contents

Fill Panel

The Styling Panel contains a Fill Panel for Canvas. The Fill Panel is used to specify the background color or image of the Canvas. The background design is an important element that affects the overall look of the report and the options here add aesthetics to your design.

• Background Image Field: The Background Image field in the Fill Panel allows you to add an image as a background to the Canvas. Two different options are offered here:some text
  • Add Image: With the “Add Image” option, you can add any image from your device to the Canvas background. This feature is ideal for users who want to add logos, patterns or a specific corporate identity image. The added image is automatically resized on Canvas or can be adjusted to the desired dimensions.
  • Generate With AI: With the “Generate With AI” option, you can request an AI assistant to generate images for the Canvas background. This feature is an ideal solution for creating unique and creative background images. For example, if you want to create a background image that fits a particular theme or concept, you can quickly get the design you want thanks to this AI-powered feature.

Styling Panel Usage and Advantages

Apart from background settings, the Styling Panel can also be used to edit general style settings for Canvas and other elements. Although some of the features in UI Design are limited, the Styling Panel helps you to improve the visual appearance of your reports and create a cohesive design. By giving your reports a professional look, you can deliver a more impressive and user-friendly experience.

This panel combines aesthetics and functionality, streamlining the design process, especially for reports where visual presentation is important.