How to read SharePoint 2013 User Profile using JSOM

In this article i ‘b be dealing with how to read SharePoint 2013 User Profile properties using Javascript Object Model (JSOM). We know that SharePoint 2013 provides JSOM support for User Profile properties.

Create a SharePoint Hosted App and call it as ‘Read User Profile’

Go to Default.aspx in the SP Hosted App and add the references to SP.UserProfile.Js in the PlaceHolderAdditionalPageHead.

<script type="text/javascript" src="/_layouts/15/SP.UserProfiles.js"></script> 

It will already have references to SP.UserProfile.js and App.js

<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/javascript" src="../Scripts/App.js">

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Open the App.JS and replace its current code with the following code

var personProperties;
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
    //    getUserName();
   
    SP.SOD.executeOrDelayUntilScriptLoaded(getUserProperties, ‘SP.UserProfiles.js’);
   
});

function getUserProperties() {

   
    //set your user id, the following format is the user id for Office 365. If you are reading it from SharePoint OnPremise assign user id in the DomainUserId
    var targetUser = “i:0#.f|membership|UserID@SharePointSite.onmicrosoft.com”;

    //Instantiate Client Context
    var clientContext = new SP.ClientContext.get_current();

    //Instantiate People Manager
    var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);

    // Get the instance of person properites
        personProperties = peopleManager.getPropertiesFor(targetUser);

    // Load the PersonProperties object and send the request.
    clientContext.load(personProperties);
    clientContext.executeQueryAsync(onRequestSuccess, onRequestFail);
}

// This function runs if the executeQueryAsync call succeeds.
function onRequestSuccess() {

    // Get a property directly from the PersonProperties object.
    var messageText = ” “LastName is ” property is “
        + personProperties.get_userProfileProperties()[‘LastName’];

    // Get a property from the UserProfileProperties property.
    messageText += “<br />”WorkPhone Number” property is “
        + personProperties.get_userProfileProperties()[‘WorkPhone’];
    $get(“results”).innerHTML = messageText;
}

// This function runs if the executeQueryAsync call fails.
function onRequestFail(sender, args) {
    $get(“results”).innerHTML = “Error: ” + args.get_message();
}

Set the following permissions

app permission

ReadUserProfile

 

 Subscribe to my blog

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

How to add a Calender App to Office 365 E3 public SharePoint Site

In this article, I’d deal with how to add a Calender App to Office 365 E3 public SharePoint site.  I came across this scenario when I was designing an Office 365 public facing site for the User Group in Chennai. When you subscribe for an Office 365 E3 subscription, you’ll get a public facing Sharepoint site.

Office 365 E3 Calender1

You’ll see a Calender App missing in the Site Contents when you try to add an App. You need to employ an work around to achieve this one.

Add Custom List App

Office 365 E3 Calender2

Go to List Settings –> Advanced Settings –> Enabled Management of Content Types

Office 365 E3 Calender3

Add from existing Site Content Types

Office 365 E3 Calender4

Click Ok.

Change new button order and default content type and set Event as default content type

Office 365 E3 Calender5

Now we have added the Calender App and we create events here.

 

 

 Subscribe to my blog

Deprecation of Custom Managed Code in Sandbox Solutions

Microsoft SharePoint product team has officially clarified yesterday that they are deprecating managed code in Sandbox Solutions.

http://blogs.msdn.com/b/sharepointdev/archive/2014/01/14/deprecation-of-custom-code-in-sandboxed-solutions.aspx

This will impact us if we are working on migration to Office 365 SharePoint online.

If you have customization in existing SP 2010 environment, please consider the following alternatives if you want to move to Cloud.

http://blogs.msdn.com/b/richard_dizeregas_blog/archive/2013/07/16/app-approaches-to-common-sharepoint-customizations.aspx

 Subscribe to my blog