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.


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


Step by Step How to Create SharePoint Provider Hosted App

1.     Introduction

This document gives the clarity to building the infrastructure for provider hosted apps for on premise deployments.

App in SharePoint

In SharePoint, the application can be hosted by 3 types.

  1. SharePoint Hosted Application

SharePoint-hosted apps, or apps where all components are hosted on either an on-premises or Office 365 SharePoint Farm[i].

  1. Auto Hosted Application

Auto hosted apps for SharePoint are cloud-hosted apps whose remote components are provisioned and deployed for you on Windows Azure.

  1. Provider Hosted Application

Provider-hosted apps for SharePoint include components that are deployed and hosted outside the SharePoint Farm.

2.     Purpose

Purpose of this document is to describe the each and every step involved in creation of a Provider hosted app in SharePoint 2013.

3.     About Provider Hosted App

Provider Hosted App is one where the app is hosted outside of SharePoint. For Example, a server hosting IIS can host the app contents in a site. This is referred to as a remoteweb. This is more of a hybrid in that it can run a mix of both client and server side code.

In Provider Host application, user will call the SharePoint server and the SharePoint Portal intern will call the .NET application. Other option to create an app part and loads a .Net application inside the app part which can be added on the SharePoint page.


4.     Provider Hosted App – Develop

First step, create a simple provider hosted app.

  1. Start VS 2013 and choose File, New Project
  2. New Project wizard, expand visual C# and expand Office/SharePoint node
  3. Choose apps, and then create an App for SharePoint 2013 project.
  4. Enter the Name of project


  1. Enter the URL of developer site created in SharePoint 2013.


  1. Select the provider-hosted option and click Next button.


  1. Select the type of web project.
    Select the certificate option and click Browse button and select the (.pfx) file that created (C:\certs).
  2. Enter the password for this certificate. For example “password”.
  3. Type the IssuerID (8081a3c9-a5d9-4b81-a08d-48f717f95609) in the IssuerID box. ( Refer 1. Prerequisites)



  1. Click finish and the default.aspx automatically opens.

Solution will comprise of two projects.

  1. App Project – Going to deployed on the SharePoint
  2. App Web project – Going to be the .NET web application and hosted on any IIS.

Go to property of the AppWeb project and make sure that Target Framework.

  1. Save project and build the solution.


5.     Provider Hosted App – Package

AppManifest.xml Setting

  • Go to AppManifest.xml in the App project and change the Start page entry.
  • Go to permissions tab and add the corresponding scope and permissions as per the requirement.



Register App in Sharepoint (AppID creation).

  • Access any site and append /_layouts/15/appregnew.aspx
  • Click Generate buttons for both App ID and App secret fields.
  • Title is the app web project name.
  • The app Domain is the domain name set on the remote web application server’s IIS site that will be hosting this app.
  • Redirect URI is not required for sample app.
  • Click Create Button.



  • Copy the output, will be required for packaging.
  • Copy the App ID(Client ID) and need to paste in two place.
    • WebConfig – AppSettings


<add key=”ClientId” value=”4ec33fdf-7767-479b-bf31-f8396572f584″ />

<add key=”ClientSecret” value=”DHFvTyBfUTOBCfv+yGcS0Fum3t7xQ0yCljWkWfl3xiQ=”/>

<add key=”ClientSigningCertificatePath” value=”D:\My Documents\My Project\SharePoint\cert\cert\remotespweb.pfx” />

<add key=”ClientSigningCertificatePassword” value=”password” />

<add key=”IssuerId” value=”8081a3c9-a5d9-4b81-a08d-48f717f95609″ />


  • xml – AppPrincipal


<RemoteWebApplication ClientId=”4ec33fdf-7767-479b-bf31-f8396572f584″ />



Register App ID (client ID) in SharePoint Farm

To register client ID on SharePoint, need to run the below script in SharePoint server using SharePoint Management Shell.

// Registering App principal


Add-PSSnapin “Microsoft.SharePoint.PowerShell”

# set intialization values for new app principal

$appDisplayName = “SpApp2013”

$clientID = “4ec33fdf-7767-479b-bf31-f8396572f584”

$targetSiteUrl = “http://win-3o5b41j7jnp/sites/devsite/&#8221;

$targetSite = Get-SPSite $targetSiteUrl

$realm = Get-SPAuthenticationRealm -ServiceContext $targetSite

