Report Designer

Report Designer Canvas has a more flexible usage structure than UI Design.

When Canvas is examined, it welcomes users with a squared and free position canvas.

Free position allows you to freely add elements to any area on the canvas. There are horizontal and vertical rulers on the canvas, which appear in blue colour. These rulers also provide ease of alignment on the canvas.

When designing the report page, you can customise the report width to a minimum of 320px and a maximum of 517px by holding down the sizing icon that appears when you click on the edge of the Canvas. The size of the canvas determines how your design or report will look. Reports or designs are often printed or shared digitally. Setting the canvas to the correct dimensions ensures that your document fits neatly on paper or in digital format.

As in the UI Design panel, there are Elements panel, Custom actions and Item tree panels on the left.

In Kuika's Report Designer module, you can design or edit PDF reports using various elements. These elements, which have more basic features compared to the UI Design panel, can be positioned freeform on the canvas. This makes reports more effective and visually rich. In this tutorial, you will learn how to effectively use the elements in the Elements panel of the PDF Report Designer module.

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

‍

1. Header: Used to show the report title and general information. It acts like a panel and is automatically added on each report page. For example, when a 10-page report is created, the header is included as the header field of each page.
2. Footer: Used to show general information or notes at the bottom of the report. It acts like a panel and is added automatically on each report page. For example, when a 10-page report is created, each page will have a footer at the bottom edge (as a footer field).
3. Label: Used to add text, descriptions or labels. Unlike UI Design, it can be resized depending on the text length. With the “Writing Mode” property of the Label element, you can set the text orientation vertically or horizontally.
4. Icon It is the element used to add visual icons.
5. Box: It is used to provide an organized view by grouping certain sections in the report and to design boxes with customizable backgrounds.
6. Panel: Used to bring a group of elements together to create an organized structure.
7. Barcode Renderer: Used to display product information, ID numbers or other data in barcode format.
8. Image: Used to add logos, photos or other visual elements to reports. Base64 images can be added and easily resized with the mouse cursor. Also, sizing and styling operations can be done from the styling panel.
9. QR Renderer: It is used to display data in QR code format, so it can be easily scanned with mobile devices.
10. Report Table: Used to create data tables in reports. You can edit the contents in the table with the Panel Block feature.

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.

Report panel is the panel where the Reports in the Application are listed. You can create a new Report in this panel. To create a new Report, first click on the + icon.

Then name the report on the screen that opens and click the CREATE button.

Properties panel is diversified according to elements and Canvas properties. When we look for Canvas, there are Actions and Report Inputs in the Properties panel.

        1. Actions

When the Report Designer Properties panel is examined, there are actions that will work in the created report content. You can use all system actions in Kuika and special actions you will create in Report Designer view mode. For example, you can share the report created by using the Share system action in the report design. You can access detailed information about actions from System Actions and Custom Actions contents. ‍

        2. Report Inputs

This is the area where the inputs are created for the data transfer process when coming from another screen to the designed report. Click +ADD REPORT INPUT to create Report Input. In the window that opens, you can easily create a Report Input by selecting the Input naming and Input type and clicking the Create button.

As in UI Design view mode, Properties panel can be differentiated according to the elements in Report Designer view mode.

For example, the Properties panels of Icon element and Label elements are different.

In Report Designer, the structure as Styling Panel does not differ from UI Design. Only restrictions have been introduced. In the Styling panel, there is a Fill panel belonging to Canvas. There is also a Background Image area of the Fill panel. In this field,

With Add Image, you can add the images on your device to your application within the Canvas background.

With Generate With AI, you can ask the artificial intelligence assistant to generate images for the Canvas background.