Richards blog

Add this code within the body tag and all is good.  <script type="text/javascript">         /* IE11 Fix */         if (typeof (UserAgentInfo) != 'undefined' && !window.addEventListener) {             UserAgentInfo.strBrowser = 1;         }     </script>​

I recently encountered this problem when referencing  FileSaver.js  in my project. The code worked in all browsers except Internet Explorer 11. This  post in StackOverflow helped me resolve the problem. The problem was caused by a meta tag forcing the browser to behave like IE 8. <meta http-equiv="X-UA-Compatible" content=" IE=8 "/> This is an issue as my HTML5 reference is now broken. A simple change resolved the problem. <meta http-equiv="X-UA-Compatible" content=" IE=edge "/>

Sometimes you need to add additional logic to a existing buttons 'click' event. The code to add extra logic to the item (without overwriting the existing code) is as follows: 1. Store the elements click event in a variable var clickEvent = $("input[id='MyButtonId']").click 2. Overwrite the existing 'click' function, but execute the saved clicked function. $("input[id='MyButtonId']").on('click', function() {  eval(clickEvent); MyNewSaveMethod();} );

A recent penetration test of some API code showed that user information (such as an email address) was being displayed in the querystring. The API was: [HttpPost] [Route("api/MyAPIEndPoint")] public void DoSomething(string login, string email) { // stuff } A simple view of the endpoint with a browser would display the users details. The network tab in Chrome showed "api/MyAPIEndPoint?login=X12345&email=test@test.com". A new approach was required. The solution is to include the data in the body of the Request. The factory event is updated as follows: function DoSomething(login, email, success, failure) { var url = "/api/MyAPIEndPoint"; var parameter = { "Login": login,                 "Email": email }; return executePost(url, parameter, success, failure); } function executePost(url, parameters, success, failure) { var req = { method: 'POST', url: url, data: parameters }; $htt...

The requirement I faced with my SharePoint online project was to update fields on the new and edit forms once an item had been selected. The main problem was that the update required a lookup to existing data for each item in a multi select box. The obvious solution was to use  PreSaveAction  in a Script Editor webpart, The script looked something like this: <script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>          <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script> <script type="text/javascript"> var $j = jQuery.noConflict();  function PreSaveAction() {  function SetValue(onComplete) { // clear the target item $("textarea[id*='MyTargetField']").val(''); var listTitle = 'MyLookupList'; var ids = [];                 // get the items fr...

For me, the solution was found by doing the following: 1. Add a 'Route' annotation above the endpoints    [Authorize]     public class MyAPIController : ApiController     {         [HttpPost]         [Route("api/MyAPI/MyPostEndPoint")]         public void MyPostEndPoint()        {        }        [HttpGet]        [Route("api/MyAPI/MyGetEndPoint")]        public void MyGetEndPoint()        {        }     } 2. When calling the endpoints from the js factory, my POST call we different to my GET command: function executeGet(url, success, failure) {             $http.get(url, {                 headers: { 'Authorization': 'Blah' }       ...

Here is some simple Javascript to create a folder and a sub folder. CreateFolder($scope, // success function(){ CreateFolder2($scope) } ); function CreateFolder($scope, success){ var clientContext;     var oWebsite;     var oList;     var itemCreateInfo;     clientContext = new SP.ClientContext.get_current();     oWebsite = clientContext.get_web();     oList = oWebsite.get_lists().getByTitle("Report");     itemCreateInfo = new SP.ListItemCreationInformation();     itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);     itemCreateInfo.set_leafName("Top Folder");     this.oListItem = oList.addItem(itemCreateInfo);     this.oListItem.update();     clientContext.load(this.oListItem);     clientContext.executeQueryAsync(         Function.createDelegate(this, successHandler),     ...

My current project requires me to identify the persona of the logged in user based on their membership of specific SharePoint groups. The first port of call is to extract all the groups for the current user and then work out what they can do. Sounds easy enough. I tried the following: function getUserGroups(success, failure) { var d = $.Deferred(); var ctx =  SP.ClientContext.get_current(); var collGroup = ctx.get_web().get_siteGroups(); ctx.load(collGroup);                 ctx.load(collGroup, 'Include(Users)'); var currentUser = ctx.get_web().get_currentUser(); ctx.load(currentUser); var o = { d: d, collGroup: collGroup, currentUser: currentUser }; function onQuerySucceeded() { this.d.resolve(this.collGroup); this.d.resolve(this.currentUser); var data = { "collGroup": this.collGroup, "currentUser": this.currentUser }; //return success(this.collGroup); ret...

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { $scope.UserGroups = []; var clientContext = new SP.ClientContext.get_current(); this.collGroup = clientContext.get_web().get_siteGroups(); currentUser = clientContext.get_web().get_currentUser(); clientContext.load(collGroup); clientContext.load(collGroup, 'Include(Users)'); clientContext.load(currentUser); clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed)); function onQuerySucceeded() { var groupEnumerator = collGroup.getEnumerator(); while (groupEnumerator.moveNext()) { var oGroup = groupEnumerator.get_current(); var collUser = oGroup.get_users(); var userEnumerator = collUser.getEnumerator(); while (userEnumerator.moveNext()) { var oUser = userEnumerator.get_current(); if (oUser.get_loginName() == currentUser.get_loginName()) { $scope.UserGroups.push({ ...

An image can easily be converted into a 'clickable' image with some simple html manipulation - put the image in an anchor tag. I have added two images (First.ico and Second.ico) to the Style Library/images of my site collection. I also have jQuery referenced in my masterpage. Here is the html: <a href="" onclick="changeImage()"><img id="favourite" ></img></a> Changing the image is just as easy: First, lets set an initial source value: jQuery(window).load(function () {    $("#favourite").attr("src", "/Style%20Library/Images/First.ico"); }) Then, implement the changeImage function to switch images: function changeImage() { if ($("#favourite").attr("src") == "/Style%20Library/Images/First.ico") { $("#favourite").attr("src", "/Style%20Library/Images/Second.ico"); } else { $("#favourite").attr(...

This may not be the easiest way, but is certainly worked for me. var url = $(location).attr('href').replace(window.location.pathname, '').replace(window.location.search, '');

My current project requires some custom CSS with the minimum amount of customisation. Instead of writing a stack of custom controls, we can 'intercept' the apps as they are being rendered and change their CSS at runtime. The following is a sample of how this might look (I called my file blah.js): (function () {     var overrideContext = {};     overrideContext.Templates = {};     overrideContext.Templates.Header = "<div class='myheader'>";     overrideContext.Templates.Footer = "</div>"     overrideContext.Templates.Item = customItem;     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext); })(); function customItem(ctx) {     return '<div class="myheadercss"><h1>'+ctx.CurrentItem.Title+'</h1></div>'+            '<div class="mycontentcss"><img class="myimagecss" src="'+ctx.CurrentItem.Image0+'" alt=...