Explore the Report Designer mode

Report Designer can create reports, contracts, proposals, etc. submitted by kuika. It offers an environment where you can design reports depending on your imagination. Design operations in Report Designer are only supported in web applications.

Download Report operations are supported on both mobile and web.

You can access the Report Designer panel with the Report Designer icon in the Header.

To create a new report design, click Create a new Report, name the report design, and click CREATE.

1. Report Designer Canvas

Report Designer Canvas appears with a more flexible usage structure compared to UI Design.

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

The free position allows you to freely add elements to any area on the Canvas. On the canvas, there are rulers that appear in blue, both horizontally and vertically. These rulers also provide ease of alignment on the canvas.

When designing the report page, you can customize 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 right 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.

2. Elements Panel

The Elements panel does not include all the elements as in the UI Design panel. There are Header, Footer, Label, Icon, Panel, Image, Barcode Render, Report Table, and QR Renderer elements. They have more personalized features than the elements in the UI Design panel. While adding elements to canvas from the Elements panel, they are added by creating a panel behind it.

When the positions of the elements on the Canvas are changed with the mouse cursor, the position (X-Y) values are automatically entered in the Styling panel.

In line with the changes made in the Size values, the size of the panel behind the elements also changes accordingly.

In panel sizing, a value cannot be given less than the size of the element in it. Elements cannot protrude beyond the panel.

Header and Footer: Unlike UI Design, it acts like a panel and generates on every report page. For example, when a 10-page report is generated, the header and footer will be rendered at the beginning and end of all 10 pages.

Label: Unlike UI Design, you can resize the Label depending on the text length of the resize feature on Canvas.

Image: Base64 images can be added to the Image element. Unlike UI Design, you can easily resize the image element with the mouse cursor with its ability to be resized on Canvas. Besides this feature, you can also resize and style it from the styling panel.

You can easily resize Barcode Render and QR Renderer elements with the mouse cursor, with their resizability feature on the canvas.

Table: The Table element covers the entire panel to which it is added. As in UI Design, you can do data binding by adding a label to the table element. Since table padding is turned off in the styling panel, you can manage spacing by adding inter-element padding.

The page length of the report changes as much as the data is added to the table element and the other elements in the report. For example, when the panel with the table element and the panel with the label element are included in the report, the label panel at the bottom will slide up or down according to the data in the table.

3. Report Panel in Report Designer

The Report panel is the panel where the Reports in the Application are listed. You can create a new report in this panel. First, click the + icon.

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

4. Properties Panel in Report Designer

The Properties Panel varies according to elements and Canvas properties. When we look at the Properties panel for the Canvas, it includes Actions and Report Inputs.

1. Actions

When examining the Report Designer Properties Panel, you will find the actions that will work within the created report content. In Kuika, you can use all system actions and custom actions you create in the Report Designer view. For example, you can use the Share system action in the report design to enable sharing of the created report. For detailed information about actions, you can access the contents of System Actions and Custom Actions.

2. Report Inputs

The area where data transfer is performed when coming from another screen to the designed report is the place where Inputs are created. To create a Report Input, click on +ADD REPORT INPUT. In the opened window, you can easily create a Report Input by naming it and selecting the Input type, then clicking on the Create button.

Just like in the UI Design view mode, the Properties panel in the Report Designer view mode can also vary depending on the elements.

For example, the Properties panels of the Icon element and Label element differ from each other.

5. Styling Panel in Report Designer

The basic structure of the styling panel in Report Designer does not differ from UI Design. There are only restrictions. In the Styling panel, there is the Fill panel of Canvas. In addition, the Fill panel has a Background Image field. In this area,

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 produce images for the Canvas background.