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 main area where report design takes place. Thanks to the Free Position feature, you can drag and drop elements anywhere on the page.

Isometric (Dot Grid) Design Mode

Canvas defaults to the isometric (dot grid) view. This mode allows you to:

  • Drag elements aligned to dots.
  • You can switch between free mode and dotted view.
  • Dot spacing can be adjusted.
  • The user's preferred view is saved in the browser.

Rulers and Measurement

The blue rulers on the Canvas facilitate alignment and measurement.

  • Ruler units can be displayed in points (pt), millimeters (mm), and inches.
  • The measurement unit for current page types is point–mm–inch.
  • When the Custom page is selected, the measurement unit can be selected separately as pt / mm / inch.
  • When the measurement unit is changed:
    • Ruler values
    • The width, height, x, y fields in the styling panel
    • are updated according to the selected unit.

Additionally, guide lines can be added via the ruler to further simplify alignment.

Page Margins (Padding)

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

Paper Size

The Paper Size field in the Header section includes the following options:

  • Custom: A fully customized page size of 200 px or higher (e.g., 850×1300 px) can be defined.
  • Letter: 8.5×11 inches (850×1100 px)
  • A3: 297×420 mm (1168×1654 px)
  • A4: 210×297 mm (826×1168 px)
  • A5: 148×210 mm (584×826 px)

Width and height can be manually adjusted using the resizing icon. These settings ensure that the report appears correctly in both digital and printed outputs.

Report Designer Elements Panel

The Elements Panel on the left side of Canvas contains all the elements used to create the report content.

Header & Footer

  • Automatically adds page headers and footers.
  • Automatically expands if there is insufficient space when an element is dragged into it.
  • QR Renderer and Barcode Renderer cannot be dragged into these areas.
  • Height and border settings can be adjusted.
  • In dynamic reports:
    • If the report is split into multiple pages
      • Header appears only on the first page
      • Footer appears only on the last page.
  • It is considered as Report Header within the system.

Box

  • Width, height, x, and y values can be adjusted.
  • Fill color and border settings can be configured.
  • Any desired element can be dragged into it.
  • If the added content does not fit, the Box area automatically expands.

Label

  • Used to add text.
  • Text direction can be set.
  • Supports Vertical WritingMode from right to left and left to right.
  • A dynamic page number can be added by selecting Current Page via the Symbol Picker.

Icon & Image

  • Images and icons can be added.
  • Size, color, and position settings can be adjusted.

Vertical Panel

  • Used to create a vertical fixed panel.
  • Can be positioned by dragging.
  • The background color and border can be adjusted.
  • Multiple Vertical Panels can be added.

QR Renderer & Barcode Renderer

  • After entering the value, width and height can be adjusted.
  • Used for data-driven visualization.

Divider

  • Adds a separator.
  • Y position, color, and border settings can be adjusted.
  • Solid or dashed styles can be applied.

Page Break

  • Used to add a page break.
  • For example, to create two A4 (297 mm) pages:
    • A Page Break can be added with Y = 297 on the ruler.
    • The Y value can also be manually entered as 297 on the Layout side.

Report Table

Report Table is used for dynamic data display.

To use Report Table:

  • First, add the Get Report Base64 action.
  • Then add the Print PDF or Download PDF action.

Features:

  • It is dynamic.
  • Multiple Labels can be added to a column.
  • The Element Direction property allows you to select horizontal or vertical orientation.
  • Element gap can be adjusted.
  • Fill color and border properties are supported.

Static Table

Static Table offers an Excel-like fixed table structure.

  • Labels can be dragged into it for x–y-based positioning.
  • The border can be adjusted.
  • Column-based:
    • Colspan
    • Rowspan properties are supported.

Table Operations

From the Table Operations area at the bottom:

  • Rows can be added above/below.
  • Columns can be added to the right/left.
  • Column content can be cleared.
  • Cells can be merged.

During the merge operation:

  • Colspan and Rowspan are automatically activated.
  • When multiple cells are selected, the number of selected columns is automatically reflected in the Colspan field.

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 Canvas background color.
  • Background Image:
    • Add Image: You can add an image from your device.
    • Generate With AI: You can create a background image with artificial intelligence.

Styling Panel helps you give your reports a professional look.

Report Designer enables you to create reports that are both data-driven and professionally presented, featuring free positioning, advanced sizing, dynamic table structures, and visual customization options. With this module, you can design effective, flexible, and print-ready reports for your applications.

Other Related Content

No items found.

Glossary

No items found.

Alt Başlıklar