In this demo app that we’ll show you how to build, your users can leave reviews for restaurants, products or any other thing that you would like them to review. We will be using the Form block to write the review and will link the written review to the correct restaurant or product using the AppMachine API.
In this overview, we will show you how the Review part of the app was created.
What you’ll need:
- Basic understanding of the Form (Beta) block
- Basic understanding of Web Services block
- An Excel sheet with the places or products that will be reviewed
What we’re going to do:
- Add a Form (beta) block
- Connect {user:name} & {user:email} to the text fields
- Get the Form data back into the app using the AppMachine API
- Add a Range field to our “star rating” field for displaying stars instead of numbers.
- Filter the reviews list to only show the reviews that has been written for that specific restaurant or product.
The app
So how did we do this?
First, we have to add a Form (Beta) block to the app and create our review fields.
You can just drag and drop the controls (textfields / labels etc. anything you need) onto the layout editor.
In our form we have connected the {user:name} + {user:email} to the text fields, so that they are already filled in when the users wants to leave a review and that saves the user time. (value=”{user:name}” & field={user:email}).
Go to "source" and fill in one of the following values:
{user:name} or {user:email} depending on which one you want to connect.value="{user:name}" or field="{user:email}".
*Note: The "Binding" input field is currently only visible for AppMachine employees.
*Note: You have to sign in to the app for this to be visible of course, or you can check “User Registration” in the Users tab.
When you go to the Developer tab (that is in the left side menu) and go to the “provider” of that form, you will notice we added some things to “body”.
We added:
- date = {am:now} (Gets the current date and time of the device)
- place = {data:title} (title is the column name of my Excel file which holds the name of restaurant or sight)
The reason we added the date field is because we wanted to know when the review is being placed.
For example 2016 - March 13 at 10:13AM
The second reason why we added the “place” field is because we have to know about which restaurant or sight the user is writing their review. That way we can filter the list when we are showing the reviews.
So when the user writes their review this is the how the data is being stored in the data store.
(Developer tab → Custom Objects→ Write Review) this is also how i named my form block.
1.Block structure
2.Custom Objects
3.Data store
Alright now we have some reviews. Now it’s time to show them in the app.
Steps to take:
Add a web service block > Select AppMachine API
Select “Returns data from data store”
Fill in the name of your form block (In our case this is Write Review)
Click Next and select the node “root”.
Click on the field “Rating”. We are going to edit the type, because the type is a number now and we want it to be it of a “range” type so we can add images that represent a certain “range” (1 to 5 in our case, because we have 5 stars).
Click Next and give your block a name (we called ours is called “Reviews”).
The next step is to edit the Range field and upload some images. So that the stars represent the numbers that are in the data store ( 1 to 5 ).
Go to Developer tab→ and select your dataprovider (returndatafromdatastore1 for example)--> go to Output parameters and hover over the “Rating field” and click the pencil icon.
This gives us a popup where we can upload the images. Just copy/paste like we did.
Click Ok and we are done with the range field.
Now you can go back to your Review block and make the layout for it.
Ours is stated below.
*Note: The “rating field” we can show in a <image> element instead of a <label> because we uploaded images for it. So the star images represents the numbers now.
XML (source)
============
<container direction="vertical" version="3" min-height="44" margin="5">
<container direction="horizontal" width="fill_parent" margin="10 10 0 10">
<label value="AM:Upper([{data:name}])" width="fill_parent" margin="0" maxlines="auto" fontsize="12" textcolor="ControlBackgroundColor" detectlinks="false" halign="left"/>
<image field="rating" height="22" width="62" gravity="right" margin="2 10 0 10" />
</container>
<label field="date" type="date" format="yyyy - MMMMdd - HH:mm:tt" textcolor="Body" width="wrap_content" fontSize="12" margin="0 10 5 10" />
<label name="Label1" text="review" field="review" label="" margin="10 10 5 10" maxlines="auto" fontsize="16" textcolor="Body" detectlinks="false" halign="left"/>
</container>
============
But now we are getting all the reviews that everyone made in that block and we don’t want that. We have to filter the review block remember? That is why we send the
“place = {data:title}” field along with the rest of the review fields.
How do we filter the list to only show the relevant reviews?
You probably guessed it already.
Go to Your Review block → Advanced tab-->Advanced header→ filter and type:
place = "{data:title}"
This will filter the Review block in only showing only the relevant reviews for that place.
*note: The Reviews block has to be beneath your Excel block, otherwise we cannot filter the “place”, because place is the field in the Excel block holding the restaurant or sight name.
First field is the "current" field that you compare with a field of the "parent" block (Places).
The demo app (Reviews) will soon be available in the DEMO section of your app overview.
