This tutorial will show you how to use the “Set Property” option in the Logic Tab in combination with a Web Service.
This allows a user to, for example:
- Enter a value
- Have the value used as a parameter in a web service
- Execute a search in the web service's data.
- Show results
- The SetProperty option comes in handy when you want to have a "global" variable that you can use throughout your app.
This way, you can show the user specific info based on their entered value.
What we are building:
Search user by username.
The textfield input is connected to a web service.
Purpose
Showing relevant info based on the user's postal/zip code.
Requirements for the tutorial
- One Web Service block
- Web service that can handle search input.
Screen block with input text field and a simple button
Let’s begin!
1. The search screen
- Add a Screen block to your app (We've name it "Find users")
- Build the form with at least one input text field and a button.
2. The results screen
Go and add a Web service block.
- Select “Custom Web Service“
- Input https://jsonplaceholder.typicode.com/users
- Select the root “node” by marking the checkbox next to it.
- In the next screen, name the Web Service “getUser”.
- Click next and give your block a name. (in our case we've named it "Users")
- Click on the 3 dots, because we have to add a parameter.
- Go to the query tab and enter the property "username" ( it's the parameter to find a user. https://jsonplaceholder.typicode.com/users?username=Bret for example)
- Click SAVE.
===============================================
Alright we are done with the web service part. You can make a layout for our users in the Info block. AppMachine will skip the "User" block because we only have one result if everything will go smoothly when we connect out search input with the web service.
I've used this layout:
<container direction="vertical" version="3" min-height="44" margin="3">
<label name="Label7" text="username" field="username" label="" margin="5" maxlines="auto" fontsize="17" textcolor="Body" detectlinks="false" bold="false" halign="left"></label>
<label name="Label2" text="name" field="name" label="" margin="5" maxlines="auto" fontsize="14" textcolor="Body" detectlinks="false" halign="left"></label>
<label name="Label6" text="email" field="email" label="" margin="5" maxlines="auto" fontsize="14" textcolor="Body" detectlinks="false" halign="left"></label>
<label name="Label1" text="phone" field="phone" label="" margin="5" maxlines="auto" fontsize="14" textcolor="Body" detectlinks="false" halign="left"></label>
<label name="Label3" text="website" field="website" label="" margin="5" maxlines="auto" fontsize="14" textcolor="Body" detectlinks="false" halign="left"></label>
<label name="Label4" text="address.city" field="address.city" label="" margin="5" maxlines="auto" fontsize="14" textcolor="Body" detectlinks="false" halign="left"></label>
<label name="Label5" text="address.suite" field="address.suite" label="" margin="5" maxlines="auto" fontsize="14" textcolor="Body" detectlinks="false" halign="left"></label>
<button name="Button1" width="fill_parent" value="Show Textfield property" height="44" label="" fontsize="14" margin="5" backgroundcolor="#ff0000"></button>
</container>- Let's connect the "Show Textfield property" in the Logic tab.the name of our button is "Button1".
-Select "ShowMessage"
- Enter this value: " user is {Dataprovider3.username} ".
Dataprovider3 is the name of our getUsers web service.
username is the name of our field in the web service which is equal to the name of our "Set Property" function.
Our button is connected and will show the value of the web service field.
===============================================
- Let's get back to our Find Users block and connect our "search button".
- Go to Logic and select our button.
- Click on the blue "+"
- Select "Webservice"
- Select your web service getUser
- Click Finish, your screen will look like this (Dataprovider3 is the internal name for our web service getUsers, you can find this when you go to the developer tab),
- Next we will select the "ASSIGNMENT" + button. Select "Set Property". (We have to do this to "store" the value(for example "Bret") we entered in the searchfield).
- Enter "username" (this is the same name as the parameter in the web service remember?) in the first input and second input "!{searchInput.Value}".
"searchInput" is the Name of our textfield.
username is the name of a field in the web service we are calling (getUsers).
We are filling this field with the input from our search field.
Our Logic will look like this
- Next click on the "SUCCES" + button and select the action "Goto"
- Select our "User" block
-Click Finish, our Logic will look like this
-Next up is the "Error" + button, select "Show Message"
-Enter a message like "Something went wrong!" and click Finish.
- We have finished all the steps, our Logic will look like this.
- Click Save.
===============================================
Testing
Now we can check if everything went okay. Fill in one of the following values for testing.
Demo input value for users:
Bret
Antonette
Samantha
Karianne
Of course you can look for yourself what the values are when you copy and paste the web service URL in your browser.
This will show you JSON
You can see that we've used the field "username" for our SearchInput. You can user the other fields as well. Instead of username you could use name, email, phone etc.
==============
You can also place a Set Property in the Screen.Init. For example:
name value
propertyText hello
In the "Source" of your template you can do something like this:
value="{propertyText.}"<label value="{propertyText.}" name="Label7" label="" margin="5" maxlines="auto" fontsize="14" textcolor="Body"/>
This will simply display the "hello" text in your view
==============
Extra:
-- Set Property --
Description: skips the previous screen when pressing the back button.
Example: screen.SkipScreenOnBackNavigation = true