This tutorial shows how to develop an application for letting users pick a location - a place and rate. Users will be able to add pictures of a particular location/place.
Preparing and Designing
Before start designing your app think about what kind of data you will need. For this example we will need;
- Name: To hold places title
- Location: Coordinates of the location which will come from maps data
- State: State of place
- City: City of place
- Address: Detailed address
- Zip Code: Zip code of a place
- Photo(s): Photos of place. It could be many.
- Rating: Rating of place.
After deciding your data fields, think about how you want to collect and present data to the user. In short, think about UI. In this example we will create 3 different forms to cover functionality ;
- Location Info Form: Adding a place.
- Photo Form: For adding photos to the selected place.
- Rating Form: For letting users pick a place, and see its location data and give a rating.
Please keep in mind, Xpoda Studio will create fields at database right
after you click "Save" button from toolbar.
To be sure, use "Save" button frequently or you may loose data.
Developing Application
Now that we designed our application data and UI, it is time to develop an application using Xpoda Studio. Login to Xpoda Studio and let's add a new form.
Location Info Form
Add a new form and name it "Location Information". From toolbar add "Name" , "Location", "State" , "City", "Address", "Zip" . Please notice Zip is a numeric field.
Photo Form
This form will be for adding multiple photos of location/place. First, start adding a "Picture" field from the toolbox.
Now, we should create a relation between our Location form data and Photo form data. In order to do this, we add a text field to form and name it "Location". While this field selected, from properties pane (right side pane) , select Type property as "Authority of Field" and select Type of Authority value as "It can not see fields". This will hide this "Location" field.
In order to show up Photo Form inside from the Location Info Form, we should add a button to the Location Info Form. We want to show Photo Form when this button clicked.
From the right pane, click "Add New Action" to do this. Type of Action should be "When Clicked" to handle button click. The operation will be "Open Form" because we want to open a form. From Form dropdown select "Photo Form" or what you named that photo upload form.
Still, we need to define a relationship between two separate form field as we call it "Mapping" at Xpoda. To do that use "Mapping" property from Property Pane as shown below.
Rating Form
Now, we are ready to create a rating form to rate places created. Create fields for displaying location/place data that we created at the first step and additionally add extra fields to give a rating, average rating, and a comment box for users to add text comments to their ratings. For the rating field, use the Rating component from the toolbox. To show place on the map we will add Map component from the toolbox as well. The final result of the form will be like this ;
To show location data, we should provide data to this form. In Xpoda, we use "Queries" to achieve this. Select form, from Property Pane, click "Add New Action". Use "When Form Opened / Update Value" action. This action will run when the form is viewed, so you can update data. Choose the value field as a map field so we can show data on the map.
Use this query ;
SELECT Location, Name, 'Red' FROM dbo.R_LOCATION_INFORMATION
WITH (NOLOCK)
Please notice property pane ;
In order to get location/place data when the user clicked to a specific map location, we should an action to map component. Select the map and from the property, pane click "Add New Action". Add "When the form is opened / Update value" action. Select "Location" as a value field as shown below.
And finally, we want to show location /place data at Location Info Form when the user clicked to a location marker on the map. In order to do that we use Actions again. Select the Location field, from Property Pane, click "Add New Action". Select "When the Value Changes / Create a New Data Object" couple. For this to work we should add query again;
SELECT
R_LOCATION_INFORMATION.Name,
R_ LOCATION_INFORMATION.State,
R_ LOCATION_INFORMATION.City,
R_ LOCATION_INFORMATION.Address,
R_ LOCATION_INFORMATION.Zip
FROM
dbo.R_ LOCATION_INFORMATION WITH (NOLOCK)
WHERE R_ LOCATION_INFORMATION.Location = '$PLocation'
This query will create an object. We named it "PARKINFORMATION". It could be "PLACEINFORMATION" as well.
Now we created a data object that we can bind any component on the form. Sequentially select textbox component on the form and from Property Pane select "Linked Object" to newly created "PARKINFORMATION" object or whatever you named it.
Then, we need to show photos of the selected location. Again select the Location component and add a new action. "When the Value Changes / Update Value" couple. Select "Photo List" for the value field. Use query for binding data. In query box enter following query;
SELECT
R_Photo.Img_1
FROM dbo.R_Photo WITH (NOLOCK)
WHERE R_Photo.Location = '$PLocation'
To show an average rating of selected locations uses action again. Select "When the Value Changes / Update Value" couple. Select "Average Rating" for the value field. Use query for binding data. In query box enter following query;
SELECT
AVG(R_RATING.Rating)
FROM dbo.R_RATING WITH (NOLOCK)
WHERE R_RATING.Location = '$PLocation'
Finally, we completed our application. Click "Run" to see your application.
