Purpose
With the range property you can highlight categories or display stock status of products for example. Basically you can add an image depending on a “range”. This could be numbers. For example showing an image when the value is between 0-5 or when the name of a news category is “Politics” show a blue indicator, but when the category name is “Media” show a yellow indicator in the list view. This way the users know which article belongs to which category.
What we are making
Based on the range property we will display the stock status of the flowers.
Requirements
One Web Service or Excel block.
The Result
Let’s begin!
1. Go to your app and add a new Excel Block.
2. Upload your document.
We are using a modified Flowershop document with a new field named “stock”.
3. 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.
Go ahead and select the type “Range” in the dropdown menu and press “OK” and continue the Wizard.
4. Once the Excel block is added we can edit the range property of our “stock” field in our Excel file.
Go and press the 3 dots to get more detailed information about our Excel file.
5. Select your range property. In our case this is of course the field “stock”.
When you press the Edit button you will get a popup with the range fields and their image.
In this case our “range” is not very wide, but this is not necessary. You can choose whatever range you want. This is not limited to numbers. You can even enter a word. For example:
From: Politics
To : Politics
Then you can upload a image for the category politics. In our case we want to display the status of the flowers if they are in stock or not.
6. As you can see we’ve uploaded three images corresponding to their numbers. If you are done uploading your images you can press the light grey “Ok” button in the bottom of the popup.
7. Go ahead and click “Save” and refresh the app. Now you create your layout. If everything went well, you will have something like this. Don’t forget to make an image property in your layout and hook it to your range field. In our case the field is “stock”.
The XML template for the layout is added below. (to add this click the button “Source” )
<container direction="horizontal" margin="0,0,0,5">
<image field="image" width="107" height="75" contentAlignment="scaleASpectFill" margin="0" />
<label field="name" bold="1" maxlines="3" fontSize="15" margin="0,12,0,12" textColor="title" gravity="center" />
<container direction="horizontal" height="20" width="20" margin="-2,3,0,0">
<image field="stock" width="20" height="20" gravity="right" />
</container>
</container>