Displaying images and documents

Image Storage

You can display images and documents in your app. Images are stored in Image column types. Documents are stored in File column types.

Image or document values are stored in your spreadsheet as either a URL or a file name.

URL Value

If you store the value as a URL, ensure that the URL is publicly accessible! Many users who choose this option provide image URLs that appear accessible to them, but are not really publicly accessible. Here are some examples of bad image URLs:

  • An image URL from your Facebook album-- you may be able to access the image because you are logged into Facebook, but when some other user tries to see the image, they will get an error. Whenever you are using an image from some kind of online storage provider, make sure that public access permissions are provided.
  • An image URL from your Dropbox or Google Drive-- most cloud file systems show you an image on a webpage, but the webpage itself is not actually an image. It is a page that hosts an image. For example, : https://drive.google.com/file/d/{fileId}/view is an image hosting page on Google Drive, but the actual image URL is https://drive.google.com/uc?export=view&id={fileId}
  • An image URL from your local computer-- of the form file://MyImages/MyImage.jpg or C:/MyImages/MyImage.jpg. AppSheet has no access to your local computer, nor do you have the option to 'upload' an image to AppSheet. Instead, place your images in your cloud storage provider and use one of the mechanisms described above.

File Name Value

If you store the value as a filename, the image or document must be stored in your cloud file system, not on your desktop!

  • In the app editors, we provide a file selector widget that lets you browse your cloud file system to find an image.
  • If you are specifying an image or document file name in your spreadsheet, the file should be in the same folder location as your spreadsheet. For example, if you use Google Drive and your spreadsheet is in the /appsheet/data/MyApp folder, then if you have the image 'MyImage.jpg' in the same folder, you can just use the value 'MyImage.jpg' in the appropriate cell.
  • It is sometimes easier to organize images in their own folder. For that reason, we allow image file names to be specified relative to the location of the spreadsheet. For example, if your images are in a subfolder called 'Images', you can use the cell value 'Images/MyImage.jpg' or './Images/MyImage.jpg'.

See this Google Sheets article if you need assistance with image sizing.

 

Custom image guidelines

AppSheet downscales all images to 600px wide except for the app background image which is 1000px wide.

for custom images, we generally recommend using square images - 600x600px.

In the Slideshow (Row Detail) view

The slideshow view has a "main" image. The main image is automatically selected but can be overridden with the MainSlideshowImageColumn in the slideshow view options. The ImageStyle option can be used to control how the image is shown: 'Fill' will crop the image to fit the header area (great for photos), 'Fit' will scale the image down to fit inside the header area (great for logos), and 'Background' will use the image as a background for the whole slide (great for pattern images and some photos).

In 'Fill' mode, images shown at the top of the slideshow view will be a maximum of 768x400 pixels. On small screens (768 and below) the image will be 320px tall, otherwise it will be 400px tall. We recommend making a 768x400 image with the middle 375px as usable area, the sides will be cropped off on phones and other small screens. Here's a sample:

 

Showing images in Google Sheets

If you would like to have URLs to view these images, you should add an additional URL column and use the following spreadsheet formula (on Google Sheets) to construct image urls from the image file names: 

Format:

=SUBSTITUTE(CONCATENATE("https://www.appsheet.com/template/gettablefileurl?appName=","AppName-Account#","&tableName=","TableName","&fileName=",+ImageColumnCell), " ", "%20")

Sample:

=SUBSTITUTE(CONCATENATE("https://www.appsheet.com/template/gettablefileurl?appName=","Inventory-114348","&tableName=","Orders","&fileName=",+B2), " ", "%20")

To test the image url, copy the constructed value into any browser window. The image should render. If there is something wrong with the image url construction, the image will not render and instead you will see a message indicating that the page could not be found. Almost always, this is because the application name specified is incorrect. To find the application name, look at the url bar of the app editor browser window. It should indicate something like www.appsheet.com/template/appdef?appName=Inventory-114348.

Now that you have the correct URL format, you may also embed the image inline within your spreadsheet (on Google Sheets). To do so, add an additional column (you could call it "Image Preview" for example), and then wrap the URL formula in an IMAGE() expression.

Format:

=IMAGE(SUBSTITUTE(CONCATENATE("https://www.appsheet.com/template/gettablefileurl?appName=","AppName-Account#","&tableName=","TableName","&fileName=",+ImageColumnCell), " ", "%20"))

Sample:

=IMAGE(SUBSTITUTE(CONCATENATE("https://www.appsheet.com/template/gettablefileurl?appName=","Inventory-114348","&tableName=","Orders","&fileName=",+B2), " ", "%20")) 

 

Showing images in Smartsheet

If your data is in Smartsheet, any images captured to the sheet will automatically be stored as a row attachment and will also display inline with the specific cell.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.