Table of context
File Viewer Control
File Viewer control allows to insert files on the customized Modern form to view files in the preview mode. File Viewer allows the insertion of different file types including Excel, Word, PowerPoint, Visio, PDFs, 3D models, videos, and more. File Viewer control is available in skybow Solution Studio, Modern Forms add-ins (SharePoint Online and SharePoint Server 2019/SE).
Note1: For the SharePoint Server 2019/SE, Office Online Server required to be configured to use File Viewer control.
Note2: In SharePoint Server 2019/SE, file types that can be inserted are limited to Word, Excel, and PowerPoint (specifically .doc, .docx,. xls, .xlsx, .pot, .potx, .ppt and .pptx). + PDF files (Open in Word)
Configuration setup
File Viewer control you can easily add by clicking on the + icon within the section where you wish to add the control and choosing File Viewer control in the Control section.
When you click on the File Viewer control, the configuration panel opens where you can configure the file you want to preview.
There are two ways to insert the file. You can directly add the file using a Static path or build a Dynamic path to the file using expressions:
- Static path. You can choose the file from your site or directly upload the file from your computer. Files uploaded from the computer will be stored in the specific library depends which skybow product you use:
- sbSolutionAssets library if you use skybow Solution Stutio. Static file path is:https://YOUR_SITE_URL/sbSolutionAssets/Files (in the Solution elements: Miscellaneous -> Assets -> Files folder on the loaded view)
- SiteAssets library for the Add-ins. Static file path is:
https://YOUR_SITE_URL/SiteAssets/FileViewer - Dynamic path: Expression value that should return server relative or absolute URL to the file on the current site.
Note: Files should be located in the Document library only. URL to the list item attachments is not supported
Additionally you can specify start page number for file supported by MS Word and PDF files.
Also, you can customize File Viewer control using Styling:
Examples how to use Dynamic path option in File Viewer control
Show file preview during uploading file to the sub library
Using Dynamic path you can configure the preview of the file in a sub library during uploading. To configure this:
- Customize Edit form of the sublibrary to show file metadata at the left and file preview on the right (Use two columns layout on the form)- Choose Dynamic path option: use Assignment expression type with FileRef field placeholders:
=[[FileRef]]
- In the sublibrary configuration check options 'Open edit form on file uploading' and 'Save file before open edit form':
- On runtime during uploading the file to the sublibrary Edit form will open with file metadata and preview:
Show a preview of the selected file in the sub library
- On the customized Display form use two columns layout (sub library on the left and the File Viewer on the right):
- Choose Dynamic path and insert the following code using Function expression type (make sure to change the sub library name to your configuration):
var selectedItems = [[@SubLists.SubLIb.SelectedItems]];
var files = selectedItems.filter((item) => {
return item["FSObjType"] != 1;
});
if (files && files.length) {
return files[0]["FileRef"];
}
return '';
- On runtime select the file to preview: