Skip to main content

Posts

Angular SharePoint People Picker Using Telerik Kendo Angular

This article is based on Sumit Agarwal's post .  I am sure People Picker control in SharePoint is one of the dreaded controls to customize. The OOTB default control is a beauty. It is simple & effective. Pnp has a people picker which is good too.  But sometimes there are situations, when you have to build your own. So here is my try.  Here I am using Angular 9 + Telerik Kendo Angular Multiselect control. I will try to explain all steps in brief. Step 1: Add supporting file for query interface - people-picker.query.ts Step 2: Add supporting file for People Picker Response - people-picker.response.ts Step 3: Import in your component. Step 4: Add html markup - to install & use Kendo multiselect, please check here . Step 5: Have a public variable in your component class Step 6: Write on change event function in component Step 7: Write actual get function in the service. Before that, please remember, I am running my independent Angular code in SP context. Hence,  I am declaring
Recent posts

Creating React App

While I was creating my first react app, I faced the following problem... Error: EPERM: operation not permitted, mkdir 'C:\Users\Vighnesh' Actually, in my current laptop, my username has a space in between "Vighnesh Bendre". Hence, when I run following command, I get the error. C:\Users\Vighnesh Bendre\github-finder> npx create-react-app . The best solution I found was here . It goes like this... Step 1. Run "npm config edit". This will open a notepad with commented text, 2. Find "cache". Mine looked like this...       ; cache=C:\Users\Vighnesh Bendre\AppData\Roaming\npm-cache 3. Change it to remove the space & shorter version of folder name.       cache=C:\Users\VIGHNE~1\AppData\Roaming\npm-cache 4. If you want to know the shorter version of the folder name, then use "dir /x" in cmd prompt. 5. And dont forget to remove the ';', 6. Once you save & close this file, then run "npx create-react-app .&

Push Notifications

Recently I was exploring a relatively new feature of modern browsers - Push Notifications. While working on HTML5, I stumbled upon a site (https://html5test.com/) which shows a detailed list of features supported by different browsers. If you open above site in IE 11, you will notice that Push Message is not supported on it. I followed an article by Joseph Medley  on Web Push Notifications. The article clearly explains Service Workers. There is a working code in Github .  Interestingly I could not open Firebase Developer Console on Chrome (44). But again, its good that we have options (Firefox). One interesting fact about running these applications on IIS (on your laptop) is that .json files are not read properly. In such cases, navigate to the virtual directory on IIS & under MIME Type, please add another entry as shown in below image. MIME Type Once you add this, you will be able to enable notifications & subsequently push messages to client's system. My next

Putting an button on each line item & updating list with calculated column

Recently I was working on a feature which required me to put a button on every item in the SharePoint list's view. The button name was Assign Me . When clicked, it should update the item and put the current logged in user in the Assigned To field. I followed a hybrid approach. calculated column and custom JavaScript . I tried doing everything in calculated column.  Even though calculated columns allow writing code in JavaScript, they still have some limitations. One of the biggest hurdle is to get the ID of the item. Since calculated columns do not allow ID column, you have to be innovative. I figured out that the checkbox column in every line item has id in the tag. This is always the first column in the view (first td in the tr). Following are the steps I followed to achieve the desired result.  Step 1. Create a new calculated column with output as Number.  Step 2. Put the following formula. I use Typescript, hence replace class name with your's in

Migrating Lists with Lookup Fields

One of the basic activity while working on SharePoint site is to migrate lists/libraries from one site to another. If you have a lookup field in the list then the task is not basic anymore.  I faced this issue several times. I never gave it a thought and always used to recreate the list at destination site. But recently I stumbled upon a blog from Maulik Dhorajia who has described this issue in detail.  In my case, I was moving 3 lists & 1 document library. This 1 doc lib had reference (lookup column) to other 3 lists. All the steps were same except I had to add all document in the VS 2013 project along with the manifest.xml file. Below are the steps in brief... Create list templates with content, Create parent lists in destination site, Note down list GUID for the newly created list, Rename doc lib the stp file to .cab, Extract the manifest.xml file, Look for the old list id and replace it with new list id, Create a new project in VS - CAB Project.  I had t

Javascript/JQuery Handle Double Click

Recently I have been working on JavaScript/Query & SharePoint client side extensively. I will be posting my learnings during the past one year in the coming few posts.  Recently I was presented with a problem that the custom solution I had provided, did not behave properly when double clicked.  Scrapping through the web, I fumbled on couple of solutions. I personally like the first approach as it is very simple.  First Approach: Click Me $("#clickMe").click(function (e) {     var $this = $(this);     if ($this.hasClass('clicked')){         alert("Double click");         //here is your code for double click         return;     }else{          $this.addClass('clicked');         //your code for single click          setTimeout(function() {                   $this.removeClass('clicked'); },500);     }//end of else }); Second Approach : var DELAY = 700 , clicks = 0 , timer = null ; $ ( function (){ $ ( &

Migrating Lists - Using list templates SharePoint 2013

Recently I came across a strange & unusual behaviour in SharePoint 2013. I was moving stuff from the dev environment to production. One of the most basic task is to move lists. So the usual process of taking a list template from dev to production and creating a list out of the list template. But, Microsoft decided that we will not allow this from SharePoint 2013. Let developers learn some (unnecessary) new stuff. So, the above mentioned basic concept of moving a list will not work in SP 2013. I have absolutely no clue as to why. So the new approach is to use powershell script to create list from the templates. Its a HACK I know, but MS still allows us to do it. First you have to save the list as template and then upload that to production list template gallery. Then change some values below and run it in PowerShell. Thats it, you list will be created. # Get the SiteURL $site = get-spsite("http://YourSite/") # Get the Articles web $web = Get-SPWeb -Identity &q