The summary control shows a summarization of a particular field with a custom label and color, which is useful for drawing attention to particular numerical values. You can use it to display the number of records in a given data list, or apply a summary function to the records so you can see the sum, average, or maximum value of a field in a data list.
Add Summary control to the page
Firstly, find the Summary control in the controls add panel. Then, drag and drop it into a section or container on your page.
Select data source
The source explains where you found the information that is in your graph. Select the target data list as the source content to create Summary on filters conditions.
Open the Content > Data Source block, and in the Application section, select the application which is the current application by default.
Afterward, move on to the List section. Select the data list under the selected application.
Summary, on the other hand, displays the result of a summary function performed on a specific field of the selected data list. If you pick summary, you'll need to select a field, and a type of summary function, like sum, count, count distinct, Avg, Max and Min. The available summary functions will depend on the field type.
From the Field dropdown list, select the field, and from the type dropdown list, select the summary function.
Number Prefix: Set the prefix text of this summary value.
Number Suffix: Set the suffix text of this summary value.
In the Data Filters section, click the condition button to filter the data from the selected data list.
Save Value to a variable: user could bind the result to a pre-create temporary variable.
Pro Tip
In the design model, the value of summary will display as 100, which is play as a demo number. To view the actual number, please click the "Preview" button to switch to preview model.
Layouts of Summary Control
Choose Picture: upload an image which is meaningful to the summary control. This is optional, while you can leave it empty.
Position: choose where do you like to display the picture from top, left, or right.
Image Ratio: An aspect ratio is a proportional relationship between an image's width and height.
Picture Size: choose the size of this picture to be displayed.
Width: Set the picture width with PX , %, em, rem, vw, calc.
Title: set the text of title. Title will be displayed on top of the summary value.
Description: set the text of description. Description will be displayed at the bottom after the summary value.
Styling the Summary control
Layout
Height: Set the height of this summary control, which can be default or with min-height.
Vertical Align: Set the vertical alignment of the content in summary control.
Align: Set the horizontal alignment of the content in summary control.
Picture
Radius: Set the border radius to picture corner roundness.
Spacing: Set the space between the picture and content area.
Content
Number:Set the style of summary's value.
Color: Set the text color of the Number.
Typography: Set the typography of the Number.
Spacing: Set the space between the Number and Description.
Title: Set the style of summary's title.
Color: Set the text color of the Title.
Typography: Set the typography of the Title.
Spacing: Set the space between the Title and Number.
Description: Set the style of summary's description.
Color: Set the text color of the description.
Typography: Set the typography of the description.
Spacing: Set the space between the Description and the bottom of the content area.
Advanced Settings
Set the Advanced options that are applicable to this control.