Pagination

Pagination is the process of dividing content into separate, discrete pages, making it easier to navigate and consume large amounts of information.

The navigation arrows and limit settings block are removed if the number of records is less than the limit.

Pagination modes:

• Default (nextAndPreviousWithCount)
• nextAndPreviousWithHasNext
• nextAndPreviousSmart

API Calls (Frontend to Backend)	nextAndPreviousWithCount	nextAndPreviousWithHasNext	nextAndPreviousSmart
/meta	+	+	+
/count	+	+ (response is ignored)	+ (response is ignored)
/data	+	+	+

Info

Pagination won't function until the page is refreshed after adding records.

Use Cases :

• nextAndPreviousWithCount: Ideal for backends that leverage database sources.
• nextAndPreviousWithHasNext: Designed for microservice-based backends where the presence of the next page can be determined, allowing the hasNext flag to be populated.
• nextAndPreviousSmart: Suitable for microservice-based backends where it is not possible to determine if there is a next page, and the hasNext flag cannot be populated.

Default (nextAndPreviousWithCount)

Live Sample · GitHub

Frontend Behavior:

• All three responses are utilized, including the /count result.
• This mode is best suited for backends that rely on database sources.

How does it look?

How to add?

Example

Option 1. By default

Option 2. Add in options parameter pagination to corresponding .widget.json.

  "pagination": {
  "type": "nextAndPreviousWithCount"
  }

{
  "name": "MyExampleList",
  "title":  "Widget property Pagination nextAndPreviousWithCount InnerSource",
  "type": "List",
  "bc": "myexample",
  "fields": [
    {
      "title": "customField",
      "key": "customField",
      "type": "input"
    }
  ],
  "options": {
    "pagination": {
      "type": "nextAndPreviousWithCount"
    }
  }
}

Live Sample · GitHub

nextAndPreviousWithHasNext

Live Sample · GitHub

Frontend Behavior:

• The /count endpoint is called, but its result is not used.
• Instead, pagination is based /data that indicates whether there is a next or previous page (hasNext/hasPrevious).

Next button availability logic:

• If hasNext (from /data) is true, Next button is available.
• If hasNext (from /data) is false, Next button is disabled.

How does it look?

How to add?

Example

Add in options parameter pagination to corresponding .widget.json.

  "pagination": {
  "type": "nextAndPreviousWihHasNext"
  }

{
  "name": "MyExampleList",
  "title": "Widget property Pagination nextAndPreviousWihHasNext AnySource",
  "type": "List",
  "bc": "myexample",
  "fields": [
    {
      "title": "customField",
      "key": "customField",
      "type": "input"
    }
  ],
  "options": {
    "pagination": {
      "type": "nextAndPreviousWihHasNext"
    }
  }
}

Info

To deactivate the functionality hasNext=trueadd in application.yml cxbox.api.any-source-has-next-enabled = false

Live Sample · GitHub

nextAndPreviousSmart

Live Sample · GitHub

Frontend Behavior:

• The /count endpoint is called, but its result is not used.

Next button availability logic: If the number of records received from /data is less than _limit, Next button is disabled.

Disadvantages of this mode:

• If the number of records is a multiple of _limit, a single jump to a page with no records will occur, since it is impossible to determine whether this is the last page.
• If the number of records is a multiple of _limit, a request for the next page will be sent even if it does not exist. If this request returns an error, it should be handled with a try {} catch {} block. (For instance, when retrieving data for the next page from a microservice.)

How does it look?

How to add?

Example

Add in options parameter pagination to corresponding .widget.json.

"pagination": {
"type": "nextAndPreviousWihHasNext"
}

    {
      "name": "MyExampleList",
      "title": "Widget property Pagination nextAndPreviousSmart AnySource",
      "type": "List",
      "bc": "myexample",
      "fields": [
        {
          "title": "customField",
          "key": "customField",
          "type": "input"
        }
      ],
      "options": {
        "pagination": {
          "type": "nextAndPreviousSmart"
        }
      }
    }

Live Sample · GitHub

Default limit page

see more Default limit page