Statistics control

Statistics control is a custom display control. It can be used in healthcare, financial and other applications where varying quantities can be displayed with the indicative trend of their growth or decline rate.

Properties

UI Properties

  • Label : Label is the text that is displayed above the control and helps the user to understand the purpose of the file parser control. Visibility of Label can be toggled using the hidden property toggle option. Furthermore, size, weight, color and alignment of Label text can be altered.
  • Tooltip: This allows you to add the Tooltip text that would provide a hint to the user for providing input. The Tooltip icon would be visible if you switch on the Show tooltip icon toggle property.
  • Description: Is the description that you can add for your controls. The Description would only be visible if you switch on the visibility toggle property
  • External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.
  • Grid Configurations
    Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the fields even when he accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets is not always critical.
    Hidden : The hidden option helps to hide the control from the user. This helps when you don’t want the user to view the control.
    Trigger Dependents : When you Disable Trigger Dependents, it helps you to reduce or optimise the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here . By default Trigger dependents are enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.
  • Hide on desktop : This option hides the selected control in the desktop view
  • Hide on Mobile : This option hides the selected control in the mobile view.
  • Dynamic Height : This option dynamically increases /decreases the height of the text control based on the given content.
  • Maintain space when hidden : This option maintains the specified space between controls when a particular control is hidden. When a control is hidden the space is maintained in the preceding control depending on the space the previous control has occupied.
  • Maximum height : This option is used to set the maximum height of the control. Height can be in following units :- px, em , vh, %. For more information about these units, refer here.

Note :- Hide on desktop, Hide on Mobile, Dynamic Height and Maintain space when hidden are available in Basic Freeflow Editor Only.

Default Values

Note :- All the default values are required fields.

  • Title : This option is used to set the title of statistics control
  • Primary Value : This option is used to set the primary value of statistics control
  • Secondary Value : Thai option is used to set the secondary value of statistics control
  • Footer : This option is used to set the footer text of statistics control

Control Properties

Icon UI options

  • Font Size : This option is used to set the font size of Icon
  • Font Weight : This option is used to set the font weight (boldness) of icon
  • Font color : This option is used to set the color of icon
  • Font Icon : This option is used to select the icon to be featured.

Title

  • Font Size : This option is used to set the font size of title text
  • Font Weight : This option is used to set the font weight (boldness) of title text
  • Font color : This option is used to set the color of title text

Primary Value

  • Font Size : This option is used to set the font size of primary value

  • Font Weight : This option is used to set the font weight (boldness) of primary value

  • Font color : This option is used to set the color of primary value

  • Format : This option is used to specify the format of the primary value which can be

  • Standard - example 100

If value format is standard then an additional option of Decimal places is visible from where user can specify the precision value for given value

  • Percentage- example 100%

If value format is percentage then an additional option of Decimal places is visible from where user can specify the precision value for given value

  • Currency - example 100$

If value format is currency then two additional options of Currency code and Decimal places are visible from where user can specify the currency code ( USD,INR, etc) and the precision value for given value

  • Primary Sign : This is used to set the sign of primary value, which can be Trend Arrows, Negative only, Negative and positive, None.

|224.61290322580646x88

Trend arrows Positive/negative sign

  • Thousand separator : This toggle is used to introduce a separator after thousand’s position in a value.
  • Prefix : This option is used to set the prefix for a given primary value.

  • Suffix : This option is used to set the suffix for a given primary value.

  • Primary State : This option is used to set the primary state of value. It can be either positive or negative. Depending on the value, we can set the rules and when the state changes, the primary sign and color of the primary value changes.

Secondary Value

Properties available for secondary values are almost the same as those of primary values, lacking just the primary state.

  • Font Size : This option is used to set the font size of secondary value

  • Font Weight : This option is used to set the font weight (boldness) of secondary value

  • Font color : This option is used to set the color of secondary value

  • Format : This option is used to specify the format of the secondary value which can be

  • Standard - example 100

If value format is standard then an additional option of Decimal places is visible from where user can specify the precision value for given value

  • Percentage- example 100%

If value format is percentage then an additional option of Decimal places is visible from where user can specify the precision value for given value

  • Primary Sign : This is used to set the sign of primary value, which can be Trend Arrows, Negative only, Negative and positive, None.

  • Thousand separator : This toggle is used to introduce a separator after thousand’s position in a value.
  • Prefix : This option is used to set the prefix for a given primary value.

  • Sufffix : This option is used to set the suffix for a given primary value.

Footer

  • Font Size : This option is used to set the font size of footer text
  • Font Weight : This option is used to set the font weight (boldness) of footer text
  • Font color : This option is used to set the color of footer text

Data Binding

As stated earlier, Title, Primary value, secondary value and footer are required fields so we can bind data for these fields in following ways.

From the left sidebar, drag and drop statistics control from the controls option.

You can use the data option to bind data to statistics control. You can learn more about validations here. There are different ways in which you can bind data.

Static Data: You can add Static data as a string. Data will be a URL endpoint that will point to data.

Sheets: You can use data from sheets as well.

image6

You can specify the sheet, the columns and in case you want additional filters and sorting, you can apply them. To learn more about the filters and sorting, refer here.

Controls: You can select Controls>fieldname to fetch data from for the file parser control.

Variables and Keywords: You can make use of the Variables and Keywords to get data for the file parser control.

Query String: This assigns the value returned by the Query string.

Logged In User: This allows you to select properties for the Logged In user like UserName, UserMail that would be the data for the file parser control.

Connectors: This allows you to add a Connector and select the values returned by the respective Connectors.

Custom Formula: This can be used to apply formulas and use the output of those formulas to set the control. You can learn more about formulas here.

How to use Statistics control

Statistics control can be used to show the current value and the growth trend ( increasing/decreasing) of an entity. Entity can be the price of a stock for instance.

The main thing to focus on is the change of state. We can easily bind data to all the required fields, but to show positive/negative change in value, we must change the state of primary/secondary value. To do so, we follow these steps:-

  1. Initialise required fields with values using data option
  2. Configure rules to change the state dynamically.

For step 1 , you can use API or Database connector to initialise the values

Note :- Set the Primary state as positive and make sure the primary sign is NOT none.

Drag and drop a numeric control and using data option, provide the same value provided to primary value here. Then from properties, make it Hidden.

Now we can create rules to change state.

  • We will be checking for the value being negative, then we set the state to negative and remove positive state and vice-versa
  • Similarly we can change the state of the secondary value.

Rule for primary value state

Preview