Preview a SharePoint document into K2 Smartforms

You need to have the one of the following:

• Office365 – SharePoint Online [Easier way]
• SharePoint on-premise + another server hosting the Office Web Apps

This is so we can take advantage of the WOPI frame.
The example in the image shows a SmartForm with an iframed Word Online, and a “reload” button on top. Clicking the lower right icon will expand the document where users can do collaborative editing.

Adding the iframe

Add a DataLabel

Set the data label with to 100%

Set the data label as a Literal

Set the data label’s expression:

Concatenate ( <iframe id="wopiframe" src='https://demok2.sharepoint.com/_layouts/15/WopiFrame.aspx?sourcedoc=, Url Encode ( Link to Item Data Label ) , &action=embedview' frameborder='0' width='100%' height='1580px'></iframe> )

Where:
– demok2.sharepoint.com – replace this with your SharePoint URL and its subsite if any. (e.g. portal.sharepoint.com/sales/)
– [Link to Item Data Label] contains the “Link to Item” property of the SharePoint library SmartObject.

For the “Reload” button found on top of the IFrame, I just added another code snippet:

<button onclick="loadWOPI()">Reload</button>
<script>
function loadWOPI() {
 var iframe = document.getElementById('wopiframe');
 iframe.src = iframe.src;
}
</script>

[In case you don’t know: How to insert html/js/css into a smartform]