Introduced in Version 5.1 of The Portal Connector is a feature that allows developers to modify their templates to embed documents into their pages so that users do not have to download documents to preview them. This can be useful in approval scenarios where you want the user to view and approve a document online, without it ever touching the users hard drive.
To embed documents into any page, the content must be served using a specific content disposition. The default content disposition for downloads is “attachment”, and that is how our files are served across The Portal Connector, this content disposition prompts the user to download and save the file. To serve the file as an embedded document inside the page, the content disposition needs to be changed to “inline” – this marks it as embeddable. The Portal Connector enables this by checking for an extra optional query string parameter to all of the download services: “inline”. Setting this query string parameter to “true” will change the content disposition to inline.
To start with embedding documents into the notes widget we need to make a new template:
In the view-template section, we need to update the download link with our embedding code. Currently the line looks something like this:
<a title="attachment" href="/PortalConnectorMvc/Services/Data/Notes/Download/${controlDataId}/${id}?filename=#= encodeURIComponent(attachmentFileName) #"><span class="fa fa-paperclip" aria-hidden="true"></span> ${attachmentFileName}</a>
This provides a basic download to the document (Save As…), to update this to the embedded version, we need to use the object tag:
<object width="100%" height="500px" type="#= mimetype #" data="/PortalConnectorMvc/Services/Data/Notes/Download/${controlDataId}/${id}?filename=#= encodeURIComponent(attachmentFileName) #&inline=true"></object>
You’ll notice in this code that we have a new template parameter: “mimetype”. This is required so that the object tag knows which file type you’re rendering so it can set up the appropriate preview. This field does not get retrieved automatically with the notes widget and you will need to add an additional field to the query. In the advanced settings of the widget, find “AdditionalFields” and add “mimetype” to the value:
Embedding documents relies on the browser to render the document. This means if you’re using an older browser such as IE10, embedded PDFs may not render. To get around this we want to define a fallback, this fallback will enable when the browser does not support the embedded document type. We can define a fallback using the inner HTML portion of the object tag:
<object width="100%" height="500px" type="#= mimetype #" data="/PortalConnectorMvc/Services/Data/Notes/Download/${controlDataId}/${id}?filename=#= encodeURIComponent(attachmentFileName) #&inline=true">
<a title="attachment" href="/PortalConnectorMvc/Services/Data/Notes/Download/${controlDataId}/${id}?filename=#= encodeURIComponent(attachmentFileName) #"><span class="fa fa-paperclip" aria-hidden="true"></span> ${attachmentFileName}</a>
</object>
This simply adds the old download link as a fallback for the object tag.
After saving your template make sure to select the new template from the list of templates and don’t forget to check off “Allow Downloading Documents” from the designer settings:
Save and publish your form and check out the fancy embedded documents!
From here we can tweak and modify our template more to get the look and feel we want for our embedded template. The possibilities are endless.