In mobile applications the Image component workflow is a bit different from the workflow in web applications. This article describes in details how to use Image component in mobile application. In repeating elements, such as elements of the List and Grid components, loading the Image from the data model is not unambiguous and requires a certain procedure for loading using the BP.
Image component usage in repeating elements (List/Grid)
Let’s see an example where we have flights table and each flight object has its own cover representing by the ImageFile field [file].
Imagine that the flights list is represented with the List component. Each element of the List component - is a Card component containing Image and a few other components to display relevant flight information. In the UI designer it looks the following way:
First of all, Data Source has to be specified for the parent component (List component in this case).
To upload the data from the database to the Image component, we need to create a new business process for the Image component.
The required BP begins with the creation of an image element in the application, namely the onCreate trigger. First of all, it is necessary to receive object of data model corresponding to the given image. To do this, you can use the data that is already received by the parent element (List in this case). To get data from a List, the List Get Data block is used.
The logic of the BP that we are building is as follows: if one of the Data array elements (flight model object) has an identifier (ID) equal to Record ID, then we have found the flight table element we need. Then, the image file ID is taken from the flight model object and loaded into the Image component with the required Widget ID.
To iterate over all elements of the Data array, the For each loop BP block is used, and, in the body of the loop, each element of the Data array is expanded using the Expand Flight block. If Flight ID = Record ID, then the ImageFile file identifier is taken and the file object is loaded using the Server request GET /_files/:id/download/ block. Example of the corresponding BP as follows.
In the next step, the image file is expanded using the Expand file block to pass the bytes array as input to the Image Update Properties block's Data property. It is also necessary to specify the Widget ID of a specific image element in the sheet, passing it the value from the onCreate block at the beginning of the BP. The result of the last part of the BP is shown in the example below:
In the end the Break Loop block is used so as not to iterate over the remaining elements of the array in vain.
Loading an image from the file system of the user's smartphone
Consider an example of loading a user profile avatar. The web interface consists of an image and a button that launches the BP, and looks like this:
Then, the relevant BP allows the user to select the files from its device with the use of Select Files block. And if the files were selected successfully the element with index = 0 is taken. Corresponding BP looks like:
The resulting file element of the Files array must be uploaded to the web application server for further use (Server request POST /_files/). If the request is successful, the file object at the output of the Server request POST /_files/ block is passed to the input of the Expand file block to get a Bytes Array, which is passed to the input of the Image Update Properties block in the Data property.
