Skip to main content

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 SP & _spPageContextInfo variable outside the service class.



To save you some typing, I am attaching the code as a text file here.

Happy coding! 




Labels:

Comments

Post a Comment

Popular posts from this blog

Working with large xml files in c# .net

Working with large (huge) xml files is always a pain in the … The reason? These files can’t be loaded in to memory. On my desktop, where I have 2 gigs memory, I can’t open the file in even notepad. I was presented with a challenge recently to manipulate one such large xml file. The xml file was of 550+ MB. I know many would say I have seen bigger xml files than this. But the heart of the matter is if I can’t open 550+ MB file in notepad or in xmldocument in c#, then I can’t open any file bigger than this. And hence the logic to play with these files would remain same. The scenario: We have an xml file from which we want to remove a single node without removing its children. In the below sample xml fragment, the node has to be removed. The children nodes, must then be attached to ( node’s parent) node. One Two 100.22 GoodDay 3 4 Five 200.09 Cra...
3 comments
Read more

Upgrade and Migration for SharePoint Foundation 2010

      1.1 Introduction Microsoft SharePoint Foundation 2010 has been designed for scale and performance and as such requires new hardware and software requirements. There are 3 major steps while upgrading. 1. Plan and Prepare 2. Perform a database attach upgrade 3. Verify upgrade 1.2 Plan and Prepare   Before we run any process to upgrade from Windows SharePoint Services 3.0 to Microsoft SharePoint Foundation 2010, we have to determine which upgrade approach to take. In our scenario, Database Attach Upgrade seems to be appropriate approach to follow. We can upgrade the content for the environment on a separate farm. The result is that you do not upgrade any of the services or farm settings. You can upgrade the databases in any order and upgrade several databases at the same time. While each database is being upgraded, the content in that database is not available to users. 1.2.1 Upgrade Approach A database attach upgrade enables you to move to...
4 comments
Read more

Object Oriented Analysis & Design (OOAD) and Unified Modelling Language (UML)

Part 1 – Identifying Use Cases – Use Case Diagrams Recently I went through OOAD and UML training. The OOAD and UML tutorial was very impressive and I decided to share it with you. Object Oriented Analysis & Design and Unified Modelling Language is very important in a life cycle of a project. Previously I was involved in project requirement study and technical design. But this time, I learned the tricks of the trade. I discovered different tips for identifying Use Cases, Actors and Classes . In this series of posts, I am planning to take you through the process of involvement of UML in Requirement analysis and Design phase. This series will include 3 parts... Part 1. Identifying Use Cases – Use Case Diagrams Part 2. Realizing Use Cases – Sequence Diagrams Part 3. Identifying Classes – Class Diagrams For this purpose we will take commonly available sample requirement – Student Registration process. From this requirement we will identify the ACTORS and US...
2 comments
Read more