SP2013/2016 Responsive-UI and UserCustomActionsConfigPage

/

I just pushed an update to my Simplest-Safest-Most-Future-Proof-Way to customize your SharePoint and SharePoint Online using UserCustomActionsConfigPage (UCACP) github repo.  This is an important update because of a BIG thing that has just happened over at PnP side.

The PnP team has just released a SP2013/2016 Responsive UI pack. 

I jumped in a had a read, it uses the ScripLink way to attach a single javascript file, the file then looks for script id="PnPResponsiveUI"  element on the page, and attaches a CSS file.

My single page UserCustomActionsConfigPage does very similar things, except I use the ScriptSrc element in a UserCustomAction and that doesn't set the Script ID.

So this update to UserCustomActionConfigPage adds an additional textbox.  You can leave it blank.  But if you specify an ID, it will use ScriptBlock instead to insert the UserCustomAction.

New ID field

Installing 2013/2016 Responsive-UI pack with UCACP:

Copy three files into your Site Assets.   NOTE some browsers will save github files as HTML (because Github doesn't want to serve the files so it tells browsers these are HTML) - please double check the files are saved correctly as raw CSS or JS.

 

 

ID: PnPResponsiveUI
Url: SiteAssets/PnP-Responsive-UI.js

Usually, you can leave the ID blank.  But PnP-Responsive-UI.js needs it to be PnPResponsiveUI

Install to Current Web.  The Site User Custom Actions list should reflect there is now a SiteAssets/PnP-Responsive-UI.js inserted.  There is no ScriptSrc, because it is inserted via ScriptBlock.

The ScriptBlock is inserted using a Script tag attached to the head element.  This is identical to how PnP is doing it via PowerShell. 

One note - also, switch off your Mobile View feature.


What does it look like?

The Debugger shows both CSS and JS are injected correctly.  Note, I'm injecting from my own SiteAssets library.  PnP creates a folder under Style Library.

See the Responsive-UI in action with the Hamburger menus.

PnP PowerShell Installation

I want to reference drisgill's post on this Responsive-UI http://blog.drisgill.com/2016/03/a-look-at-the-pnp-responsive-ui-package-for-sharepoint-on-premises.html

He talks about the first impressions of the Responsive-UI, as well as a detailed section on how to install the Responsive-UI via PowerShell (as prescribed by PnP tools).

Installation with PowerShell is fine and dandy, but it assumes you are some sort of master magician.  Multiple downloads, and a dependency on 2015-CU.  (Which BTW you should have installed already).

I consider the PowerShell install perhaps a bit daunting and a barrier for people to try this customization on their site.

The UCACP way is 3 files.

Customization with the User Custom Actions is magical.  But we can leave out the PowerShell here this time :-)

Uninstall Responsive-UI Pack

And the Document Library view is back to normal.

Update 2018-05

Fixed some github broken links

Related Posts

ngSydney, Office Add-ins and lots of AngularJS

/

I went to my first ngSydney meetup on Wednesday night, and presented a short session on Office-Addin with AngularJS (I also throw in Graph API) and ran over my allocated time to 40 minutes.

I probably should have asked for 1hr.

Presentation

Here is the PowerPoint presentation.  Presentation: office-addin yo ngSydney

Also, check out all the examples on http://dev.office.com/

Updates

Graph API has Excel endpoints "coming soon".  These REST endpoints will let your app reach inside a workbook/worksheet/range/cell and pull/push stuff in and out like JSON goodness.

https://graph.microsoft.io/en-us/docs/api-reference/beta/resources/excel

Unfortunately, no Word REST API yet.

Clarifications

As I rushed through the demo some things perhaps wasn't as clear as I could explain.

1. There were two libraries/APIs - the Microsoft Graph REST API lets you talk to services across Office and eventually Microsoft space.  You need to register an Azure App so Graph knows what permissions you are after.  Your users need to authenticate and grant permission to your app to use the services that it is asking for.

2. The Office.js within a Office Add-In lets you talk to the current document, or mail within the Office App.  You need to register/deploy the manifest.xml file with your Office 365, or through network share or group policy for Desktop Apps.  The manifest describes what sort of permissions you are seeking on the current document, usually there is only Read or ReadWrite.

You can use Office.js and Graph API together as it was in my demo, or separately.

3. The 'app' I was running in the iframe for both Office 365 or Word 2013 is running out of https://localhost/ - I didn't stop to show this.

4. Authentication piece of the puzzle moves forward as well - next on the line is Progressive Permissions where an app can request more permissions on the spot and the user will be asked to allow additional permissions (write) on the go.

5. Office Addin is available in: Office 2013/2016, Office for Mac, Office for iOS.  Not yet available on Office for Android.  It also runs in Office Online (SharePoint Online, OneDrive, Docs.com) and within both Exchange Online (business) and Outlook.com (consumer).

Had a few awesome quotes:



Update on SharePoint and Office Development - 2016 Feb edition

/

We rotate through different topics and presenters in the Sydney SharePoint user group.  But I finally got my turn to present a developer topic, and I wanted to do a quick primer on all things Office Developer related.

This turned out to be a REALLY complex talk.  I wanted to cover ALL the cool new stuff in Office Dev.  But as it turns out every month (and now, every week) new things come out. 

