Canvas Documentation
Bubble Best Practices
v6.0
v6.0
  • Introduction
  • Key Features
  • What's New
  • Canvas Design System Figma File
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Page
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
      • Mail merge terms
    • Miscellaneous
      • Setting up two factor authentication
      • Cookie and consent banner
      • Setting your password policy
      • Set up Payment info on Account page
      • Loading screen
      • Configuring multiple languages
      • Customizing your app's portal page colors
    • Reference
      • Pages
        • Index
        • Product homepage
        • Marketplace homepage
        • SaaS homepage
        • About us
        • Pricing
        • Admin Portal
        • Account
          • Account deletion
        • Login
        • Legal
        • Reset Password
        • 404
      • Reusable elements
        • Header
        • Footer
        • Signup & Log in
        • Cookies Permission
        • Widgets
          • App security
          • Header Widgets
          • Workflow Widgets
        • Admin Portal
          • Admin analytics
          • Admin email & templates
          • Admin header & footer
          • Admin legal popups
          • Admin branding, setup checklist, and settings
          • Admin options app variables
        • Menu Focus Elements
        • Sidebar tab
      • Data types
      • Option Sets
      • Backend Workflows
      • Design standards
        • Manually Building UI
  • Canvas library
    • Updating asset RG data source
    • UI Patterns
      • Simple Dashboard Page
      • Product Marketplace Dashboard Page
      • Labor Marketplace Profile Page
      • Social Network Profile Page
      • Simple Events Search Page
      • Events Search Page
      • Ecommerce Search Page
      • Labor Marketplace Search Page
    • Page templates
      • Basic Bubble Marketing Page
      • Chat Messenger Page
      • Form Builder Page
      • Centered Profile Page
      • Left-Justified Profile Page
      • Standard page
      • Toggle Tabs Page
      • Menu Page
      • Mobile Menu Page
      • Video List Page
      • Horizontal Tabs Portal / Dashboard Page
      • Standard Portal / Dashboard Page
      • Simple Portal / Dashboard Page with Icons
      • Double Sidebar Portal Page Template
      • Search Page
      • Map Search Page with Toggle and Filters
      • Floating Map Search Page
      • Search Bar Page
      • Multi-Step Page With Progress Bar
      • Standard Multi-Step Process Page
      • Multi-Step Process Page with Sidebar
      • Gallery Profile or Product Page
      • Sidebar Profile Page with Tabs
      • 2-Column Menu Tabs Page
      • 2-Column Checkout Page
      • 2-Column Video Chat Page
      • Vertical Multi-Step Page Template
    • Blocks
      • Pagination
      • Monthly Calendar Scheduling Widget
      • No Reply Comments Thread
      • Nested Comments Thread (with Like and Reply)
      • Placeholder Group
      • List with Circular Progress Bar Repeating Group
      • Top Input Chat Widget
      • Bottom Input Chat Widget
      • Toggle Tabs Group
      • Single-Select or Multi-Select Pill Tabs Group
      • Settings Group
      • Order Confirmation Group
      • To-Do List Repeating Group
      • Title Group with Button and Filters
      • Product Details Group With Progress Bar
      • Listing details with Icons and Menu Focus Group
      • Week Daily Availability Group
      • Frequently Asked Questions (FAQ) Repeating Group
      • Dismissible Module
      • Video Group
      • About Group
      • Add to Cart Group
      • Full Width Map with Directions Link
      • Location Module (Map and Directions)
      • Drag and Drop Repeating Group
      • Infinite Columns Horizontal Scroll Data Table with Fixed First Column (Repeating Group)
      • Nested Data Table (Repeating Group)
      • Standard Data Table (Repeating Group)
      • Standard Data Table (Table Element)
      • Mobile-Friendly Data Table (Repeating Group)
      • Mobile-Friendly Data Table (Table Element)
      • Infinite Columns Horizontal Scroll Data Table (Repeating Group)
      • Infinite Columns Horizontal Scroll Data Table (Table Element)
      • Activity Feed
      • Social Feed
      • Nested Repeating Group
      • Advanced Form Inputs Group
      • Reviews with Ratings Summary and Images
      • Reviews Repeating Group with User Images
      • Reviews (Text Only) Repeating Group
      • Standard Repeating Group with Image
      • Search Bar Group
      • Listing Details Group
      • Post Group with Upvoting UI
      • Large Chart Dashboard Widget
      • Chart With Key Metrics Dashboard Widget
      • 2-Column Table and Key Metrics Dashboard Widgets
      • 2-Column Large Metrics Dashboard Widgets
      • 4-Column Large Metrics Dashboard Widgets
      • Main Image with Thumbnails
      • Centered Profile Block
      • Left-justified Profile Block
      • Tile Image Gallery and Popup
      • Image Feed with Nested Comments Thread
      • 1-Column Standard Form Inputs Group
      • 2-Column Slideshow Tiles Repeating Group
      • 2-Column Repeating Group (Text, Link, Image, and Description)
      • 2-Column Repeating Group (Link, Text, and Button)
      • 2-Column Repeating Group with Actions
      • 2-Column Grid Tiles Repeating Group
      • 2-Column Form Group
      • 4-Column Tiles Repeating Group
      • Expiration timer
    • Popups
      • Edit Drawer
      • Map Location Details Drawer
      • Details and Comments Drawer
      • Confirmation Popup
      • Message Popup
      • Image Popup
      • Video Popup
      • Vertical Scroll Popup
      • Permissions popup
      • Multimedia Slideshow Popup
      • Edit Popup
      • Standard Form Popup
      • Subscribe Popup
      • Feedback / Contact Popup
      • Details Popup
      • Add List Popup
      • Advanced Form Popup
      • Rating Popup
      • Toggle Tabs Popup
      • Share Popup
      • Multi-Step Popup
      • Invoice Popup
      • Stripe Credit Card Purchase Popup
      • View Profile Popup
      • Send Message Popup
      • Multi-Select Pill Tabs Popup
      • Net Promoter Score (NPS) Popup
      • Pricing Plans Popup
    • Reusables
      • Multimage uploader
      • Sidebar_icontab
      • Doublesidebar_tab
