User Manual

Report Designer

19/12/25
Report Designer

Kuika's Report Designer module is used for creating, editing and visualizing reports in your applications. With this module, you can compile information from different data sources, prepare user-friendly reports and publish them within the application. In this course, you will learn how to design reports, visualize data and customize report outputs through the Report Designer module.

Create a New Report

To create a new report:

  1. Log in to the Kuika platform and open the project you will work with from the Apps screen.
  1. Select the Report Designer module.
  2. Give your report a name on the screen that opens.
  3. Create your new report by clicking the CREATE button.

Report Designer Design Area (Canvas)

Canvas is the design area and, thanks to the free position feature, allows elements to be positioned flexibly and freely on the page. Throughout the design process, Canvas offers advanced alignment and measurement tools for both visual layout and print compatibility.

Blue rulers facilitate the alignment of elements on the page. Ruler units can be changed between inches and mm, allowing for more precise dimensioning for print-focused designs.

Canvas has an isometric (dot grid) design mode. In this mode:

  • You can switch between free mode and dot grid view.
  • Elements can be dragged by aligning them to dots.
  • Dot spacing can be adjusted.
  • The default view is in dotted paper layout.
  • The user's preferred view is saved in the browser.

Page margins (padding) can be customized. In dotted design mode, padding areas are displayed without dots, visually separating the content area.

  • Paper Size - The field in the Header section contains the following sizes:
    • Custom: 200 px and above (e.g., 850x1300 px) — Allows you to specify a fully customized page size. You can create a design area by entering the desired width and height values. Sizes below 200 px can also be adjusted.
    • Letter: 8.5x11 inches (850x1100 px) - This is the American standard size, usually used for letters and documents. It is close to A4 size but slightly wider.
    • A3: 297x420 mm (1168x1654 px) - A3 size is generally preferred for large format printing. It is suitable for posters, graphics and technical drawings.
    • A4: 210x297 mm (826x1168 px) - A4 is the most widely used paper size. Ideal for documents, letters and small brochures.
    • A5: 148x210 mm (584x826 px) - A5 is half the size of A4 paper and is suitable for small brochures, manuals or flyers.
  • You can customize the width with the sizing icon.

These settings ensure that the report looks good on digital or printed output.

Report Designer Elements Panel

The Elements Panel on the left side of the Canvas allows you to enrich your reports by adding different elements:

  • Header & Footer: Automatically adds page headers and footers.
  • Label: Used to add text and set the text direction.
    • Right-to-left and left-to-right Vertical WritingMode support has been added.
    • The Current Page option has been added to the Symbol Picker, allowing the page number to be displayed dynamically.
  • Icon & Image: You can add emphasis by adding images and icons.
  • Box & Panel: You can create groupings and add background colors.
  • QR Renderer & Barcode Renderer: Can be used for data presentation.
  • Report Table: You can make data more understandable by adding tables.
  • Static Table: Offers an Excel-like table structure.
    • Labels can be added to columns.
    • Row and column merging (rowspan / colspan) can be done.
    • Unlimited rows and columns can be added.
  • Page Break: Used to add a page break. Ensures controlled division of content across pages in print outputs.
  • Divider: Draws a divider. Thickness and dashed style can be adjusted.

Using Elements Panel:

  • You can drag and add elements to the Canvas.
  • Position and size changes can be edited from the Styling Panel.

Report Designer Reports Panel

Reports Panel is the main screen where all reports in the application are listed and managed.

  • Click the + button to add a new report.
  • Specify a report name and click the CREATE button.
  • You can edit, copy or delete existing reports.

Report Designer Properties Panel

The Properties Panel offers different settings according to the selected element:

  1. Actions:
    • Actions can be defined within the report (e.g. you can share the report by adding a Share button ).
  2. Report Inputs:
    • You can add dynamic information to the report by importing data from other screens.
    • You can define filters such as date ranges.

Different settings are offered on an element basis:

  • Icon: You can make color and size settings.
  • Label: Text alignment and font settings are available.

Report Designer Styling Panel

The Styling Panel allows you to make visual adjustments.

  • Fill Panel:You can set the background colour of the canvas.
    • Colour: Allows you to select the background colour.
    • Background Image:
      • Add Image: You can add an image from your device.
      • Generate With AI: You can create a background image with artificial intelligence.
    Border:You can set the border settings for the canvas or selected item.
    • Style: Defines the overall appearance of the border.
    • Width: Specify the total width of the border (usually in pixels).
    • Color: Select the border colour.
    • Radius: Adjust the corner rounding degree to make the corners softer.
    • Style: Select border styles such as solid, dashed, or dotted.

Styling Panel helps you give your reports a professional look.

Report Designer allows you to transform your reports into a data-driven and visually rich structure. With this module, you can customize your reports and design more useful and effective reports for your applications.

Other Related Content

No items found.

Glossary

No items found.

Alt Başlıklar