To create a new report:

1. Log in to the Kuika platform and open the project you will work with from the Apps screen.

2. Select the Report Designer module.
3. Give your report a name on the screen that opens.
4. Create your new report by clicking the CREATE button.

The Canvas is the main area where report design takes place. Thanks to the “Free Position” feature, you can drag and drop elements to any location on the page.

On the Canvas:

• All elements that make up the report (Label, Box, Table, Image, Divider, etc.) are located here.
• Elements can be positioned on the page using drag-and-drop.
• The page layout and arrangement of the designed report can be managed visually.

Canvas Area Structure (Band Structure)

Report areas on the Canvas are organized using a band structure. These bands are displayed on the left side of the Canvas and can be selected by clicking.

Available bands:

• Header
• Footer
• Page Header
• Page Footer
• Static Table
• Report Table

Thanks to this structure:

• Report areas are visually separated.
• The user can easily understand which area they are working on.
• The relevant area can be quickly selected for editing.

Isometric (Grid Paper) Design Mode

Canvas defaults to the isometric (grid paper) view. With this mode:

• Elements can be dragged while aligned to grid points.
• You can switch between Free Mode and the grid view.
• Grid spacing can be adjusted.
• The user’s preferred view is saved in the browser.

Rulers and Dimensioning

The blue rulers on the Canvas simplify alignment and dimensioning tasks.

• Ruler units can be displayed as point (pt), millimeter (mm), and inch.
• In current page types, the measurement unit is point–mm–inch.
• When a Custom page is selected, the measurement unit can be chosen 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, alignment can be further simplified by adding guide lines via the ruler.

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: 200 px and above (e.g., 850×1300 px) allows for a fully customized page size.
• 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)

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

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

Header & Footer

• Automatically adds page headers and footers.
• If there is insufficient space when an element is dragged into it, the area automatically expands.
• The 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 treated as Report Header within the system.

Page Header & Page Footer

Used to create page-based repeating header and footer areas.

• Used to add content that repeats on every page when a report is split into multiple pages.
• Labels, images, icons, and other supported elements can be dragged into it.
• The height can automatically expand if the space is insufficient.
• Height and border settings can be adjusted.

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 adjusted.
• Support for Vertical WritingMode (right-to-left and left-to-right) is available.
• By selecting Current Page via the Symbol Picker, a dynamic page number can be added.
• By selecting Total Pages via the Symbol Picker, the total number of pages in the report can be displayed dynamically.
• The Border feature is available for the Label element. With the Border feature, the border color, thickness, and appearance can be adjusted.

Icon & Image

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

Vertical Panel

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

QR Renderer & Barcode Renderer

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

Divider

• Adds a divider.
• 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 pages of A4 (297 mm) size:
  
  • A Page Break can be added with Y = 297 on the ruler.
  • The Y value can also be manually entered as 297 in the Layout section.

Report Table

Report Table is used for dynamic data display.

To use the Report Table:

• First, the Get Report Base64 action must be added.
• Then, the Print PDF or Download PDF action must be added.

Features:

• It is dynamic.
• Multiple Labels can be added to a single 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 a fixed table structure similar to Excel.

• Labels can be dragged into it for x–y based positioning.
• The border is adjustable.
• Per column:
  
  • Colspan
  • Rowspan properties are supported.

Table Operations

From the Table Operations section at the bottom:

• Rows can be added above or below.
• Columns can be added to the right or left.
• Column content can be cleared.
• Cells can be merged (Merge).

During the Merge operation:

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

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.

Properties Panel offers different settings depending on the selected element:

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

Different settings are available on a per-element basis:

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

Watermark

The Watermark field is used to add a watermark to the report. Watermarks are typically used for:

• displaying the “Draft” label
• adding the company name
• ensuring document security
• indicating that the report is a copy.

Watermark settings are configured via the Properties panel while the Screen is selected.

• Enable
  
  • Toggles the watermark feature on or off.
  • When enabled, the watermark appears on the report.
• Type: Specifies the watermark type.
  
  • Options:
    
    • Text: The watermark is displayed as text.
    • Image: The watermark is added as an image.
• Text: Specifies the text to be displayed as the watermark.
• Font Size: Specifies the font size of the watermark text. Larger font sizes make the watermark more prominent on the page.
• Font: Specifies the font to be used for the watermark text.
• Color: Specifies the color of the watermark text. Light gray tones are typically used to preserve the readability of the report content.
• Bold: Makes the text appear bold.
• Italic: Makes the text appear italic.
• Opacity (%): Sets the transparency level of the watermark.
  
  • Lower values make the watermark appear fainter.
  • Higher values make the watermark appear more prominent.
• Rotation: Determines the rotation angle of the watermark on the page.
  
  • For example: The -45° value makes the watermark appear diagonally on the page.
• Position: Determines the watermark’s position on the page.
  
  • Options:
  • Center: The watermark is displayed in the center of the page.
  • Custom: The watermark position is set manually.
• Custom X / Custom Y: These fields become active when the Custom option is selected for Position. These fields determine the watermark’s position on the page.
  
  • Custom X: Horizontal position
  • Custom Y: Vertical position
• Tile Repeat: Determines whether the watermark repeats across the page.
  
  • When enabled, the watermark repeats across the page.
  • When disabled, the watermark is displayed only at a single position.

Report Parameters

The Report Parameters section allows you to manage the parametric values used within the report. When values are entered in the text of elements such as Labels in the format @parameter, these parameters are automatically detected and displayed in the Report Parameters section of the Properties panel while the Screen is selected.

For example:

• My name is @name @surname

In this usage:

• name
• Surname parameters are automatically added to the Report Parameters list.

Creating Parameters

To create a parametric value:

• Add a Label element to the Canvas.
• Enter a value in the @parameterName format within the Label text.
• When Screen is selected, this parameter automatically appears in the Report Parameters panel.
• Multiple parameters can be used within the same text.
  
  • Example: My name is @name @surname. In this case, two parameters are created.

Parameter Value Sources

Each parameter can retrieve values from different sources.

Supported value types:

• Default Value: A default value can be defined for the parameter.
• Fixed Value: A fixed value can be assigned to the parameter.
• Report Inputs: The parameter value can be retrieved from another screen or user input.
• Action Result: The parameter value can be retrieved from an action result.
  

This structure enables dynamic data display within the report.

Using Parameters in the Report

Values assigned to parameters are automatically displayed within the relevant Label or element when the report is generated.

For example: Label value: My name is @name @surname

Parameter values:

• name = John
• surname = Doe

Report output: My name is John Doe

Parameter Visibility

The Report Parameters panel is displayed only when parametric values are used in the report.

If no @parameter is used in the report, this section is not visible.

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.