This tutorial uses Bubble to create a group scheduling app. People can sign up, create an event, add potential dates and times, and share a public url with their friends. Friends type their name and check all dates that work for them.
We'll start with a blank Bubble template and create the sign up page. We can use the initial Index page. Drag two inputs onto the page. Change their labels to "Email" and "Password." Then bring in two buttons. Label one "Sign Up" and the other "Sign In." For the Sign Up button, click Start/Edit Workflow in the Appearance window. Add an action: under Account, select Sign the User Up. In the details window, choose the Email input's value for Email and the Password input's value for Password. Then click Start/Edit Workflow for the Sign In button, add an action, and under Account, select Log the User In. Select the email and password inputs again.
Now we have user accounts, but we need to make something happen when someone signs in. Create a new page called Dashboard and drag text in for a heading. On the Index page, click the Workflow tab and Add an event. Choose the User is logged in event, then Add an action and choose Go to page (under Navigation). Choose Dashboard for the Destination.
Next we'll set up the rest of the Dashboard page. Drag an input onto the page and label it "Event Name." Add a button labeled "Create a New Event." Click on Start/Edit Workflow and Add an action. Under Data (Things) choose Create a New Thing. The Thing we want to create is an event, so in the Type dropdown, we'll choose Create a new type. Call the type "Event." Choose Set Another Field, create a new field, call it "Name" and choose a Text type. Then select equals (=) and Input Email's value. Add another action to clear the input for the next event, and then add a third action and select Make Changes to Current User. Click Change another field and create a field called "Events," with a type Event. Check This field is a list, select Add, then Result of step 1.
Now we'll list previously created events. To create a list, drag a Repeating Group onto the page, choose Event for the Type of Content, and under Data Source, choose Current User's Events. Drag a text block into the first item of the Repeating Group list. For its text, choose Insert Dynamic Data, and choose Current cells Event's Name.
Next, we'll create a new page for a Single Event. We need to choose Event for the page type so we have access to Event data. Back on the Dashboard page, we'll drag an Icon in, choose which one we want, and click Start/Edit Workflow. Under Navigation, we'll choose Go to page and set Data to send to Current cell's Event.
Now we'll go to the Single Event page and add a title. We'll use Insert Dynamic Data and choose Current Page Event's Name, and we'll make it a Heading 1. Next, drag a Date/Time Picker onto the page, and choose Date & Time in the Input Type dropdown. Add a button, label it, and click Start/Edit Workflow. Add an action. Choose Create a New Thing under Data (Things). For Type, Create a new type and call it "Datetime." Click Set another field, click New field, and call it "Datetime" with a Text type. Finish by choosing = then Date/Time PIcker's value. Like before, we'll clear the input for next time and add this Datetime "thing" to a list of Datetimes attached to the current user. The new field will be a Datetime type called "Datetimes," and we'll check This field is a list.
Now we'll add a Repeating Group to the Single Event page, similar to our Dashboard page. We'll set the Type of content to Datetime and the Data source to Current Page's Event's Datetimes. Then we'll add text into the Repeating Group for Current cell's Datetime's Datetime.
For a Public Event page (where friends can select dates that work), we can start by cloning the existing Single Event page. We'll remove the Date/Time Picker and button, and we'll add an input for "Your Name." Then we'll add a Checkbox to the Repeating Group and label it "This works for me." Head to the Data section so we can add a list of people to our Datetime data type. Hit Create a New Field, call it "Works for," make it a Text type, and choose This field is a list. Then head into the Workflow section, Add an event, and choose An input's value has changed under Elements. Choose Checkbox This works for me for the Element. Click Add an action, and under Data (Things) choose Make changes to a thing. Set Thing to change to Current cell's Datetime, click Change another field. Choose Works for, then add, then Input Your Name's value. Under Only when, set This checkbox is checked. Add a second action and do the same thing, but use remove instead of add and only when This checkbox isn't checked.
Almost there. Now on the Single Event page, we'll drag text into the Repeating Group and set it to Current cell's Datetime's Works for. Add some text under the heading and type "Sharable link:" then choose Current Page Event's link, and choose public_event in the Page to send this to dropdown. If you want, click Rich text editor and give the text some nicer formatting.
That's it! The last step is some UI cleanup, but the app itself is fully functioning. Click Preview on the Index page to test it. The final tasks are adding delete icons to the Events repeating group and the Datetimes repeating group, making the public event url clickable, and adding a Sign Out button to the Dashboard and Single Event pages.