Since I am building three full-stack applications (stack: nodejs-reactjs-mysql) at the same time and I am not available here, but I will dedicate one hour a day for bubble in the future. My goal is to create 60 bubble how to posts so everybody can learn from it.

Profile Page with settings

I show you how you can start to build a profile page and make a settings icon next to the relevant fields. For editing I will use a popup element. Stay with me because I spent 30 minutes until I figured out how to make a one-to-one relations between two tables on the front-end for our application.

Steps to follow:

Step 1 – create new fields in the database

I created many fields, but now let’s focus on the role field whichi is an option set and a teams which is another data type.

The goal here, that every user after registration gets a user default role, and if somebody will be an admin then another admin can promote the user.

The teams is a dynamic field, because every organization have many different teams and their names can be different at any place.

Step 2 – create the front-end

So far three elements are placed on the front-end, where in the elements tree view you can see all the fields.

  • profile pitcture
  • user name
  • user team’s name

Step 3 – create the popup element

After using the popup element I created a text element for the popup dialog, a dropdown input field search for teams and a submit button.

Step 4 – create the workflow

When user submits the form, the selected team from the dropdown will be saved to the user’s team field where the team = Dropdown’s Team’s value

This way in the database the team is associated with the user as we wanted. Later you can use any of the teams field value in a user profile that has relational value for it.

Friendly advice to name every container on the frontend first when you create them, because otherwise later you will totally be lost in the workflow editor and in the property editor. Example what I mean by that:

I am available for bubble projects, contact me to make your next application together!


Leave a Reply

Your email address will not be published. Required fields are marked *