I ended up with:

  • Brief Introduction to dev.office.com
  • Brief Introduction to PnP
  • Where we have been with SharePoint Add-Ins
  • Where we are going with Office Addins: 
  • NEW API: Microsoft Graph API
  • NEW AUTH: OAuth 2.0 and ADAL(js)
  • NEW TOOLS: New tools with Node, NPM, and Yeoman Generator (YO OFFICE)
  • Build a demo Office Addin that talks to both SharePoint Online and Microsoft Graph
  • Run on web and desktop

The presentation clocked in at 1 hour and 20mins - I started a bit earlier.  And kind of flopped off at the end as I run out of steam after the demo :-O

Then we gave out all the swag from dev.office.com so all is happy faces.

The PowerPoint presentation is here:

2015 February Presentation - Update on SharePoint and Office Development

 

Demo Fail

So at the end, the Office Add-In didn't load from the App Catalog on my desktop.  I went home and got it to work, here are screenshots to proof it.

Oh NO - no apps

Add SharePoint App catalog to trust center

 

Here it is.  The same addin working on desktop - talking to Microsoft Graph and showing Group Conversations

 

Thank you MS for MVP 2016

/

As I still see myself a newcomer in the SharePoint community compared to our many elders, I still hold my breath every year come Jan 02 when my MVP gets renewed.  I'm told "if they weren't going to renew you they'll break it to you early" I hope so.  I'm still holding my breath anyways.

I received my Microsoft MVP award for the 3rd year on the morning of the 2nd.  I wanted to say a big thank you to the community and Microsoft.  Cheers for Team Office and Friends!

2016 is the year where Microsoft tweaks the MVP award system - for IT Pros and Developer MVPs, it is no longer based directly on specific product, but on the product group.  Instead of SharePoint, I am now Office Servers and Services.  I think this is a good thing, in that I was already contributing in different areas - I love Sway, and love love Power BI, at the same time I want to see SharePoint's Sites even more embedded within Office Add-Ins.  Where will SharePoint go in 2016?  Will it end up on HoloLens?  Wow who knows.

But know this, SharePoint is not going away not by a long shot.  This is the year where I think we will see that MS is serious about SharePoint, and not just a service, but also a platform.  Trust me, I'm a dev...  A hopeful dev.

And as Microsoft moves forward with single purpose: unifying Azure, Windows, Office and Bing engine, as well as advancing the devices with IOT, Xbox, Surface and Band, I have this uncanny grin as I imagine what we could build, not in 5 years' time, but this year, in 2016!

Loving the ecosystem, loving the possibilities and loving the community.

/omg2016gonnabeawesome

Set Window Title in Nintex Forms for O365

/

Disclaimer.  This post is about an unsupported hack.

Over at Nintex Community (registration required), there was a question about how to change the Nintex Form for Office 365 window title.  So a user can differentiate the different forms.  Here's a picture that shows the problem.

My buddy Dan Stoll poked me all the way from America in some ungodly hour.  But in my delirious state, I still remember I wanted to write about window.postMessage this year and the problem seems related.

So I went and did some

Investigative Digging

My Office 365 Form is hosted on

https://johnliu365-724b9f945a8c4d.sharepoint.com/FormsApp/NFLaunch.aspx?...

The form part itself is hosted on

https://formso365.nintex.com/Pages/FormsPart.aspx?...

Because the domains are different - JavaScript within the form can not affect the parent window.  So, as noted in the community thread:

window.parent.document.title = "test"; //wouldn't work

To go beyond IFrames, we need to look for PostMessage - this method allows javascript from any frame to send messages to another frame.  The drawback?  The parent page has to be listening to it - otherwise it'll just be discarded.

So I find the FormsPart (child) page, has this function

PostMessageToParent("openWindow", urlToOpen);

That posts json messages to the window.parent frame.  In the form:

{
  action: “openWindow”,
  data: “urlToOpen”
}

And NFLaunch.aspx (parent) page has these functions:

// first receive here
var onmessage = function (e)...

// then here
var SPAppIFramePostMsgHandler = function(e) ...

The function seems to only handle resize.  But I have an idea how to go on.

Hack

Remember, you can only hack what you have control over.  In this case, you have your own Tenant. 

1. Pop open NFLaunch.aspx
Tip:  go to https://johnliu365-724b9f945a8c4d.sharepoint.com/FormsApp/_catalogs/masterpage/
Then you can open in explorer via WebDAV
Then in explorer, navigate back up to root


2. Insert this helper function to 'listen' to a particular setTitle message.

//take a peek at the data send up, handle "setTitle"
//is totally unsupported by nintex
//read about this hack at http://johnliu.net/blog/2015/12/set-window-title-in-nintex-forms-for-o365 
var peekData = JSON.parse(e.data);
if (peekData && peekData.action == "setTitle") {
    document.title = peekData.data;
}
//end peeking

3. Save NFLaunch.aspx

Now back in the Nintex Form Designer

4. Send messages from the child to the parent

Result

Check out the Window Title!

Summary

  • Nintex Forms already do a bit of messaging between Frames
  • We piggyback it to send our own message
  • Needs a small unsupported hack in the parent form
  • If child form sends message that nobody understands at the parent level, nothing would happen.  So the hack should be quite safe.

Happy New Years

On the last day of 2015, I hope the year has been good to you.  Here's to an amazing 2016 and I'm sure there will be much joy from Microsoft, SharePoint and partners like Nintex and us at SharePoint Gurus.