Powered by GitBook
On this page
  • Overview
  • Structure
  • How to set up
  • Add data source to pagination block
  • Do I need to duplicate pagination_template for every Repeating Group I use it with?

Was this helpful?

  1. Canvas library
  2. Blocks

Pagination

PreviousBlocksNextMonthly Calendar Scheduling Widget

Last updated 5 months ago

Was this helpful?

Overview

Use this to divide large amounts of content into smaller chunks across multiple pages.

Structure

This pagination block is a reusable element called pagination_template and it uses a number data source. You will need to pass the repeating group you're paginating's data source's count to this pagination block.

In the pagination_template reusable element:

  • Group Main viewing results and show per page dropdown

    This group contains the text for tracking the results the user is viewing (e.g. Viewing 1–50 of 2,500 results). It also includes the show per page dropdown, where the user can toggle between the maximum number of items to display per page. This group will be hidden when the current page's width is less than or equal to 615.

  • Group Inner pagination UI

    • This group contains the pagination UI for navigating to the different pages:

      • Clicking on Group Main previous page_action will navigate to the previous page and clicking on Group Main next page_action will navigate to the next page.

      • Group Main first more pages includes the UI for going to the first page and for navigating to the previous pages. Clicking on Group Main move interval pages forward_action (...) will navigate to the previous 5 pages.

      • Group Main last more pages includes the UI for going to the last page and for navigating to the next pages. Clicking on Group Main move interval pages backward_action will navigate to the next 5 pages.

      • RepeatingGroup pages (number) displays the list of pages based on the pagination_template's two states: page from and page until.

        • Its data source uses a toolbox plugin element called ListofNumbers Number of pages. This element needs to always be visible on page load.

      • Group Main last more pages includes the UI for going to the last page and for navigating to the next pages.

This reusable element includes 10 states (to view, click on the pagination_template reusable element and the "i" icon):

  • is first page? (yes/no), default set to yes - If this state is yes then it will make the 'Prev' button (Group Main previous page_action) not clickable

  • is last page? (yes/no), default set to no - If this state is yes then it will make the 'Next' button (Group Main next page_action) not clickable

  • items until (number) - is responsible for the end number of the range of results presented in the text element inside Text Viewing Results

  • items from (number), default set to 1 - is responsible for the start number of the range of results presented in the text element inside Text Viewing Results

  • total items (number) - the number of total items returned from the reusable element's data source

  • current page (number), default set to 1 - the current page number

  • page from (number), default set to 1 - used to filter RepeatingGroup pages to show pages from

  • page until (number), default set to 5 - used to filter RepeatingGroup pages to show pages until

  • total pages (number) - displays the total number of pages, factoring in the number of items to show per page; used in various workflow calculations

  • show per page (number), default set to 10 - displays the number of items to show in each page; used in various workflow calculations

This reusable element will also include a Hidden variables popup:

  • var - ⚙️ App settings - This group stores the App settings (e.g., app name, primary color, and etc.).

  • var - total pages - This group stores the calculations from ListofNumbers Number of pages and is used in workflow calculations.

  • var - Items until - This group stores the calculations for the reusable's items until state.

  • var - current page - This group stores the calculations for the reusable's current page state.

  • var - pagination interval - This group stores the default number of pages to display in RepeatingGroup pages (number). This variable is used in various workflow calculations. Please note that changing this number will likely require tweaking the logics of other workflows and would make the pagination block not responsive. We recommend leaving the default settings as it is.

  • var - placeholder - This is a placeholder group for users to add their own variable.

How to set up

Add data source to pagination block

It's important here that you are passing the full list of 'Do a search for [data type]:count' to the pagination_template reusable element and not just referencing 'Repeating group [data type]'s list of [data]:count'.

Do I need to duplicate pagination_template for every Repeating Group I use it with?

No, since the pagination reusable element's data source is of type number, you can use the same pagination reusable element for any repeating group, even if the repeating groups' data types are different.

Updating the data source of the repeating group you're paginating and passing the data source's count to the pagination reusable element
Clicking on 'i' reveals the reusable element states