In our previous article we described our marketplace app project. In current article we will discuss User Management part of application. We are going to create 3 roles in our marketplace: administrator, seller and buyer.
- Administrators will have such rights: edit and delete other users such as sellers and buyers. Regarding product management, admin is able to edit, delete, publish own products and products of sellers.
- Sellers will have access to create, edit, delete and sell their own products.
- Buyers are able to buy products and see own purchase orders.
We want to give the ability to new registered users to select one of the two roles : Seller or Buyer. We will not allow you to select the Admin role during registration. I think it is not reasonable to allow new registered users to be admins. Then if we need, we can assign users Admin roles manually.
There are few ways to do such a feature in a bubble. We decided to use the Option set feature. So let me describe how to do this in detail. First, go to the bubble dashboard https://bubble.io/home and open your application. After perform next steps:
Step 1. Create options set.
1.1. To create a new Option set, go to the Data tab, then click ‘Option sets’. Input title of new set inside ‘New option set’ field. Lets call our option set as ‘User Roles’ and click Create button
After, lets add 3 Options: Administrator, Seller and Buyer.
Also I would suggest you create a new option’s attribute. Let’s call it role_id . It should be number type and means id of each role. It will simplify the role of the user in configuring future functions. By now just trust me that this is helpful 🙂 For creating a new option’s attribute click the ‘Create new attribute’ button in the ‘Option sets’ tab. Then add a new attribute.
Next, let’s assign: Administrator’s role_id = 1, Seller’s role_id = 2 and Buyer’s role_id = 3. To add role id to each option you need to click the ‘Modify attributes’ link on the right near each option.
1.2. By now, we have created an options set. But we need to link it with users inside our bubble application. To ensure that options set will be attached to each user we need to go to: ‘Data types’ tab. After, look at the list of types under ‘Fields for type User’. There should be a field of type ‘User Roles’.
1.3. If you see a field that is described in 1.2. then you do not need to do anything and go to Step 2. Otherwise, click the ‘Create new field’ button. After Input ‘User Role’ in Field name field and select ‘User roles’ type in ‘Field type’ field and click ‘CREATE’ button.
Step 2. Configure ‘Signup/Login Popup’ reusable block.
Each application in the bubble. by default, should contain a ‘Signup/Login Popup’ reusable block. This block can be used on many pages . This block contains all needed form controls used for sign up or/and login users.
2.1. click left-top drop-down and select Signup/Login Popup drop-down. When you select it then you will see the Signup form’s edit block.
2.2. Now, we need to add a new  Dropdown element into this form which allows visitors of our marketplace to select the user’s role during registration. Select drop-down element inside visual elements list on the left side of page and put it to ‘Signup/Login Popup’.  It causes to open ‘Element Inspector” to open. Input ‘Choose role’ in placeholder field . In ‘Choices style’ select ‘Dynamic roles’ . Select ‘User roles’ in the Type of choices field. After selecting ‘All user roles’ -> :minus item -> Administrator in ‘Choices source’ filled.  We minus the Administrator role because we do not want to allow new registered users to be able to be administrators. In ‘Option caption’ field we can select ‘Current option’ -> s’Display. Also we need to add the name of the drop-down element to detect it easily in the next configuration. For this you need to click on the ‘Dropdown’ link on the ‘Element Inspector’ header. Then input there ‘Dropdown user roles’.
2.3. Next, we need to tell bubble what to do when the user clicks on the ‘Sign Up’ button inside the registration form. For this you need to double click on this button. It opens ‘Element Inspector’ where you can add workflow. Click on the ‘Start/Edit workflow’ button.
It opens a page where you can configure action. Click on ‘Sign the user up’ action or add a new action. To add a new action you need to click on a box with text ‘Click here to add an action..’
After selecting the Account sub-menu and then ‘Sign the user up’ menu item. In the ‘Element Inspector’ you need to click the ‘Change another field’ button. Select ‘User Role’ from list in .
Select ‘click’ again and select ‘Dropdown user roles’ from list and ‘s’value’ from another list.
Step 3. Configure Sign-up page.
3.1. Add a new signup page. For this open drop-down in the left top and click Add new page… Let’s name it signup . Click Create button
Add our ‘Signup/Login popup’ reusable element to this page. For this select ‘Signup/Login popup’ element inside the Reusable elements section on the left UI Builder and put it to the page sheet.
3.2. Add new button to this page. Give it ‘Sign UP New User’ caption and click ‘start Edit workflow’ in ‘element inspector’. Add new action . In the actions list select ‘Element actions’ and then click ‘Show’ item. It opens window where you can select ‘Signup/Login popup’ element.
3.3. That is all. We can test our work. Return to the Design tab. Then click preview on the right top part of the page. Try to click Sign Up New User Button. It opens a Signup/Login popup. Fill all fields: Email, |Password, Confirm Password and select ‘Seller’ in dropdown. Then click the Sign UP New User button. New seller adder to our users list.
To check this you need to click on ‘Data’ tab then click on ‘App data’ tab then click ‘All Users’ link. There you can see a new registered user which has a Seller role. This role will be displayed at ‘User role’ tab. If you do not see the column then find on the right side additional fields link. It opens the ‘Modify an existing database view’ window. There you can check if ‘User role’ is checked.
We designed user creation and user roles as part of our marketplace application. Some part of functionality we omitted to reduce effort and time. You can make some improvements.
-When the visitor selects Seller role then form needs to display such additional fields: name of organization, phone and website.
-When visitor clicks sign up button then it makes ‘Sign Up New User’ button inaccessible
-It sends invitation letter to new registered users
You also can read our
second part of the guide where we described how to create a listing management part of a small online marketplace.
In future articles we will continue to describe the next steps needed to get a fully functional marketplace application. If you have an interest in this you can subscribe to our blog updates.