Delaying the Display of SharePoint’s ECB Menu

A viewer of my Pluralsight course Developing SharePoint 2013 Solutions with JavaScript, part 3 posed a question about working with the ECB (Edit Control Block) available in SharePoint and Office 365.  In their situation, they needed to delay the showing of the ECB menu while they called back to the server to do some checking and they weren’t sure how to do it.

Before getting to the code sample, a quick word of caution – realize that this could present potential performance problems depending on how quickly the call makes it’s roundtrip to the server and back.  In any case, this would be a situation in which you would want to trim the response down to the bare minimum necessary – don’t pull down extra fields that you don’t need or else your users are likely to notice the impact and not be too thrilled with it.

With that said, here is a quick code sample that that will delay the presentation of the ECB for 5 seconds.  Normally, you would not simply add the delay, but instead replace it with whatever calls you need to make.  All this code is doing is:

  1. storing the current function that displays the ECB in a new variable
  2. overwriting the function that display the ECB with our own function to store some information we need later
  3. calling the code to do whatever you need it to do (make a call back to the server, etc) , in the example, simply delaying for 5 seconds
  4. Using the stored function from #1 to call the ECB display and pass in the information stored in #3
//store the function before overwriting it
ecbFunc = ShowECBMenuForTr;
ShowECBMenuForTr = function(t,e){
    ecbTarget = t;
    ecbEvent = e;
    //now do whatever you need.  In this case, I'm just delaying 5 seconds
    setTimeout(function(){
        // call the function we stored above and pass in variables
        ecbFunc(ecbTarget, ecbEvent);
    }, 5000);
};

And that’s it.  When a user clicks on the ellipsis to show the ECB on any page where this code is loaded will now run our custom ShowECBMenuForTr function (because monkey patching, which I cover in the Pluralsight courses).

A few final points:

  1. I’m using global variables here, which isn’t recommended for production code.  I discuss namespacing in the Pluralsight courses to avoid this
  2. The out-of-the-box function ShowECBMenuForTr is what shows the ECB and it *is* in the global namespace, so you don’t want to hide that inside your own custom namespace.
  3. This code should go into your own code file, *not* one of the out-of-the-box JavaScript files provided by SharePoint

Dave

Office UI Fabric Snippets 1.0 Release

Office Fabric UI Snippets for VS Code

Release Date: March 25, 2016

Status: 1.0

Provided By: Sector 43 Software (David Mann)

Project: https://github.com/Sector43/FabricSnippets

Based on: Fabric release 2.01 (Feb 5, 2016)


These snippets are intended to make the Office UI Fabric easier to use. In general, the HTML is taken directly from the Office UI Fabric GitHub repository, with some tweaking.

Snippets generally fall into one of two flavors:

  • Simple Components: these have no JavaScript elements and so the snippet just expands into the correct HTML to render the component

  • Complex Components: these aren’t really “complex” they simply have some JavaScript associated with them. In these cases, there is a snippet for the component and one for an example of the JavaScript required to make the component work.

All of the core snippets have a trigger that starts with uif- so you can see what’s available by simply typing uif- and looking at the Intellisense popup shown by VS Code. These snippets were originally developed for my Pluralsight course so there are a handful of snippets that I built for the demos in that course. I’ve left them in just in case they provide value, or if you’re following along with the course. Here’s the info on them:

  • htmlShell – Creates the shell of an HTML page with the proper doctype for Fabric
  • jsAddPeoplePickerResult – sample code for adding a result into the Peoplepicker
  • gridRefRow – adds a single grid row with each cell set to 1 column wide. Useful for building a grid below and having a reference to see how many columns each cell takes up
  • gridDemoStyle – some style overrides used to differentiate the sample grid in the course
  • gridDemoRows – inserts the sample markup for a three column grid used as a demo in the course
  • callOutPositioning – sample styles for positioning a callOut
  • callOutPositioningJS – sample code for showing the callout in the demo
  • spinnerDemo – sample markup for working with the Spinner component
  • commandBarDemo – sample code for adding a ContextualMenu to a CommandBar
  • progressDemo – sample code and markup for the Progress Indicator demo

Installation Instructions

For the time being, installation is manual. Once I’ve ironed out any bugs, I’ll make a true VS Code extension and deploy it to the Extension Gallery. At that point, I’ll also create a Visual Studio Extension and deploy that to the Visual Studio Gallery as well. If there is interest, I’ll convert the snippets to other editors – Sublime is one I’m considering, but am open to other suggestions as well.

