The Form Report control is used to present the records of a selected form report. It is useful when you want to show the submitted forms of an approval form on another approval form as a reference.
For example, you have generated a form report from one of your approval forms: Purchase Requisition. You can all add this form report control on your Purchase Order form to connect with the behind form report to display all the items of purchase requisition items:
Add the Form Report control
Open the Approval form designer and find the Form Report
control in the group of "Workflow controls". Then, drag and drop it into a section or container on your form designer.
Select the Data Source
Select the form report which the will show up in this control.
Open the Content > Data Source block, and set the text of Title. This title will be displayed on the Caption of this control.
Then, in the Application section, select the application which is the current application by default.
Afterward, move on to the Report section. Select the form report under the selected application.
In the Data Filters
section, click the condition button to filter the data from the selected form report.
Set content of this report control
1. Choose layout of the Form Report control
Move to the "Report Content" section. Select the layout properly from the dropdown list.
There are 3 types of the layouts which you can select from:
Table View: Choose this option if you want to show the Data Table layout and items as a table. Each item will display as a row with pre-defined columns.
Card View: Choose this option will show the items one by one with separate area.
Dynamic: If the layout is set to Dynamic, the Document Library will be set to Table View on PC and Tablet device, and Card View on Mobile device.
Default: The default settings of the Layout is Dynamic.
The properties and styles of Table view and Card view can be set separately. So, if the Default/Dynamic layout is selected, you will be able to see all the related settings for both Table view and Card view. Otherwise, you will only see the table view related settings, or the card view related settings.
2. Add display fields to Form Report control
To add fields, go find the Report fields settings after Layout. and click the "Settings" button to open the Select report field window. Select the fields and set the display orders, then click "OK" button to add those fields.
Next, click each field to expand the settings panel. In the Table View section, you can set the width of each column in PX or %.
And from the Card View section, you can set the width of each control with percentage. For example, To show 4 controls in each row, you can set the width as 25% for each. The Title Layout, Vertical Align, and Title Width settings help to set the positioning of the title for each control.
Hide if value is empty: If there are no records in this Form Report, this control will not show on the page.
Fallback: Use the Fallback field to set default content to be used in case the control has no content or does not exist.
Pagination Settings
Limit Records: Turn this ON if you just want to display certain items in this Form Report control. By default, this option is OFF, which means all records of the selected form report will be displayed in this control. Then you will need to enter the number of items for each page in the following Records per Page, and set the alignment of the pagination by choosing between Right, Center, and Left from the Align section.
If the Limit Records option is set to ON, then enter the number of items you wish to display in the following Limit section. Turn View more records ON will display a hyperlink at the bottom of this data table. You can change the txt in the text box of Customize text. Set the Alignment that this view more link with the settings of Align.
Appearance of the Form Report control
Open the Content > Appearance block to set the appearance and layout of this control.
Display Caption: You can control if display or hide the caption by turn ON/OFF the Display Caption option settings.
Turn Collapse option ON to allow users to collapse and expend the grid content area.
Dynamic Display Rules: When you set a dynamic display rules, It behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
Styling the Form Report control
It is now time to define the appearance of the control. Go forward to the Style block, where you are able to make your control look more eye-candy.
General
1. Table View
Table Width: Set the width of the data table as fixed with px or percentage of the container with %.
Column Width: Set how the column width will be allocated for each column. Fixed means the column width will be exactly the value you set for each column in the column settings panel, while Auto means the column width will be scaled based on the total width of the Table Width set above, and allocated with the ratio of each column width.
Table Alignment: Choose between Right, Center, and Left.
Border Type: Select the type of border to use around the table.
Radius: Set the border radius to control corner roundness.
Shadow: Set options to apply a box shadow on the Data Table.
2. Card View
Margin: Set the Margin of the card view area in PX or %.
Padding: Set the Padding of the content insider in the card view area in PX or %.
3. Fallback
Set the Typography and Color of the text for Fallback.
Table Header
Padding: Change the padding settings of the content inside in each header cell.
Border Type: Select the type of border to use around the table header.
Align: Align the text of the table header to the left, center, or right.
Vertical Align: Vertical align of the table header text to top, middle, or bottom.
Typography: Change the default typography options for the text of table header.
Normal / Hover: Set different color and background color for the state of header.
Color: Select the color of the header’s text for both Normal and Hover states.
Background color: Select the header's background color for both Normal and Hover states. You may use a solid or gradient color.
Table Content
Typography: Change the default typography options for the text of table content.
Normal / Hover: Switch to set different style of table content.
Row Color: Set the text color of each row for both Normal and Hover states.
Row Background Color: Select the background color of each row for both Normal and Hover states.
Striped Row: Turn is ON to set different colors for even rows for both Normal and Hover states.
Even Row Color: Set the text color of each even row for both Normal and Hover states.
Even Row Background Color: Select the background color of each even row for both Normal and Hover states.
Link Color: Set the color of hyperlink text for each row for both Normal and Hover states.
Padding: Change the padding settings of the content inside in each content cell.
Border Type: Select the type of border to use around the table header.
Align: Align the text of the table content to the left, center, or right.
Vertical Align: Vertical align of the table content text to top, middle, or bottom.
Card Content
Margin: Set the Margin of the Content card area in PX or %.
Padding: Set the Padding of the content insider in the Content card area in PX or %.
Background Color: Select the background color of the Content card area.
Border Type: Select the type of border to use around the Content card area.
Radius: Set the border radius to control corner roundness.
Shadow: Set options to apply a box shadow on the Content card area.
Content Padding: Set the padding of each summary field control inside in the Content card area.
Title: Set the Typography and Color for the Title text of each field.
Value: Set the Typography and Color for the Value text of each field.
Style of Caption
Margin: Set the Margin of the Caption in PX or %.
Padding: Set the Padding of the Caption in PX or %.
Background Type: Select the background color. You may use a solid or gradient color.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Adjust box shadow options.
Title: Set the styles of the Title on Caption,
Typography: Set the typography options for the title text.
Color: Choose the color of the title text.
Pagination
Typography: Change the default typography options for the text of pagination.
Normal / Hover / Active: Switch to set different style of pagination.
Color: Set the text color of the pagination for Normal, Hover and Active states.
Space Between: Set the space for each number of the paging.
Spacing: Set the space between the table content and the pagination.
Advanced Settings
Set the Advanced options that are applicable to this control.