Publishing UserCustomActionConfigPage on GitHub

I wrote previously about the Simplest way to add script to your SharePoint and SharePoint Online.

Although this is a simple, stand-alone page, it is something I can see being updated going forward, and with some minor prodding from Marc Anderson, I moved forward my plans to put it out there publically.

It also means I can now just link to that one place, and as I make updates to the page, people won't be going to the old version 1. 

It's here on GitHub.  https://github.com/johnnliu/UserCustomActionsConfigPage 

I still have a few more articles on branding that I wanted to write under this banner and I think Marc is going to link it up with requirejs. 

 

Creating Multiple Custom Email-Alias Addresses with one Outlook account

Update thank you to Johannes in the comments.  This is called Email Sub-Addressing.

I was catching up with my brother, and he showed me a pretty cool trick with gmail.

If you mail mark-liu@gmail.com (not his real email address) with mark-liu+test@gmail.com - the email would arrive at his inbox.

Not to be outdone, I tested this with Outlook, and sure enough.  If you mail: john-liu+test a outlook dot com they'd arrive in my personal mailbox.  You can do anything after the + character.  +spam, +newspaper, +test1 etc etc.

I have no idea what this feature is called - for Gmail it seems to be called "Creating Multiple Custom Email Addresses with one Gmail account".  May be this is called Email-Alias? 

So this is just a short blog about an Outlook version of this feature.  This works for Hotmail as well.

What is this good for?

  • Test throw away emails, e.g. testing your registration process code
  • Spam emails and figuring out where they came from
  • Easy to set up filter rule to get rid of emails you don't want
  • You should definitely have a john-liu+spam alias for signing up to newsletters.

Notes

  • Doesn't work for Exchange or Office 365 email addresses.

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.

 

The easiest way to add Script and Brand your SharePoint and SharePoint Online

This is the first of a few blog posts I wanted to cover in my 2015 Christmas break on the future of branding. 

I'll probably devote the next article to compare the various different ways to brand your SharePoint site - masterpage?  CustomCss?  On-premises or Online?  Would the technique work in SharePoint 2010?  What about display templates or JSLink?

But I want to march forward and cover what I think is the safest way to brand your SharePoint right now:

Inject JavaScript to any Site or Site Collection via a User Custom Action's ScriptLink property.

This is a great technique because it lets you:

  • Add JavaScript anywhere - scoped to Site Collection or Site.
  • Add CSS via JavaScript
  • You can add more than 1 CSS file
  • Order them the way you want via Sequence
  • You can combine this to load your initial JavaScript file which can be a RequireJS setup and then hand off the controls to RequireJS config
  • Does not modify MasterPage
  • Works in SharePoint 2010, 2013, 2016 and SharePoint Online
  • Only need Site Collection permissions to set up - you don't need to have a Farm Solution or Add-In Model.  The permission is only required to set up the ScriptLink.
  • The object model provides a way for an administrator to check all the User Custom Actions attached to any site/site collection, so there's a level of oversight available if you want to check if your customizations are ready for migration.

There are various ways to attach a script via User Custom Actions.

  • Remote Provisioning (Pattern and Practice) uses it via C# CSOM
  • PowerShell remote provisioning
  • Farm Solution can invoke the API
  • Sandbox Solution can invoke the Client Side Object Model API (*with permission)
  • Add-In can invoke the CSOM API as well (with Site Collection - Full Control permission)

The unfortunate part is, there's no UI for a power user to add or view ScriptLinks directly.  You need to spin up SharePoint Manager or read it via PowerShell.

And that brings me to today's post. 

I build a simple config page in JavaScript. 

Then I did a load of work to make sure everything runs from One Page.

How does it work?

  1. Drop it into a SiteAssets or SitePages library.
  2. he JavaScript on the page detects and loads some dependencies (jQuery, SP.js etc). 
  3. Provided you have site collection permissions, it'll list all existing User Custom Actions
  4. You can specify a filename (including any subfolders like spg/hello.js) and give it a sequence number (default to 1000).  Then you can install a Custom Action to Site Collection or Current Web.  All via the magic of JavaScript.

I also brand it to look a bit like SharePoint.  Just a bit.

This is still a developer blog.  So we're going to talk about code:

function listUserCustomAction(siteOrWeb) {
    siteOrWeb = (siteOrWeb=="site"? "site":"web");
    // ajax call to userCustomActions and order by Sequence
    // this function can do either _api/site or _api/web
    var p1 = $.ajax({
        url: hostweburl + "/_api/"+siteOrWeb+"/userCustomActions?$orderby=Sequence",
        dataType: "json",
        contentType: 'application/json',
        headers: { "Accept": "application/json; odata=verbose" },
        method: "GET",
        cache: false
    });
    
    p1.then(function (response) {
        // use jQuery to do a bit of simple UI update
        $("ul#"+siteOrWeb+"-user-custom-actions").empty();
        $.each(response.d.results, function (i, result) {
            $("ul#"+siteOrWeb+"-user-custom-actions").append(
                "<li>" +
                    " [" + result.Location + "] " +
                    (result.Title || result.Name || "") +
                    " ScriptSrc=" + result.ScriptSrc +
                    " Sequence=" + result.Sequence +
                "</li>");
        });
    });
    return p1;
}

First function.  listUserCustomAction will show existing Custom Actions attached to either the site collection or the current web.  Interestingly - this will also list custom actions attached by other solutions you may have installed in your farm.

 

spg.installUserCustomAction = function(siteOrWeb) {
    // switch to JSOM to install userCustomActions
    var webContext = SP.ClientContext.get_current();
    var userCustomActions;
    if (siteOrWeb == "site") {
        userCustomActions = webContext.get_site().get_userCustomActions();
    }
    else {
        userCustomActions = webContext.get_web().get_userCustomActions();
    }
    webContext.load(userCustomActions);

    // read srcurl and sequence from textboxes
    srcurl = $("#scriptlink-name").val();
    srcsequence = parseInt($("#scriptlink-sequence").val()) || 1000;

    var action = userCustomActions.add();
    action.set_location("ScriptLink");
    action.set_title(srcurl);
    // my tool always attach script from ~sitecollection/SiteAssets/ 
    // you can use subfolders
    // but if you want to use Style Library or some other
    // folder you'll have to change this.
    action.set_scriptSrc("~sitecollection/SiteAssets/" + srcurl);
    action.set_sequence(srcsequence);
    action.update();

    webContext.load(action);
    // my SP.ClientContext has a special promise enabled callback
    // lets me pipe one promise to the next
    return webContext.executeQueryPromise().pipe(function () {
        return spg.listUserCustomActions();
    });
};

Reminder: http://johnliu.net/blog/2015/12/convert-sharepoint-jsoms-executequeryasync-to-promise-in-the-prototype I wrote previously how to change SharePoint JSOM's ExecuteQueryAsync to just return a Promise.  This is important, because you can do stupidly fun things like chaining one asynchronous callback to another one and don't even need to pull out your hair.

 

spg.uninstallUserCustomAction = function(siteOrWeb) {
    var webContext = SP.ClientContext.get_current();
    var userCustomActions = webContext.get_site().get_userCustomActions();

    if (siteOrWeb == "site") {
        userCustomActions = webContext.get_site().get_userCustomActions();
    }
    else {
        userCustomActions = webContext.get_web().get_userCustomActions();
    }
    webContext.load(userCustomActions);

    srcurl = $("#scriptlink-name").val();
                
    var p1 = webContext.executeQueryPromise();
    var p2 = p1.pipe(function () {
        var i = 0, count = userCustomActions.get_count(), action = null;
        for (i = count - 1; i >= 0; i--) {
            action = userCustomActions.get_item(i);
            // look for any script that has the same url as yours
            // and delete only those
            if (action.get_scriptSrc() == "~sitecollection/SiteAssets/" + srcurl) {
                action.deleteObject();
            }
        }
        // more chaining promise fun
        return webContext.executeQueryPromise().pipe(function () {
            return spg.listUserCustomActions();
        });
    });
     return p2;
};

So here we are.  A page that you can use to install and uninstall ScriptLinks from SharePoint Online and SharePoint 2013/2016.

* SharePoint 2010 needs a few tweaks with the _layout/15 path.  Also, the SP.UI.ChromeControl doesn't work so the page will have to look simpler.

What does the result look like?

Here's what it looks like in a browser Network tab

They are not found because they aren't really there!  But you can see it's looking for the files in ~sitecollection/siteassets/hello.js

And the Sequence is important.  I have hello1.js at 999 and hello.js at 1000, here's what they look like in the <head> tag of the SharePoint page.

SharePoint inserted them into the page at runtime, and I never touched the MasterPage.  And that's a big win.

Download