Double clicking on the repeating group opens the property editor, and I pick ‘Lost object’. The first thing we do is to define the type of content of the repeating group. We also add a button so that the user who recognizes something can send a message to the person who found the object. Let’s add these elements in the first cell (the borders will turn red to show that the new element is attached to the repeating group). Here we want to show the picture, the description, the location and the time. The way this element works is that you design the first cell, and the others will follow a similar design. Let’s change the line-style layout to a cell-style (3 lines and 3 columns). The first thing we do it to define the layout of the repeating group. Let’s add this element below the search criteria. For the criteria, we want the user to be able to specify a location, a date, and a description. We’re going to have some search criteria and a list of results. Let’s start by building the page elements. Here we want to display search results based on some criteria. We add a reset relevant inputs action to wipe the content of the form once it’s done and we’re all set on this page. We just want to define for each field which input contains the relevant information. As we already defined our fields, it’s going to be pretty fast. The action we want to use here is the ‘Create a new thing’ action. Let’s click on ‘Start workflow’ for the button. Okay, we can now make this form actually do something. Then I had the map show the location typed in this input. I changed the content type of the input ‘Where did you find it?’ to ‘Address’ as we want to make sure the user types a valid address. We’ll also add a map element so that users can make sure the location they entered is right. We’re going to have an input form and a submit button. Let’s move to the report page to build the form where our users will report what they found. We just change the destination page to ‘search’ and modify the caption and colors.Īlright, we now have our ‘homepage’ :) Report Page I copy paste this link to use the same format for the search page. We do this in the conditional tab, where you can change how each element looks based on some conditions. Let’s improve the look of the link when the user hovers it with her mouse. We just pick the relevant page as the link destination in the property editor. We’re just going to add two links that redirect the user to search or report, based on what they want to do. Let’s define this in the data tab of our app, making sure we pick the right type for each field. At this stage, we won’t have people sign up, so we should ask for an email at each submission so that we know who to send an email to. A lost object should have a description, a picture, a location (where it was found), a date (when it was found) and the email of the person who found it. We only have one type of thing to save - our ‘lost objects’. The second thing we want to think about is our data structure. This leads to three pages: ‘index’ (aka our home), ‘report’ and ‘search’. Reporting and searching should be done on two different pages. We need a homepage where users land and choose whether they want to report a found object or search the database. Let’s think about the pages our app will have.
LOST EBOR PAGE BUILDER CODE
Here is what the app looks like: bubble.is/site/lostandfound/Īnd here is the code you can explore (and modify!): bubble.is/page?id=lostandfound This will be an app where people can report things they found on the street, and people who lost stuff can search what has been submitted and send a message to the relevant person. Another Bubbles lesson today: let’s build a Lost & Found service.
0 kommentar(er)