$fullAppPrincipalIdentifier = $clientID + ‘@’ + $realm

Write-Host “Registering new app principal”

$registeredAppPrincipal = Register-SPAppPrincipal -NameIdentifier $fullAppPrincipalIdentifier -Site $targetSite.RootWeb -DisplayName $AppDisplayName

$registeredAppPrincipal | select * | Format-List

$registeredAppPrincipal | select * | Format-List | Out-File -FilePath “Output.txt”

Write-Host “Registration Completed”

#Get-SpAppPrincipal -?

Output windows as,




6.     Provider Hosted App – Publish, Deploy

App Web – Publish

Publishing the app web builds a package that includes files and script. This files are copied into SharePoint server / remote web server and deployed.

  1. Right click the App Web project (eg. spApp2013Web) and click Publish


  1. Create New profile
  2. Select the publish method and destination path to save package
  3. Specify the site name as “Default Web Site/SpApp2013Web”.


  1. Click next and choose release


  1. Click Publish


  1. Check Output window for Success.


  1. Check Directory


  1. Copy this directory + output to the IIS Server hosting this remote web.


Deploy Remote Web (AppWeb Project in IIS)

  1. Open a file youproviderhostedAppweb.setparameters (e.g SpApp2013Web.Setparameters) and verify the setting to deploy.
  2. Open a Command Prompt and navigate to the directory containing the package files.
  3. Run the following command: yourproviderhostedappwebname.deploy.cmd /y

e.g. SpApp2013Web.deploy.cmd /y


  1. Refresh the site and check in IIS.


  1. Refresh the site and check in IIS.
  2. Check the site binding and application pool



  1. Set the Authentication as below and based on the requirement.



App Deployment

  • Go to Visual Studio, deploy the solution by pressing ctrl+F5. Site will be open as below.24
  • Click Trust it. The app will get installed.


App Package

  1. Within VS2013, right click the “SpApp2013” project and click publish


  1. Click Package this app


  1. Click Finish and check output window.


  1. Automatically opens windows explorer to the app.


  1. Copy this file and added to an app catalog.
  2. Select the new app and upload this file.
  3. Go to site and select site contents and click Add App and select the app
  4. App Domain needs to be created to access the application from App catalog. (Not covered in this article).



7.     Appendix

7.1. Prerequisites

  1. Configuration (Share Point 2013)
  • Windows 2008 R2 SP1
  • SharePoint Server 2013
  • SQL Server 2008 R2 SP1
  • Visual Studio Professional 2012 / 2013
  1. SharePoint Central Admin (Share Point 2013)
    1. Following Service should be started:
  • Subscription Service Application with proxy
  • Subscription Settings Service instance started
  • Application Management Service Application and proxy
  • App Management Service instance started
  • Must have User Profile Service started.
  1. Create New Developer Site
  • This developer site [ii]used by Visual Studio to test the app and target that when creating the VS project.
  1. Setup Remote Web
    1. Windows 2008 R2 SP1 or Windows 2012 box running IIS.
    2. Need to install Web deploy from here.
    3. Configure the Authentication
      • Disable the Anonymous authentication in Action pane
      • Enable the Windows Authentication and configure the authentication Provider. Highlight the windows authentication and click providers and ensure that NTLM is listed above Negotiate and Click OK.
    4. Visual Studio 2013 Setup
      • Install Visual Studio 2013 Professional or later.
      • When app is deployed from Visual Studio, you must do so with an account other than the system account.


  1. Domain Certificate

Create Domain Certificate


  • On the Remote Web (where we are developing application using VS), go to IIS and click server object and double click on certificates.
  • On right side, click on Create Domain Certificate.


Click Next and fill the below details,


And click finish, cert should be present:


Export Certificate


  1. a) Set the Default IIS Site for SSL and set new certificate by going to into Site Bindings
    b) While in Site Bindings, Export the certificate to CER by going to View\Details tab and click “Copy to File”
    c) Drop the exported file in the c:\certs folder
    d) Copy the c:\certs folder to SharePoint box (SharePoint Server 2013 system).
  1. SharePoint – Issuer ID Setup

The above certificate need to register as an official token issuer. If the app hosted in IIS that remote web needs to call into SharePoint, its uses the certificate to retrieve the token from SharePoint. Without Sharepoint Token Issuer, this functionality wouldn’t exists.

