Pagination Control

The Pagination control is a display control used to provide the information regarding pagination.

page_control1

Properties

UI Properties

  • Label : Label is the text that is displayed above the control and helps the user to understand the purpose of the pagination control. Visibility of Label can be toggled using the hidden property toggle option. Furthermore, size, weight, colour 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.

  • Generic

  • Caching : When the caching option is selected and if a LOOKUP formula is applied to this control, the state that the LOOKUP returns will be cached and the user will be able to see this state of the field even when the user 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 you to hide the field from the user. This might help to perform some computation you don’t want the user to see or if you want to show certain fields only when a specific condition is met/not met.

  • 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 .

  • Grid Configurations

  • 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.

Properties

  • Background : This option sets the background colour of the selected page.
  • Text : This option sets the text colour of the selected page number.

Action

An actionflow can be made which gets executed everytime when the page is changed. Actinflow can consist of on screen and server side actions.

How to Use Pagination Control

image5

From the controls option on the left sidebar, search for pagination , pick and drop this control on your screen.

In the data option on right sidebar, you can see two options

  • Number_of_pages
  • Selected_page

Number of pages:- this section is responsible to set the total number of pages.

Selected pages:- this section is responsible to set the current value of the selected page.

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

  1. Static Data: You can add Static data as a number Depending on the section, it can either be the total number of pages or the selected page number.
  2. 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.

  1. Controls: You can select Controls>fieldname to fetch data from for the pagination control.
  2. Variables and Keywords: You can make use of the Variables and Keywords to get data for the pagination control.
  3. Query String: This assigns the value returned by the Query string
  4. Logged In User: This allows you to select properties for the Logged In user like UserName, UserMail that would be the data for the pagination control
  5. Connectors: This allows you to add a Connector and select the values returned by the respective Connectors.
  6. 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.

Preview

Default view

image1

Customized view

image4