Retrieve User Details Using SPServices In SharePoint Framework Development Model

Muthusamy Thangavel

SharePointSharePoint Framework Development ModelRetrieve User DetailsSPServices

2 Comments

Join the conversation! Your thoughts help the community grow.

chait9y ago
I got below error [SPLoaderError.loadComponentError]:***Failed to load component "f92ee0ce-bd8f-467b-bac8-4c565b07365f" (UserProfileWebPart).Original error: ***Failed to load URL 'https://localhost:4321/src/webparts/userProfileService/jquery.SPServices.min.js' for resource 'SPService' in component 'f92ee0ce-bd8f-467b-bac8-4c565b07365f' (UserProfileWebPart). The file was not found in the server.Make sure that you are running 'gulp serve'. ***INNERERROR: ***Failed to load URL 'https://localhost:4321/src/webparts/userProfileService/jquery.SPServices.min.js' for resource 'SPService' in component 'f92ee0ce-bd8f-467b-bac8-4c565b07365f' (UserProfileWebPart). The file was not found in the server. Make sure that you are running 'gulp serve'. ***CALLSTACK: Error at SPLoaderError.SPError [as constructor] (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:9434:24) at new SPLoaderError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3987:28) at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3629:21) at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3551:21) at https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:8149:38 at <anonymous>
Chandru D9y ago
SPFx seems very interesting

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.