To create the IssuerID, the following PowerShell script needs to run on Sharepoint Management Shell:

##Grab the cert and create the object##

$publicCertPath = “C:\Cert\remotespweb.cer”

$certificate = New-Object System.Security.Cryptography.X509Certificates.X509Certificate2($publicCertPath)

##Certificate treated as root authority##

New-SPTrustedRootAuthority -Name “remoteweb” -Certificate $certificate

##Setup token issuer which is the certificate itself##

$realm = Get-SPAuthenticationRealm

$specificIssuerId = [System.Guid]::NewGuid().ToString()

$fullIssuerIdentifier = $specificIssuerId + ‘@’ + $realm

New-SPTrustedSecurityTokenIssuer -Name “IssuerforRemoteWeb” -Certificate $certificate -RegisteredIssuerName $fullIssuerIdentifier –IsTrustBroker

The output of above is,

PS C:\cert> ./Newissueidcreation.ps1

Certificate                 : [Subject]

CN=remotespweb, OU=techcoe, O=fiserv, L=bng,

S=kr, C=IN


CN=FGS ROOT CA, DC=fiserv, DC=co, DC=in

[Serial Number]


[Not Before]

8/19/2015 3:12:16 AM

[Not After]

8/18/2017 3:12:16 AM



Name                        : remoteweb

TypeName                    : Microsoft.SharePoint.Administration.SPTrustedRoot  Authority

DisplayName                 : remoteweb

Id                          : b1e813f7-335c-4887-bc82-467ed4896e5b

Status                      : Online

Parent                      : SPTrustedRootAuthorityManager

Version                     : 111199

Properties                  : {}

Farm                        : SPFarm Name=SharePoint_Config

UpgradedPersistedProperties : {}

IsSelfIssuer                  : False

NameId                        :

RegisteredIssuerName          : 8081a3c9-a5d9-4b81-a08d-48f717f95609@0bbe82cd-9


IdentityClaimTypeInformation  : Microsoft.SharePoint.Administration.Claims.SPTr


Description                   :

SigningCertificate            : [Subject]

CN=remotespweb, OU=techcoe, O=fiserv, L=bng,

S=kr, C=IN


CN=FGS ROOT CA, DC=fiserv, DC=co, DC=in

[Serial Number]


[Not Before]

8/19/2015 3:12:16 AM

[Not After]

8/18/2017 3:12:16 AM



AdditionalSigningCertificates : {}

MetadataEndPoint              :

IsAutomaticallyUpdated        : False

Name                          : IssuerforRemoteWeb

TypeName                      : Microsoft.SharePoint.Administration.Claims.SPTr


DisplayName                   : IssuerforRemoteWeb

Id                            : 6c19612f-3a28-4bf2-ba49-f932f1df9857

Status                        : Online

Parent                        : SPSecurityTokenServiceManager


Version                       : 111202

Properties                    : {}

Farm                          : SPFarm Name=SharePoint_Config

UpgradedPersistedProperties   : {}

The IssuerID is needed each time when you create provider host app in VS.

The issuer ID is 8081a3c9-a5d9-4b81-a08d-48f717f95609.

[i] Farm: It is a logical grouping of SharePoint servers that share common resources.

[ii] Sites: It is a collection of pages, lists, and libraries. A site may contain sub-sites, and those sites may contain further sub-sites.

Step by step installation guide – SharePoint Designer 2013

1.     Introduction

This document gives the clarity to install SharePoint Designer 2013 in windows server 2008 R2.

SharePoint Designer 2013

License Free ware
Platform 32bit and 64bit
Operating System From windows 7

2.     Purpose

Purpose of this document is to describe the each and every step involved in installation of SharePoint Designer 2013.

3.     About

SharePoint Designer 2013 allows you as an advanced user or even as a developer to rapidly create solutions without code. Its covers the following topics,

  • Management – of sites and lists
  • Data sources – create and manager internal and external data sources
  • View and forms – create views and forms to work with data
  • Workflows – create workflows to manage business processes
  • Branding – customize the look and feel of your SharePoint site.

