Show People Picker UI control on SharePoint Page Programmatically using JSOM


People picker is the best way to choose people name of your organization in SharePoint 2013 based web applications. 2013 has much better support and facility to People Picker control on UI.

Below are the steps to achieve this functionality on any web page of your SharePoint 2013 site.

1. Click on ‘Edit Page’ options in Settings section of the page on which you are willing to add this control to.

2. See if you already have some scripts running on this through script file(s) of the page, or open new script in ‘Media and Content’ webpart if you are adding a new script.

3. In the script define a div as per UI rendering location:

 

4. Add following script references in the file:

<script type=’text/javascript’ src=somepath/clienttemplates.js’

<script type=’text/javascript’ src=somepath/clientforms.js’

<script type=’text/javascript’ src=somepath/clientpeoplepicker.js’

<script type=’text/javascript’ src=somepath/autofill.js’

<script type=’text/javascript’ src=somepath/sp.runtime.js’

<script type=’text/javascript’ src=somepath/sp.js’>

<script type=’text/javascript’ src=somepath/sp.core.js’

can be an absolute path of relative path where you would keep these scripts..

5. To initialize Picker Picker on page, add following JavaScript code:

// Create a schema to store picker properties, and set the properties.

var schema = {};

schema[‘PrincipalAccountType’] = ‘User,DL,SecGroup,SPGroup’;

schema[‘SearchPrincipalSource’] = 15;

schema[‘ResolvePrincipalSource’] = 15;

schema[‘AllowMultipleValues’] = false;

schema[‘MaximumEntitySuggestions’] = 50;

schema[‘Width’] = ‘230px’;

// Render and initialize the picker.

// Pass the ID of the DOM element that contains the picker, an array of initial

// Picker Entity objects to set the picker value, and a schema that defines

// picker properties.

SPClientPeoplePicker_InitStandaloneControlWrapper (<div id>, null, schema);

The Picker control will look something like this:


Even you add some text in control, it will start showing search results to choose from:



The properties you are setting in schema will help you records to want to display, width of textbox on UI, allow multiple people selection, maximum search result suggestions etc..

To get the people picker object from the page.

var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.peoplePickerDiv_TopSpan;

var keys = peoplePicker.GetAllUserKeys();

keys will return all the people name added in the control. Once you have got in keys variable these can be manipulated for further action.


Challenges:

Enable the scripts and for page and to ensure that all scripts are available.


Advertisements

Agile for DevOps

What this blog cover:

Basic definition of DevOps

Basic definition of Agile

DevOps vis a vis Continuous Deployment

DevOps vis a vis Continuous Integration

DevOps vis a vis Agile Development

DevOps vs Development Agile

Basic Definition of DevOps

DevOps (development and operations) is an enterprise software development phrase used to mean a type of agile relationship between Development and IT Operations. The goal of DevOps is to change and improve the relationship by advocating better communication and collaboration between the two business units. (Courtesy http://www.webopedia.com/TERM/D/devops_development_operations.html)

Q1)    is it a new Tool?

.

.

.

NO, NO.

It’s Dev + Ops working together to deliver solutions quickly & reliably.

Q2)     why do we need DevOps?

.

.

.

By the time a new IT solution is deployed, it no longer maps to what business owner needs. Businesses are evolving FAST … be it BFSI, Gaming, Travel, FMCG etc.…

Basic Definition of Agile

Dictionary meaning of Agile is: quick and well-coordinated in movement

Agile methodology is an alternative to traditional project management, typically used in software development. It helps teams respond to unpredictability through incremental, iterative work cadences, known as sprints. Agile methodologies are an alternative to waterfall, or traditional sequential development. (Courtesy
http://agilemethodology.org/)

DevOps vs CD/ CI/ Agile Development

If we see the diagram, the Agile Development ends by Test phase of the lifecycle. This means DevOps is not a good candidate to extend Agile (Development) up to. However said that Since Agile is a methodology so it can be introduced within the IT Operations.

DevOps vs Agile

DevOps is a small areas of intersection of 3 areas of IT: Development, QA, Operations. It’s small in size, means small set of activities of that area of IT, out of whole activities of that area actually fall under DevOps.

Agile cycle currently embrace the IT/QA (which current Agile methodology covers).

Some of the activities that are common to Development and QA and need support from Operations are:

  • Infrastructure access
  • Product Deployment
  • Product Configuration
  • Ticket Resolution (application specific)
  • Application Performance and Tuning
  • Application security

And so for these set of activities only Agile can be extended for IT Operations team.