Using Image Columns

Data Sources allow you to specify columns containing a specific type of data, and Image is one of these types.

This enables you to display images in the app in situations where rows of your Data Source are in use, for example as a thumbnail on each row when displayed as a list of options in a Form, or as a larger image when viewing the details of a single row via a Details screen.

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, under each column header is a drop-down list that allows the data type of the column to be specified.

On your target column, change the data type to Image.

Once the data type is changed to Image, the page will refresh, and you will notice that now the rows are taller.

This is because the image column is now making space for thumbnails of your images.

And, a “Select New” button will appear for each of the column’s rows allowing you to upload an image for each cell.

After uploading your desired images be sure to save your changes. At this point, you now have an Image column ready to use in your screen types.

---

Adding Images into your Image Column

There are two ways you can add image content into an Image column:

• Manual Upload
  If your data source is manually editable (i.e. less than 100 rows and it’s not connected to an external source), then simply click on the “Select New” button to upload an image into a column’s cell.
  The file will be stored on our platform upon successful upload, but be sure to save your changes after adding your images.

• Publicly Accessible URL
  By using web address hyperlinks to the images in question.
  e.g. http://upload.wikimedia.org/wikipedia/commons/a/af/Burger_king_whopper.jpg

  The only restriction is that the hyperlinks must be publicly accessible from the internet – i.e. must not be hosted on a private network, or require a session/login in order to access the image.
  An easy way to check if your hyperlink is truly public is to open a web browser window in Private browsing mode, then browse to the image hyperlink.

  When you specify image hyperlinks, the image file is not downloaded to our platform. Instead, the file will be loaded from the given hyperlink on demand.
  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 (Data Source Connectors)
  • Via our Data Source API (Data Source API)

Image columns are a great way to add an extra dimension to your app, and the ability to simply specify a web address hyperlink to your chosen image makes for a dynamic and easy way to plug images straight into Data Sources.