Use Excel Web Access Web Part to dynamically show a workbook

This post is a contribution from Mustaq Patel, an engineer with the SharePoint Developer Support team

Requirement: In SharePoint online page, how to show excel workbook dynamically using JSLink without O365 Global Suite Navigation bar.

In SharePoint online we can use script or content editor webpart to show the excel workbook in an iframe. The script webpart can also contain jquery code to set the iframe’s src to the excel workbook dynamically using some business logic. Due to cross domain calls, we cannot write jquery or css to hide the global suite bar that Excel office web app loads in the iframe. So how to show excel workbook without global suite bar and still have workbook url set dynamically. This blog post will address this requirement.
We will use Excel Web Access Webpart and list view webpart. We will connect this 2 webparts, so the Excel Web Access Webpart receives the workbook url from list view webpart. We will also be using JSLink to filter items in the listview webpart, there by only files that meet particular criteria shows up in the list view webpart.
Below are the steps to demonstrate the solution:

Create a document library. Create a View Called “MyExcelFileView” and make sure to include “Created By” Field. You can include any other fields in this view. Upload few excel files under different user so “Created By “ field have different user.

Create a webpart page or use any existing wiki page. Edit the Page. Add 2 webparts in same order as below

1. List View Webpart showing all the files from document library where all workbook are present.
   1. Upload the javascript file from below to SiteAssets library. I have uploaded at below url SiteUrl/SiteAssets/POC_ListItemFiltering.js. I have also uploaded jquery at same location SiteUrl/SiteAssets/ jquery-1.9.1.js, you may refer the jquery from CDN as well and in that case, you don’t need to upload the jquery file.
      
   2. Edit this listview webpart and under Miscellaneous, set the JS Link property as below. If you are referring jquery from cdn, you can change below
      ~site/SiteAssets/jquery-1.9.1.js | ~site/SiteAssets/POC_ListItemFiltering.js
   3. Set Appearance, layouts etc as per your needs, you can also set what view to show, to not take lot of space on the page. Select View “MyExcelFileView”. You may select any out of box view as well. Just make sure the field “Created By” is also part of the view.
      
   4. Once jslink works, it will filter and show workbooks for current logged in user.
      
2. The Page still in edit mode, add Excel Web Access webpart from Business Data. Edit its properties and make connection as below
   1. click Connections -> Get Workbook Url from -> above list view webpart -> A connection setting popup will load. Select Field Name “Document URL” finish and save the excel webpart.
   2. I have also uncheck both checkboxes in “Title Bar” and Type of ToolBar: “No ToolBar”.
   3. Save the webpart. Save the page and publish, approve if required.

The page should look as below, and you can see the first excel is already being loaded in the excel webpart. If you click that small icon in listview webpart to select another workbook, it will show in the excel webpart.

Here is the javascript we used in the jslink.

 Type.registerNamespace('SSPXTesting')
SSPXTesting.Disp = SSPXTesting.Disp || {};
SSPXTesting.Disp.Templates = SSPXTesting.Disp.Templates || {};
SSPXTesting.Disp.Functions = SSPXTesting.Disp.Functions || {};
var currentUser = null;    

function getCurrentUser(siteurl)
{     
    $.ajax({
        async: false,
        headers: { "accept": "application/json; odata=verbose" },
        method: "GET",
        url: siteurl + "/_api/web/CurrentUser",
        success: function (data) { 
            currentUser = data.d;
        },
       error: function (error) {
           console.log('some error');
            //alert("error:" +error);
     }
    });    
}

renderListItemTemplate = function (renderCtx) {        
        var workbookname = "";            
        //File_x0020_Type  "xlsm" or "xlsx"
     var filetype = renderCtx.CurrentItem["File_x0020_Type"];
      var fileAuthor = renderCtx.CurrentItem.Author;  
        if(filetype == "xlsm" || filetype == "xlsx") 
        {
          if(!currentUser)
            {
               getCurrentUser(renderCtx.HttpRoot)
          }           
            if(fileAuthor[0].email == currentUser.Email)
            {
               return RenderItemTemplate(renderCtx);
           }
           else
            {
               //return empty string
               return '';
            }
        }
      else
        {
           // return emtpy string
          return '';  
      }        
}  

SSPXTesting.Disp.Templates.Item = renderListItemTemplate

SSPXTesting.Disp.Functions.RegisterField = function () {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(SSPXTesting.Disp)
}

SSPXTesting.Disp.Functions.MdsRegisterField = function () {
    var thisUrl = _spPageContextInfo.siteServerRelativeUrl + "/SiteAssets/POC_ListItemFiltering.js";
    SSPXTesting.Disp.Functions.RegisterField();
    RegisterModuleInit(thisUrl, SSPXTesting.Disp.Functions.RegisterField)
};


if (typeof _spPageContextInfo != "undefined" && _spPageContextInfo != null) {
    SSPXTesting.Disp.Functions.MdsRegisterField();
}
else {
    SSPXTesting.Disp.Functions.RegisterField();
}