4.     System requirement

  • Operation system – 64-bit edition of windows Server 2008 R2 Service Pack (SP1)
    • Other supported OS – Windows 7, 8, 8.1, windows server 2012.
  • Framework – Microsoft .NET 4.0 Framework or higher.
  • Sharepoint Designer 2013 – Platform type 64 bit (x64).here
  • SQL: 64 bit edition of MS SQL server 2012 or 64bit edition of MS SQL Server 2008 R2 SP1
  • Designer and MS office should be same platform – So 64 bit version of MS office
  • Sharepoint 2013 Site – Running State

5.     Installation

  • In windows Server 2008 R2 system, copy the downloaded executable file of SharePoint Designer 2013.
  • Click the downloaded file – SharePoint Designer 2013


  • Click ‘Install Now’


  • Once successfully installed – click close.


6.     Connect to SharePoint Site

Once successfully installed SharePoint Designer 2013, Open SharePoint Designer 2013 and connect to SharePoint 2013 site as follows,

  • Open SharePoint Designer 2013 by selecting it on the Start Menu. Click All Programs, click MS office 2013, and then click SharePoint Designer 2013.


  • Click Open site on the SharePoint Designer start page



SharePoint Designer is ready to develop.

Create New Child External List (based on ECT/ SQL server) with Name column of Primary Table instead of foreign key ID column

Scenario: Parent Child Lists. In Child list ‘List View’ mode instead of foreign key Id we should see name from Master table.

I have captured the snapshots to help you understand the flow more easiliy. Since the post is most focussed on Child List issues, I am skipping any details pertaining to how to create ECT/ External List for Parent table. I named ECT for Customer table as ‘Customer’ and saved.

Also my understanding is that, user is already aware of how to use Sharepoint designer to craete External content type for SQL server as datasource.

In my enviroment I created these using SPD 2013, SQl server 2008 R2.

Assume a scenario where While displaying ‘Orders’ as a ‘List View’ the user should see the Order details along with the Customer name for whom this order is meant for.

So in my DB I have 2 table, Customer, Orders with self explanatory meanings. Ensure that you create a ‘CustomerOrders’ View in DB on Orders Table based on CustomerID as parent child relation, and included Name column from Customer table in this DB ‘View’. All columns from Orders table are part of this DB ‘View’.

I am ready to Create ECT for Child table. Choose ‘Create All Operations’ option as per below diagram.

This will, by default, will generate all CRUD operations for you.

On this screen agree all the suggestions and just press Finish button for SharePoint to generate all CRUD operations for you.

Here starts the logic to show Customer Name in ‘List View’, ‘Item View’ for Orders table.

In Operations Design view of new created ECT for Orders table, highlight Read List operation and in top ribbon menu select ‘Remove Operation’ to remove this default generated Operation.

After confirmation for delete of ‘Read List’ repeat the same step for ‘Item View’ also, as per below snapshot.

Now starts the real logic and fun. While still in ‘Orders’ child ECT window, go to Data Source Explorer and select CustomerOrders DB View.

Right click on this DB View and Select ‘New Read List Operation’.

Set the appropriate Operation name and Display name.

As you move Next in this wizard few configurations you need to set on Return Parameter tab as per below snapshots

Press Finish.

Now again go back to CustomerOrders DB View and select ‘New Read Item Operation’.

Do the configuration settings on Read Item ‘Return Parameter’ tab as per snapshots below..

Press Finish.

Your all CRUD operations are again ready. Create an ‘External List’. Name it ‘Orders’. Done.

When you open Operations to see the data displayed for External List, you will see Name as a column in ‘List View’ and ‘Item View’.

And these View are user friendly and Done.

Sharepoint Logs locations

Many a times you feel struck by SharePoint throwing some error message. The message in most cases may not be descriptive enough to understand the cause.

The logs can be of good help in that case:

By default the logs are created under path: <drive>\Program Files\Common Files\Microsoft shared\Web Server Extensions\15\LOGS.

For SP 2010 it would be 14 instead of 15. For SP 2013 its 15 and accordingly for older or newer versions.

SharePoint Central administration- Monitoring

SharePoint Central administration- Monitoring

Now under Monitoring, open the option ‘configure diagnostic logging’.

configure daignostic logging

configure daignostic logging

Now you reach the ‘Configure Diagnostic logging’ page, scroll little bit down you should find an option to set the logging path:

Sharepoint Logging path

Sharepoint Logging path

Keep it as it is, or change as you want it to be.

Reading Logs will save you a lot of time and help diagnose problem quickly. Make a habit of using the logs.