Retrieve User Details Using SPServices In SharePoint Framework Development Model

Hopefully, everyone knows about the word SharePoint Framework. Sharepoint Framework is a page and part of a model, which enables client-side development for building SharePoint experiences. It facilitates an easy integration with SharePoint data and provides support for an open source tooling development.

In this article, we are going to see how to retrieve the user profile details for logged in user, using SPServices.

Create SPFx new Web part page

• Create new project directory in your favorite location.
  

  md userProfile-Webpart
  cd userProfile-Webpart
  
   
  

• Create new userProfile-Webpart by running Yeomon Sharepoint Generator
  
  Yo @microsoft/sharepoint

The next set of prompts will ask for specific information about your Web part.

• What is your solution name? XXX
• Where do you want to place your files? XXXX
• What framework would you like to start with?
• No JavaScript web framework
• React
• Knockout
• What is your Web Part Name? XXX
• What is your Web Part Description? XXX

  

At this point, yeomon will install the required dependencies. This might take a few minutes.

When it’s complete, you should see the message given below, which indicates a successful scaffold.

  

SPFx tool chain comes with a developer certificate we have to install that for building the webparts.

Gulp trust-dev-cert

After running the command given above, enter the command given below in the console to build and preview your Web-part:

Gulp Serve

Sharepoint Workbench

SharePoint Workbench helps to preview and test the Web parts without deploying them in SharePoint.

It is automatically taken to ‘localhost: 4883/_layouts/15/workbench.html’ page but we can open the Sharepoint workbench.aspx page instead of local workbench using below URL.

https://sharepoint site URL/_layouts/15/workbench.aspx

 

Upload JS files given below into the Project path “\\local project folder\src\webparts\userprofileservice\”

• jquery-1.11.3.min.js
• jquery.SPServices-2014.02.min.js
• ScriptFile.js (Custom Script File)

Add Externals in “Config.json file”

Go to Config.Json file from left side panel (Visual Studio Code and use ‘Code .’ command).

  

Include the code given below in Config.Json file.

"Jquery": {
    "path": "/src/webparts/userProfileService/jquery-1.11.3.min.js",
    "globalName": "jquery"
}, "SPService": {
    "path": "/src/webparts/userProfileService/jquery.SPServices-2014.02.js",
    "globalName": "GetUserProfile"
}, "CustomScript": {
    "path": "/src/webparts/userProfileService/ScriptFile.js",
    "globalName": "javascript",
    "globalDependencies": ["Jquery", "SPService"]
}

 

Update the Webpart.ts page

• In Webpart.ts, the file should add the below lines. Here ‘require’ function is the same  as web package.
  

  require("JQuery");
  require("SPService");
  require("Custom Script");

• Inside the render (): Void function adds HTML code to design the controls.

 

Script code to retrieve the user details, using SPServices

$(document).ready(function() {
    thisUserAccount = $().SPServices.SPGetCurrentUser({
        fieldName: "Title",
        debug: false
    });
    thisUserDept = $().SPServices.SPGetCurrentUser({
        fieldName: "Department",
        debug: false
    });
    thisUserManager = $().SPServices.SPGetCurrentUser({
        fieldName: "ManagerName",
        debug: false
    });
    thisUserMail = $().SPServices.SPGetCurrentUser({
        fieldName: "WorkEmail",
        debug: false
    });
    document.getElementById('idName').value = thisUserAccount;
    document.getElementById('idDept').value = thisUserDept;
    document.getElementById('idEmail').value = thisUserMail;
    document.getElementById('idManager').value = thisUserManager;
});

Once added, the script given above is in custom JavaScript file. Save the file and run the command ‘gulp serve’.

Go to SharePoint workbench.aspx page and click the ‘+’ button. Now, you can see the SPFx Web Part in Web Part Gallery.  

Add the SPFx_RetrieveUserProfile Web Part.

  

Once completed, the development runs the command given below.

gulp package-solution –ship

App file will generate in solution folder with the extension ‘.spapp’. Follow the app installation process and install the file in an app catalog site.

Thus, you can see the newly created SPFx Web Part app in all the Site Collections ‘Apps you can add’ category.

Keynotes

• Create the SPFx Web Part.
• Retrieve the logged in user details from the user profile Service, using SPServices.
• Implement the newly created SPFx app in an app catalog.