How to Create a Form

How to Create a Form

1. General

1.1 Functional profile

Forms are produced in a specific layout - paging layout of the dashboard, the entire process of creating a form are in the metadata mode, the preview will be expanded in accordance with the set rules, and support for a variety of paging modes, to help you easily complete a variety of specific formatting printing needs, this chapter will show you how to quickly create a form.

1.2 Application scenarios

This function can be used if you want to produce a dashboard on a specific size of paper with some specific extensions, pagination formatting, and print the dashboard according to the set layout style.

2. Create a form

Suppose we want to create the following style form:

Page 1:

Page 2:

(1) Click on the right side of the dashboard editing column [Dashboard > Layout], select the pagination layout, and set the paper direction, size, margins, etc., to enter the editing page:

2) Click the Layout View button at the top to adjust the grid size and layout under Layout View. Assuming that we want the data to spread over the whole page, adjust the grid size to occupy the whole page (components need to be placed in the grid to complete the data expansion), as shown below:

3) Set the header, drag and drop the image component to the header area, resize it and upload the logo image, set the display mode to zoom, as shown below:

(4) drag and drop a free-form form to the grid, adjust the width of the free table and page width consistent, set up a good title, and then bind the "province", "sales_total" field in turn, "Province "set up vertical expansion and as" sales_total "vertical parent cell, the following chart:

(5) Add a bar chart below the free table, and bind the "province", "sales_total" data fields, as shown below:

➢Description:

When previewing, it will expand all the data in the free table and then display the bar chart behind it, so the edit page can only determine the interval between the bar chart and the free table when previewing.

6) Set the footer, the footer in the sample is the page count, we can drag in the text component, enter: the first ? {_P_} page Total ? {_PT_} page, refer to the page number parameter statistics page number, the following chart:

7) Adjust the free table border style, text component border style, etc. to achieve the target effect.

(8) So far, a simple form on the production is complete, we can preview to see the effect:

If you draw multiple grids within a page, the data will be expanded in the order of the grids, as shown below:

As you can see, the data will flow backward sequentially in grid order;

Also, after data from the same free table flows to a different grid, the component headings are repeated within the new grid;

Pages can be turned using the page flip control on the top menu bar.

3. Functional description

3.1 Functional entry

Enter the "create a dashboard", create a new dashboard, select the right editing column [Dashboard > Layout > Page Layout], the following chart:

Feature Description:

【Page size】Select the dashboard paper size, you can choose A1, A2, A3, A4 and dozens of other commonly used printing paper size, after the selection will be displayed below the width and height, if you need to set up a particular size, you can select the "Custom", and then customize the width and height in the following.

【Direction】 Set the paper orientation, you can choose portrait, landscape, the default choice is portrait.

【Page Margin】You can set the top, bottom, left and right margins of the form according to your actual requirements.

【Height】Set the height of header and footer, you can set it according to your actual needs.

3.2 Edit pages

Take the default layout of A4 page as an example, after setting up the layout, enter the dashboard editing page as shown below:

The part marked in red in the above figure is the place where there is a difference with Smart Layout and Free Layout, please refer to the following table for specific explanation:

Serial Number

Functional Description

1

Layout View button, click on it will switch the view to Layout View, you can adjust the layout, size, number of grids within the page, etc. The layout of the grids will affect the results of the entire form.

2

Zoom axis, you can customize the adjustment of the form zoom ratio, easy to edit the form.

3

data schema, only metadata schema is supported under paging layout.

dashboard Canvas Configuration Content Description:

Alignment Ruler: Distributed on the top and left side of the canvas, corresponding to the page size, and subdivided into multiple scales, convenient for you to adjust the layout.

Header: Set up the dashboard header, you can drag and drop components into the header area to customize the header content.

Footer: Set the dashboard footer, you can drag in components to the footer area to customize the footer content.

Grid: that is, the dotted box in the above figure, the grid is the main form production area, outside the grid does not support drag-and-drop components, the initial default will provide a grid, if you need to adjust the grid size, number, layout, you need to click the Layout View button, edit in the Layout View.

3.3 Related concepts

With the paginated layout, the form is still created using the components provided with the product.

•Grid

Grid, is a paging layout used to place components under the area, in addition to the inside of the grid, you can only drag and drop components to the header footer, the first time you enter the paging layout, it will default to provide a page half the height of the grid, you can drag and drop the components to the internal production of the form, if you want to adjust the number of grids, the layout, you need to go to the Layout view for editing.

Click the "Layout View" button at the top to switch to the Layout View as follows:

You can customize the editing grid in the red area between the header and footer to support the following actions:

•Selected: Left mouse click on any area within the dashed grid to select the grid;

•Move: After selecting the grid, you can move freely within the red area to adjust the layout;

•Drawing a grid: left mouse button click on the blank area outside the existing grid, hold down the left button and drag to draw a rectangular grid;

•Delete: After selecting the grid, use delete to delete it, or you can click the "x" in the upper right corner to delete it.

•Adjust the grid size: mouse to move to the grid border, the mouse style becomes double arrow, drag can adjust the size, if you need to accurately adjust to a certain size, you can right-click on the grid, select [Grid Size], in the pop-up window to customize the location and size size of the size, the following chart:

You can refer to the following motion picture for details:

Each lattice has a serial number in the upper left corner. When creating multiple lattices, the serial numbers will be assigned in the order of creation, as shown below:

➢Attention:

You can't drag components into the layout view, you can only edit the grid, if you need to drag/edit components, you need to click the "Layout View" button again to exit the layout view.

•Logic for extending data in the lattice

Within the canvas, the data within the grid follows a streaming layout pattern and will flow backward in sequence according to the grid order, which is mainly for the free-form table component, and the rest of the component data will not be extended.

The order of data flow is determined by the grid layout, which can be freely adjusted, and the following styles are more common:

➢Example:

Put a free table inside the first grid and set the data in the cell to expand vertically;

When previewing, the data is automatically expanded backward based on the grid order, as shown below:

If you put the free table directly into the back grid, the preview will also show it from the first grid;

Preview results:

You can place multiple components in the grid, including tables, charts, text, etc. After placing multiple components, the top and bottom spacing between the components will be maintained to display them sequentially towards the back;

•Putting free tables and bar charts into a grid

The preview results are as follows:

As you can see, the bar chart will not be displayed until after the free table data expansion is complete, and the spacing between the two components will be preserved.

➢Description:

If multiple charts are placed in different grids, after the content of the previous grid is displayed, the components behind will start displaying from the top of the new grid, and if there is a blank grid between the components, they will automatically start displaying from the top of the blank grid;

Place the components inside the first and third grids, respectively, as follows:

The preview results are shown below:

As you can see, there will be no blank grids between the charts when previewing, and the bars will be displayed starting at the top of the new grid.

➢Attention:

As the free table data support expansion, the components in the grid need to occupy an exclusive row, that is, the horizontal blank area of the free table can not put other components, and does not support stacking other components. The following figure:

Components other than free tables can be placed in multiples horizontally or on top of each other.