dashboard

Page that allows users to update their account settings

Dashboard Page Overview

Your app will come with a settings page where users can update their personal information, including email and password. This page includes other pre-built features that you will have to customize for your app:

Profile tab

You can add more fields to the profile tab by reducing the size of the placeholder group (Group Nav Tab 1 PLACEHOLDER) in this tab.

Login credentials tab

Payments tab

The payments tab includes two subtabs for Payment Method and Payment History. You can add more content by reducing the size of the placeholder groups within the subtab groups.

Notification settings tab

This tab includes UI for toggling notifications on/off. There is no actual logic behind this, so you will need to set up the workflows on this tab if you want to use it.

Adding additional tabs to the settings page

• Go to the settings page in the Bubble Editor and unhide Group Nav 6/7/or 8 by checking This element is visible on page load. Set the data source of the tab group to the name of the tab.

• If you want to create a new tab, copy an existing tab and rename the group. Then reduce the size of Group PLACEHOLDER (do not delete), adding your new group in the space created.

• Go to the conditional tab of the group and add the following conditional statement: If var - tab url parameter's text is Group Nav 6/7/or 8's text then this group is visible

Key Workflows

Page is loaded and Get [parameter] from page url is…

• The majority of tab navigation in the dashboard is triggerable through url parameters

• On page load if…

  • sub from page url is edit and listing is not empty → Prepare the edit listing form for the listing and show the form

    • Set states Image primary and Images of Group Listing Image Uploader

      • When creating or modifying a Listing, these states are used for temporarily storing and saving the listing’s Image main and list of Images

  • tab from page url is listings or bookings and the user’s Stripe Seller Account Id is empty → navigate to the trips tab

  • tab from page url is messages and chat from page url is not empty → go directly to that message thread

Page is loaded and Current User’s Newly registered? is “yes”

• Navigates the user to the listings tab

• This only occurs after a user has gone through the Stripe Register As Seller flow

Button Save Changes (Listing) is clicked

• Creates a new Listing if the parent group’s listing is empty, which is only the case when creating a new listing

• Triggers the save_listing custom workflow

Button Add Image is clicked

• Creates an Image instance and adds it to the Images state of Group Listing Image Uploader

• If the listing does not have a primary image - which should only be the case when initially creating a listing or if you’ve deleted every existing image - then the newly created Image will be marked as the primary image

• The new Image(s) are not saved to the Listing until the Save Changes button is pressed from the edit listing form

Group Collect CC Info is clicked

• Allows the user to add a credit card to be used for payments in the app

• Uses Bubble’s built-in Collect the user’s cc information action

Group Add New Listing is clicked

• Primes the new/edit listing form by resetting several states and the overall group

Group Nav - Register As Seller is clicked

• Redirects the user to a Stripe-powered form that allows the user to sign up or connect a Stripe account for the purpose of registering their account as a Stripe Seller

• After registering, the user will be redirected back to the listings tab on the dashboard and will now have the ability to add Listings and receive payments for bookings

• The user’s Stripe Seller account ID property should now be populated

go_to_chat [Custom workflow]

• This is triggered when the tab parameter is set to messages

• Sets the thread_other state of reusableFullchat to the Thread from the chat parameter from the url → this opens the messenger to a specific thread

• Navigates to the messages tab

save_listing [Custom workflow]

• Updates the listing with the inputted values from the edit listing form

• When saving the Image primary and Images we refer to the Image primary and Image states on Group Listing Image Uploader

Key Elements

RepeatingGroup Listings (number)

RepeatingGroup Listings SOURCE (Hidden)

RepeatingGroup Images

• Contains the list of Images for the listing

• Populated from the Images state on Group Listing Image Uploader

RepeatingGroup Bookings

• Contains the list of Bookings for which the user is the Listing owner

• This group will only contain data for registered sellers who have had a least one booking for their listing(s)

RepeatingGroup Trips

• Contains the list of Bookings for which the user is the Booked user

• This group represents all of the user’s booked trips and contains information for the booking dates and booking price