This tutorial will explain the basics of setting up a photo wall in your app that will allow your users to post photos and show them to everyone else. We’ll show you what steps to take to get it up and running, so no experience is required. However, if you’re planning to expand your photo wall with more advanced features, having some prior experience with our Pro features won’t hurt!
The Pro blocks you’ll be using in this tutorial are:
- Form (beta)
- Webservice (GET)
- Webservice (DELETE)
I - Adding the Form (beta) block and setting up the fields
- Add a Form (beta) block from the Pro tab to your app and name it. The name will be important in a later stage of this tutorial. We recommend using a simple name that doesn’t contain any special characters.
- Drag and drop the controls you want to add. For this tutorial we’ll be using an Image Picker to let the user add an image, a text field for a title and a label for some explanation.
- Edit the titles and other properties of your fields to make them look a bit better. Click the save button.
- Check the bindings of your fields in the source code to make sure the proper names are used in your datastore. Change them to match your titles if needed and make sure you don't use spaces in these bindings. Save your changes.
- Test your form! Send in an image and give it a title. We’ll be retrieving this data from the database in the next part of the tutorial.
II - Adding the Webservice block and setting it up
- Add a Webservice block to your app.
- Select the AppMachine API..
..and then choose the “GET” webservice.
- Fill in the name of your Form (beta) block and click next. We've named our block "Photos" in the first part of this tutorial.
- You should see the test image you've submitted in the Mapping screen. Select the second checkbox from the items and click next:
- Name your block and finish the process! We've called our block "Photo Wall". Next we'll be changing the layout of the Photo Wall.
III - Changing the layout of your Photo Wall and it's detail screen
- Make sure you have the Photo Wall block selected. Remove the label you see in the layout editor by selecting it and clicking the Delete button on the bottom left and save the changes.
- Click on the "Data" tab in the layout editor and drag the image value to the editor. Hit that save button again.
- Next, go to the Info (Screen) block of your Photo Wall and drag/drop the same Image value. In addition, drag the Title value in the editor as well. Save it.
- Check out your newly created photo wall in the AppMachine Simulator in your browser or on our App Previewer on your device!
Additional options/tips for the Photo Wall block
- If you only have one single image in your Photo Wall, the Webservice block will directly show the Info block. You can change this behavior in the "Advanced settings" of your List block. You'll find the option under "Advanced":
- If you want to show two columns of images on your main Photo Wall, you can change the layout in the "View" tab of the List block:
- You're not limited to the fields we've used in this tutorial. If you want to add more text fields that allow your users to give some extra information about the photo, you're free to do so!
- You can set the Image and Title field to "required" to make sure your users can't send in empty forms. Check out the following tutorial for instructions: Setting Required Fields.
- In a follow-up tutorial we'll be showing some more advanced options for your Photo Wall. To be continued!
IV - Managing the contents of your Photo Wall
It can obviously happen that a user accidentally uploads the wrong photo. In this part of the tutorial we'll show you how to create an "Admin" section for Boss users in the app. This requires "User Authentication" to be enabled. More on that can be found here: User Registration. You'll need to create a user account with the Boss role for yourself.
- Select the Info block from your Photo Wall. Then create a new Webservice block with the AppMachine API. This time you'll select the "DELETE" option.
- Select the name of your datastore, which is "Photos" in our case. Then select the _id from this datastore.
- Finish the block by clicking next, choosing a name for it. We've named it "Admin". "Nest" the Admin block below the Info block by dragging it slightly to the right.
- During the process of creating this block, the photo we submitted earlier will get deleted. We'll just take it as a confirmation that it's functioning properly :-). It's basically a test call.
- Go back to the Info screen of your Photo Wall. Add a button to it, and give it a name and caption. We've named ours "Delete". Save it.
- Double click on the newly created button, this will take you into the Logic screen. Here we'll be adding a function to the button.
- Click on the blue "+" button.
- Click on the "GoTo" action and select the newly created "Admin" block from the dropdown menu. Then save the changes. Your button will now lead the user to the correct block.
- Now we'll be adding a snippet of code to your delete button's source code to make sure only users with the Boss role can see it. Navigate to the source of your Info block by clicking the source button.
- Add the following snipper somewhere between the <button> and </button> tags of your delete button: visible="AM:userrole([boss])" - Make sure you paste it without any text styling. Save the changes. The button will now only be visible for Boss users.
- You're done! You now have a basic Photo Wall where your users can post photos. In addition, you'll be able to delete photos that were accidentally posted, or when you simply don't like them :-).
Additional options/tips for the Admin block
- You can also remove submitted form entries in the "Developer" screen of the AppMachine CMS. Navigate to the Custom Object with your Photo Wall's name and you'll be able to see all entries. Click on the Simulator to move it out of the way. Hovering your mouse over an item should now reveal the delete button.
- You don't have to edit the way the Admin block looks as regular app users won't be seeing it. Unless you want to change this, you can leave it as is.