The HTML panel is a powerful way to bring content from other websites and applications, such as Microsoft SharePoint and Google Drive, directly into your stories as an iframe and have it available within the context of your story.

Not only are the people you share your story with able to access the latest up-to-date versions of important, relevant documents, but depending on their permissions to the document, they can edit the content too.


Another valuable function of the HTML Panel is the ability to embed a view from either the current SharpCloud story or another story to which you have access as an iframe.


In order to embed content from an external website, 2 conditions must be met:

  1.  The host website must permit the content to be embedded in an iframe
  2. Websites that require special privileges, relating to cookies, the ability to run JavaScript etc, must have been specifically added to a whitelist by SharpCloud

 Access to the content inside the HTML Panel

In order to access documents that have been embedded in a panel, a user must: 

  1. Have an account that can access the content 
    For example, if you have embedded a Microsoft O365 SharePoint document, the user will need to sign in to their Microsoft O365 account in order to access it in the HTML panel. This also applies to a Google Account when a document from Google (Doc, Sheet, Presentation) has been embedded. If the user is not signed in to that specific account, the panel will provide a hyperlink for them to sign in.
  2. Have permission to access the document
    This will depend on whether the embed code / link that has been used to reference the document is a restricted link (meaning that only users with appropriate permissions on the source website (SharePoint, Google etc) can access it) or an open / guest link that allows anyone to access the document 

Your organisation may have put restrictions on who can get access to the embed code for your website documents (eg. SharePoint or Google). For example, your organisation may not have granted you the rights to be able to create an open link for a document hosted on your SharePoint site. If you are in doubt, please check with the website administrator within your organisation.


What can the user do with the document?

SharpCloud does not put any conditions or restrictions on what users are able to do with an embedded document. Each user’s ability to view or edit the document is determined by the hosting site, which in turn is encapsulated in the specific embed code entered into the HTML panel.


For example, Microsoft SharePoint offers options for creating links that allow edit or view, whilst Google docs can have options for view, edit or comment.


Creating an HTML Panel


To create a new HTML Panel, click on the Edit Item Properties (Pencil Icon on the right toolbar) and select the Item you wish to add the HTML Panel to. Navigate to the Panels tab and click the Add new HTML panel button (both shown below).




The HTML panel will be generated with instructions on how to embed certain document types, as shown below:



Follow the instructions for your specific site to produce a HTML embed code. When you paste the embed code into the box, and click "OK", if all the requirements are met for the HTML Panel, the document will be embedded.


Embedding a SharpCloud Story into a HTML Panel

You can alternately follow the instructions above but instead paste a link to a SharpCloud view into the Embed URL field, as shown below. 



You will see 3 selection boxes appear, which asks in the embedded view which toolbar(s) you wish to have displayed if any. If you press OK, that specified view will now be embedded into the HTML Panel as shown below.



SharpCloud for Enterprise 

In SharpCloud for Enterprise, Templates are used to connect a collection of stories together through a process of inheritance and item sharing. Views can also be created at the template level, which are then inherited down to individual working stories. 


Each view in a SharpCloud story has a unique URL that includes a string of characters pointing to the story the view is in (the storyid) as well as a unique string that points to that specific view. In the example URL below, the storyid string is in bold and the view id string is underlined.


If a view is created in an Enterprise template and inherited down to other stories, the view id in that particular view’s URL will be the same for each story it appears in, though the story id will be different. See the two examples below – the bold storyid is different for each but the underlined view id is the same. 

Template Story View:


Working Story View (inheriting from template):


So, as a SharpCloud for Enterprise solution automatically knows which story each specific item originates from (its source storyid) you can replace the storyid in a view’s URL with a generic placeholder – [storyid]. In our example, we would add the URL below to a global HTML panel, and it would be  evaluated dynamically when each item in the story is opened to show the view as it appears in that item’s source story.[storyid]/view/2e79bef6-b1ca-4aca-817f-03d3d85439ef



This means that if there is a view driven by a template, giving it the same view ID, you could create a HTML panel on a set of items that would show an embedded view specific to each items’ source story.