This section states the purpose of each page.

Introduction

In this summary, we will describe each page and its content. The Page Element is the fundamental one that contains all the other elements.
💡
Tip: See Bubble Reference for more information about Pages element https://bubble.io/reference#Elements.Page​ 🙂

Pages

index

This is the main page typically encountered first on the web app that usually contains links to the other pages of the site. A homepage includes a variety of menus that make it easy for users to find the information they need.
Here, the user can log in to an existing account, log into a Demo account, or Sign up with a new one.
Image without caption
index page elements editor
The design for this page consists of the main group “mainContainer” which holds 2 groups designed for displaying 2 groups, which are interchangeable in preview via state actions.
The groups are Group “Sign Up” and Group “Log In”, which hold all the elements, texts, buttons, inputs, etc.
Image without caption
The workflows on this page are navigation actions to a couple of pages. This page also combines actions for setting state values for showingand displaying elements on the page. Logging in and Signing up a user is a part of indexpage functionality while also utilizing Reset Password relevant inputs.
To change the reset password email text, please find the following action:
Image without caption

chat

The chat page consists of two active zones:
  • On the left side, you see the list of users you’ve initiated a conversation with, start conversation/search through conversations.
  • On the right side is the area where you’re actually chatting with another user. This chat supports image and file attachments.
Also, you can use gifs and emojis as with other popular messengers (Telegram, Whatsup, or Messenger).
Image without caption
chat page elements editor and page preview
Image without caption
chat page elements editor and page preview
The design for this page consists of the main container: Group “Main container” which is split into two sides, the first one on the left being Group “Left-Sidebar” used for displaying left side conversation lists and group lists. The second part is the right side, where users write down the messages, attach files or add gifs/emojis.
Image without caption
chat page workflow editor
The workflows on this page are actions for setting state values for showingand displaying elements on the page, working with data by creating a new thing in Message, Conversation data type, and making changes to User, Message and Conversation. There are actions designed to showpopup/groups and also hide them. Last but not least, a few actions are Go To page navigational actions.

reset_pw

This page is for resetting the password.
Image without caption
reset_pw page elements editor
The design for this page consists of one main container Group “Content” used to hold other elements on the page, texts, buttons, and input.
The workflows on this page are actions for setting focus on the element and reset password.

404

This is a page for 404 redirect errors, informing a user that the web page he or she is looking for cannot be found.
Image without caption
404 design tab

Helpful?