To Install:

  • Open the file VSCodeFabricSnippets.txt from the GitHub repo (direct link:https://raw.githubusercontent.com/Sector43/FabricSnippets/master/VSCodeFabricSnippets.txt
  • Select all of the contents and copy it to the clipboard
  • In VS Code, click File | Preferences | User Snippets and select HTML from the Language dropdown
  • Paste the contents from the GitHub file into the html.json file that is now open in VS Code
  • Save the html.json file and close it

The snippets are now available when you are editing an HTML file in VS Code. (NOTE: Snippets in VS Code only seem to work if the HTML file is open as part of a folder, not if you just open a standalone file. I’m looking into whether this is really true, and if so whether it is by design or a bug)

Installation and usage is shown in the short video here: https://youtu.be/VsfUTwgNdgg

Known Issues

  • None

Next Steps

  • Updating for latest Fabric release (currently 2.2.0)
  • Creating Visual Studio snippets

Please report other issues here: https://github.com/Sector43/FabricSnippets/issues

Developing with Office UI Fabric Course is Live

The second and final course in my series on the Office UI Fabric is now live: http://s43.io/FabricCourse2.  Following on from the introduction in the first course, this course dives in to hands-on working with Fabric as a developer.  It is very light on slides and heavy on demos.

Here’s a look at the Table of Contents:

  1. Getting Started with Office UI Fabric (including an introduction to the Fabric Snippets)
  2. Handling Multiple Resolutions with the Responsive Grid
  3. Building Forms
  4. Improving User Interactions with Display Components
  5. Enhancing Layout and Navigation
  6. Building Fabric and Contributing to the Project
  7. Using Fabric in Angular
  8. Resources and Fabric Futures

Obviously, I’m a little biased, but I think the course covers everything you need to know as a developer to use Fabric in your own applications, sites and add-ins.  I cover every component in Fabric, showing the HTML and JavaScript necessary to make it work as well as a deep dive on all aspects of the responsive grid and then cover the Fabric project itself on GitHub and the community project ngOfficeUIFabric for using Fabric in Angular.

Enjoy!

Office UI Fabric Resources

As part of my second Pluralsight course on Office UI Fabric, I collected all of the resources I could find on Office Fabric.  I’ll try to remember to keep this list current as Fabric grows and evolves.  If you are aware of a resource I missed, feel free to leave it in the Comments.


Official Microsoft

http://dev.office.com/fabric
https://github.com/OfficeDev/Office-UI-Fabric
http://dev.office.com/fabric/resources-and-faq
https://blogs.office.com/2015/08/31/introducing-office-ui-fabric-your-key-to-designing-add-ins-for-office/
https://channel9.msdn.com/Shows/Office-Dev-Show/Office-Dev-Show-Episode-12-Office-UI-Fabric
Use Office UI Fabric in Office Add-ins
Office UI Fabric on MSDN
SharePoint Add-ins UX design guidelines

Community Projects

Fabric Snippets
Fabric Explorer
ngOfficeUIFabric and on Andrew’s blog
React Fabric
Aurelia Fabric
 

Assorted Blog Posts

Using Office UI Fabric in SharePoint Add-ins

Using the Office UI Fabric with Angular JS to Create an Office Add-In

Create your first Excel add-in using Office UI Fabric

How to use the Office UI Fabric directives ngOfficeUIFabric in a Windows 10 Universal App

 
 
 

Pluralsight course: Introducing Office UI Fabric

My Pluralsight course Introducing the Office UI Fabric went live yesterday.  It’s a quick hit (clocking in at just over an hour) intro to all of the goodness Fabric has to offer.  Here’s the Table of Contents:

  1. Introducing Office UI Fabric
  2. UI Elements
  3. Components
  4. Fabric Futures

If you’re new to Fabric, this is the place to start as it gives a great overview of the what and why of Fabric.

My next course (on track to be out in March or early April) – Developing with the Office UI Fabric – goes further into the how of Fabric, covering details on the components, working with Fabric in Angular, Building and Contributing to the project and much more.  Most of the Developing course is demos, just a handful of slides.

Fabric Explorer Updated

To coincide with the publication of my new Pluralsight course on Office UI Fabric, I’ve updated the Fabric Explorer Chrome extension I published a while back to version 1.3.  This is a minor update, but it fixes a few bugs:

  1. Added support for pages loaded into the browser via a file:// URL
  2. Fixed bugs that prevented the “Reset” button from correctly returning an element back to it’s original state when the page was loaded

In addition, I added the remainder of the Fabric Responsive Grid classes (hidden, offset, push, pull), did some minor code cleanup and published the source code to GitHub.

The update was published on the Chrome Web Store this morning and should be automatically updated if you already have it installed.  If you haven’t installed it already, now is the perfect time to do so!  You’ll get the latest and greatest bits right away.

Please log any bugs here: https://github.com/Sector43/FabricExplorer/issues

The extension is available here: https://chrome.google.com/webstore/detail/fabric-explorer/iealmcjmkenoicmjpcebflbpcendnjnm 

Office Fabric UI Snippets for VS Code

Update for 1.0 Release.  See here: http://blog.mannsoftware.com/?p=2371

Release Date: Feb 26, 2016

Status: Beta

Provided By: Sector 43 Software (David Mann)

Details: s43.io/FabricSnippets

Repo: https://github.com/Sector43/FabricSnippets

Based on: Fabric release 2.01 (Feb 5, 2016)


These snippets are a first go at making the Office UI Fabric easier to use. In general, the HTML is taken directly from the Office UI Fabric GitHub repository, with some tweaking.

Snippets generally fall into one of two flavors:

  • Simple Components: these have no JavaScript elements and so the snippet just expands into the correct HTML to render the component

  • Complex Components: these aren’t really “complex” they simply have some JavaScript associated with them. In these cases, there is a snippet for the component and one for an example of the JavaScript required to make the component work.

All of the snippets have a trigger that starts with uif- so you can see what’s available by simply typing uif- and looking at the Intellisense popup shown by VS Code.

Installation Instructions

For the time being, installation is manual. Once I’ve ironed out any bugs, I’ll make a true VS Code extension and deploy it to the Extension Gallery. At that point, I’ll also create a Visual Studio Extension and deploy that to the Visual Studio Gallery as well. If there is interest, I’ll convert the snippets to other editors – Sublime is one I’m considering, but am open to other suggestions as well.

To Install:

  • Open the file VSCodeFabricSnippets.txt from the GitHub repo (direct link: https://raw.githubusercontent.com/Sector43/FabricSnippets/master/VSCodeFabricSnippets.txt)
  • Select all of the contents and copy it to the clipboard
  • In VS Code, click File | Preferences | User Snippets and select HTML from the Language dropdown
  • Paste the contents from the GitHub file into the html.json file that is now open in VS Code
  • Save the html.json file and close it

The snippets are now available when you are editing an HTML file in VS Code. (NOTE: Snippets in VS Code only seem to work if the HTML file is open as part of a folder, not if you just open a standalone file. I’m looking into whether this is really true, and if so whether it is by design or a bug)

Installation and usage is shown in the short video here: https://youtu.be/VsfUTwgNdgg

Known Issues

The following components are not currently supported by the snippets:

  • Facepile
  • People Picker
  • Persona
  • Persona Card

They’ll be coming in the next release.

Please report other issues here: https://github.com/Sector43/FabricSnippets/issues

Announcing Fabric Explorer

Update March 3, 2016: http://blog.mannsoftware.com/?p=2171


 

Microsoft released the Office UI Fabric in August of 2015.  It is essentially “Bootstrap for Office, Office 365 and SharePoint” plus more.  It allows you to quickly and easily build a user interface for your add-in or app that looks and feels like Office, SharePoint, or Office 365.

Fabric Explorer is a Chrome Extension I wrote which allows you to explore the UI Elements of Fabric  within a live web page right inside Chrome.  The extension is featured heavily in my upcoming Pluralsight course Introducing Office UI Fabric (coming out in the next week or so) and will also be used in part two – Developing with the Office UI Fabric (due out in March).

Here is a screenshot of Fabric:

2016-02-11_9-22-43

You can see a demo of it in action here: https://youtu.be/e8v-Zw1iRZs.  The extension itself is available in the Chrome Web Store: https://chrome.google.com/webstore/detail/fabric-explorer/iealmcjmkenoicmjpcebflbpcendnjnm .

I’ll probably update it with some additional functionality in the next few weeks, so feel free to provide suggestions in the Comments.  See updates at top of post.

SPRESTSearchParser

As part of my Pluralsight course on programming SharePoint 2013 with JavaScript, I tossed together a quick little utility to make search programming a little easier.  It’s all detailed in the course, but the source code is available on GitHub: https://github.com/Sector43/SPRestSearchParser

Basically, it works like this:

  1. Make your REST call to get search results from SharePoint
  2. Create an instance of the S43.SearchResultParser object:
    SNAGHTML19611eb
  3. Take the parameter returned from SharePoint (In the image its oneSample ) and pass it to the parseResults method in the SPRESTSearchParser object, as shown in the second line in the above image 
  4. The return value from that method call is a JSON object which contains an array of SearchResult objects.  Each SearchResult object is simply a representation of a single result from SharePoint that is easier to work with than the raw results.  It looks like this in the Chrome dev tools:
    image
    Each property from the result set is available directly on the SearchResult object within the array by name – much easier than remembering the position of each property in the result set.
  5. Right now the following properties are available from the PrimaryQueryResult.RelevantResults collection:
  • rank
  • docId
  • title
  • author
  • size
  • url
  • description
  • created
  • collapsingStatus
  • hitHighlightedSummary
  • contentclass
  • fileExtension
  • contentTypeId
  • parentLink
  • isDocument
  • lastModified
  • fileType
  • isContainer

Adding new properties is simply as easy as adding them as new properties to the SearchResult object definition in SearchResult.ts (yes, this is written in TypeScript).  One important thing to realize is that the property names on the SearchResult object must follow the typical JavaScript coding convention and start with a lowercase letter.

 

Accessing the results now looks like this:

SNAGHTML19c8b44

In the future, I’d like to clean this up and expand it to make use of additional result sets and other search capabilities.  Feel free to fork the code and adapt to meet your needs.  If you do something interesting, please submit a pull request to allow others to take advantage of it as well.

Getting Started with Visual Studio Code

Blah, blah, blah…intro to VS Code and why you should use it…blah, blah, blah.

If you’re here, I’ll assume you know what VSC is and are at least planning on kicking the tires to see what it’s all about.  This article is as much for me as you – a place where I document all of the little steps I needed to go through to get things set up the way I wanted.  Here’s basically what we cover:

  1. Configure Git, including credential caching for GitHib
  2. Configuring Karma
  3. Configuring TypeScript support

Let’s get started…

Configure Git, including credential caching for GitHib

VSC has support for Git built in:

image

Click there to go to the Git Panel.  The first time you visit, it will look like this:

image

Click the blue “Initialize git repository” button to, well, initialize your git repo.  Enter a Commit message and click the checkbox.  Your files are now committed to the local repo.  So how do we push them to a remote (GitHub) repo?

Easy:

  1. From a command prompt, and assuming you have Git tools installed that provide command line support, enter the following two commands:
    git remote add origin your_remote_git_repo_urlgit push -u origin master
  2. Depending on how your remote repo is initially configured, you may get an error here saying that basically the remote repo isn’t empty.  You can overcome that by doing a “pull” first or a “sync”
  3. You’ll be prompted for your credentials – enter them for now, we’ll get them cached next.  When the second command is done, you should be able to see your commit in your remote GitHub repo
  4. You can now also use the menu options  in VSC to interact with your GitHub repo:

SNAGHTML5b1630b9

Caching GitHub Credentials

I had Git Desktop installed already and I’m not sure if that is required for this or not.  Try it without but then if it doesn’t work, try it with.

From a command prompt (again, assuming Git tools installed and in PATH), run the following command:

git config --global credential.helper wincred

Your credentials should be cached and you should no longer be prompted by VSC again every time you connect to GitHub.

Configuring Karma

Nothing really special to configure Karma for VSC.  When I’m coding, I typically just run

start Karma

from a command prompt in my project folder (assuming that’s where my karma.conf.js file is located) and let it run in the background. Eventually I’ll get around to automating the start and stop of Karma with gulp, but this is good enough for now.  I configure Karma to watch my files so it fires every time I save.

Configuring TypeScript support

You can skip this step if you don’t use TypeScript.  I do, so:

  1. Use the instructions in the following two links to configure things:
    • https://code.visualstudio.com/Docs/languages/typescript
    • http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx
  2. For reference, my tsConfig.json file looks like this:
    
    {
      "compilerOptions": {
         "module": "amd",
         "noImplicitAny": false,         
         "removeComments": true,
         "preserveConstEnums": true,
         "declaration": true,
         "sourceMap": true,
         "target": "ES5",
         "watch":true
       }
    }
    
  3. The top of my tasks.json files looks like this:
    
    {
    	"version": "0.1.0",
    	"command": "tsc",
    	"isShellCommand": true,
    	"showOutput": "always",
    	"args": [
    		//add your .ts files here		
    	],
    	"problemMatcher": "$tsc"
    }
    

    Nothing below that was changed from the default

That’s about it.  I’ll probably flesh this out later, but for now this is my notes for what I needed.  Hopefully that helps someone.