We make it simple to include images in your app or screen design. Images add an extra dimension to your app, enhancing the user experience.
- Bring in images using a data source column
- PNG and JPG files, up to 2000 kilobytes in size, can be uploaded
- Hyperlinks can call images on demand using a public URL - Include an image in the form design
- Section field type
- Sketch field type
Data Source Image Columns
Data Source columns specify what type of data they will store, and Image is one of the available types.
Wherever a data source is being used, this feature allows images to be displayed in the app. For example, it can be used to display a small thumbnail image on each row of a list on a Form or to show an image when a user is on a Detail Screen viewing a single row of data.
Note: Currently only PNG and JPG image file types are supported by our platform and apps.
Setting up an Image Column
On the data source Rows page of an existing or new data source, the box under each column header defines the columns' data type.
For your chosen column, set the data type to Image.
Upon selection, you may notice the page refreshes and the rows become taller. This allows space to view thumbnails, a smaller version of your image.
Manually Upload Images into your Image Column
If your data source is manually editable, meaning it has less than 100 rows and it is not connected to an external source, use the Select New button on each row to upload an image into a column's cell.
The file is stored on our platform upon successful upload.
After uploading images, take care to Save your changes!
Once you have images in your data source, you can set the image to display as a thumbnail whenever rows from the data source are displayed. This is done via the Settings page for your data source. On the Settings page, select your image column from the drop-down in the thumbnail area of the Default Row Display.
When a thumbnail is set on your Default Row Display, the thumbnail will appear when you use a Choices field in your form that has its Display Style property set to be List of Options.
Referencing Images stored at a Publicly Accessible URL
Alternatively, you can insert web links (URLs) into the column for publicly accessible images (e.g., https://img-aws.ehowcdn.com/877x500p/photos.demandstudios.com/getty/article/241/162/477744883.jpg). Images hosted on private networks or which require session or login should not be used. In this scenario, the image file is not downloaded to our platform, but is loaded on-demand from the hyperlink. Cache it locally on the device for offline use.
You can specify hyperlinks as your Image column values when using any of the following import options:
- Manual Excel file import
- Connector to a spreadsheet or other data file (See this article for more information)
- Via our Data Source API (See this article for more information)
Images in Details screens
Bind your image column to a detail field in order for the app to display the image at full-screen width.
Images in List of Data screens
Bind your image column to the thumbnail property using the list screen designer.
Images in Data Entry Form Screens
Another way to involve images in your app is by using the Section field type in your Form screens. This field type is a read-only display field that allows you to upload images that will appear inline in the app. Common uses for Sections include showing diagrams, lengthy formatted disclaimers and even navigation or section headings.
The Sketch field type also provides the option to upload a default background image. This comes in handy when you want to have a standard background image that you want your users to annotate - for example, circling injury areas on an outline of a human body or marking spots on a floor plan.
Finally, there is also an option to capture an image from a specified URL on Media field types. This proves helpful when you want the user to trigger the image capture and display - e.g., from an IP camera.