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

Was this helpful?

  1. Canvas library
  2. Page templates

Search Page

Use this for a simple search page without filters or for a complex search page with multiple filters

PreviousDouble Sidebar Portal Page TemplateNextMap Search Page with Toggle and Filters

Was this helpful?

Overview

Responsive layout for a generic search page. Includes a search bar at the top and common filter options in the side menu and above the main content group. The side menu is hidden by default on mobile but users can click on the filter icon to open it. On mobile, the top search bar will be visible when the current scroll position is 0 or when the browser detects the user is scrolling up.

Structure

When this page is added to your app, it will come with five main groups:

Group Main search inputs This group includes a search input and a date input with a search button. On mobile, the search input will be visible with a filters icon while the the date input and button will be hidden. Clicking on the search input will display the date input and button. On mobile, this group will be visible when the current scroll position is 0 or when the browser detects the user is scrolling up.

On page load, we run a run javascript workflow to detect the user's page scroll direction. There's also a JavascripttoBubble detect scroll direction is up? element that needs to always be visible on the page.

Group Main filters This group includes various filtering options such as: checkboxes, multi-select pills, min and max inputs, radio buttons, range slider, and a Canvas toggle. Each filter option includes a Clear button that will clear any selected filters. On mobile, this group will be hidden by default. Clicking on Group Main mobile filter or Group Main mobile filter dropdown will open this group.

Entering values into the inputs in the sidebar will run a custom workflow called Perform search

  • The main purpose of the “perform search” workflow is to adjust the parameters in the URL so that it contains the filters that the user has selected or entered. With that setup, a list of filtered results can be shared through these links that contain the filters in the URL (similar to sharing a ).

Group Main filters and content This group contains two groups:

  • Group Inner above content filters Use this section to display filters that are important or more commonly used. This group includes a multi-selects pills filter, a focus group filter, and Canvas toggle, and a button for displaying Group Main filters on mobile (use this option if you will not be using the search inputs in Group Main search inputs.

  • Group main - Paste group This group contains the responsive settings for all additional blocks that will be added to the page.

FloatingGroup Main mobile bottom menu This group is only visible var - ⚙️ main content responsive mode is mobile and includes buttons to close the filters group and show results.

Popup Hidden Variables This popup includes various variables that are referenced in workflows or conditionals on the page.

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

  • var - ⚙️ main content responsive mode - This stores the display settings for various groups on the page. It includes three modes:

    • relative - desktop preview including top search bar, filters sidebar, and main content group

    • fullscreen - filters sidebar is hidden and top search bar is hidden when the user is scrolling down

    • mobile - filters sidebar opens fullscreen on mobile and the top search bar and main content group are hidden

  • var - active filters count - Stores the active filters count for Group Main single filter dropdown

  • var - variable placeholder - Placeholder variable group

  • var - search input focused on mobile? - Stores y/n field on if Group Search input with icon left is focused on mobile (to display the date input and button)

  • HTML CSS for slider, scroll bars, and mobile floating groups - Stores the CSS for formatting sliders, scroll bars, and responsive settings for Group Main filters

Blocks container 860 (do not rename)

This group contains the responsive settings for all blocks on the page. Any new blocks should be added to this group.

  • Floatinggroup Side bar_website - This group contains all the different filter options for the search page.

  • This page comes with one popup:

    • Popup Hidden Variables contains four groups:

      • var - Website object This group stores the website object (e.g., app name, primary color, and etc.)

      • var - dummy data A placeholder group in case you want to use any hidden variable groups later.

      • var - RepeatingGroup Categories This repeating group will store the user's checked categories in RepeatingGroup Dummy

      • var - page less than 1111 This checks the page's current width. The side bar will hide when the current page width is less than 1111px.

  • This page will come with one reusable element:

  • The page comes with two navigation elements that toggle the filter sidebar's visibility on mobile:

    • FloatingGroup Open sidebar button

    • FloatingGroup Close sidebar button

  • Entering values into the inputs in the sidebar will run a custom workflow called Perform search

    • This workflow is optional and it is not required to filter the repeating group.

How to set up

  • Update the data source or add/remove any input elements in the sidebar to fit your use case

    • Update the Perform search custom workflow accordingly.

    • If you add a new input, update the Perform search custom workflow to include the new parameter.

The main purpose of the “perform search” workflow is to adjust the parameters in the URL so that it contains the filters that the user has selected or entered. With that setup, a list of filtered results can be shared through these links that contain the filters in the URL (similar to sharing a ).

specific list of results on Airbnb
header
specific list of results on Airbnb
Add another parameter and pass it the new input's value. The parameter name (key) can be anything you choose.