I’m trying to create an app that is a cross between facebook and twitter for a specific group of people. What I’m having issues with is just the login and signup workflows… I don’t know what to put in for the values in the workflow for email and password so that it knows to capture the persons info and then let them on to the next page. I know Bubble is easy or suppose to be easy but apparently I need the toddler’s version cause I feel so lost…
1 Like
Have you had a chance to look at the video at https://bubble.io/documentation?
The vide you’re looking for is:
“Building your first Bubble workflow”
It demonstrates how to build a sign up workflow.
Here’s the script if you want to follow while watching the video:
Hello, we ‘going to build a sign up form together.
What do we need for this? We need to build two input forms so that the user can type an email and a password, and a button to trigger the sign up.
So let’s start with the input forms. I go to forms in the new element palette, and click on ‘input’. Then, I can draw a rather large input on the page. I can also change the placeholder to prompt the user to type her email.
I also define the content type as email to make sure the data entered is an email, and make it mandatory.
Finally, let’s center it in the middle of the page.
Let’s duplicate this form. If I press control while dragging the element, the form will be duplicated. Let’s change so that it’s built to receive a password.
Okay, we have a simple version of a sign up form. Let’s now add a button. We pick button in the visual section, and draw it under the input elements. Let’s change the caption to ‘Sign me up’, and center it as well.
Good, we’re now ready to think about workflow. What do we want to happen? When the button is clicked, we should sign the user up. So let’s go to the workflow tab and do this.
The event we should pick here is ‘an element is clicked’, and let’s define which element. There is only one button in our page, so it’s easy. The first action of this workflow is to actually sign the user up, using the credentials she entered. This action is in the account section of the action menu.
This action is going to create a new user for my application, using an email and a password. This is what I define in the Property Editor.
I just need to tell Bubble where to find this information. Clicking on the Email field reveals a dropdown menu with the different sources of data. We can see the two inputs I just added to my page. In this case, this is the email input form. I do the same thing for the password and the password input form, and we’re all set. In run mode, at this stage, the user is signed up.
Now, let’s say we want to send a welcome email to our new user. To do this, I add a Send an Email action after the sign up action. I can find this action in the ‘Do Stuff’ section of the action menu.
Similarly to the sign up action, I need to fill some fields in the Property Editor to define how the Send Email action should behave. Firstly, we need to specify who to send this email to. I, obviously, don’t know the email of the new user, but I can define it as the ‘current user’s email address’. Clicking on ‘Insert dynamic data’ reveals the different data sources in the workflow. In this case, I can pick ‘current user’. The next dropdown shows the different information I can have about the user, here, we pick ‘email’. Once this is done, I can type the email content as I would do in a regular mail service.
For the last action, let’s redirect the user to another page after the sign up. I pick the ‘Go to page’ action in the navigation section, and define the page to redirect to as ‘post_signup’.
Let’s review what we’ve done: when the button is clicked, we sign the user up, based on the information in the page, we send an email to thank the user, and we change the page.
4 Likes
You have asked in another thread, don’t ask again here! People will lose track of where they are meant to answer etc. etc.
2 Likes