locked
getting current logged in user on sharepoint list in spfx RRS feed

  • Question

  • Hi,

    I have make one web part, on its click event I am storing values of web part in SP list, I want that in SP list the user which is currently logged in its name should come in one of the field of SP list. How to know who is current logged in user?

    Best Regards,

    Deeksha

    Wednesday, February 14, 2018 12:30 PM

Answers

  • Hi Deeksha,

    For User Field, we need to specify the Current User Id to set value, refer the demo from GitHub:

    For example, having a user field which named testuser, then we can set it like below with current user Id:

      public render(): void {
        const element: React.ReactElement<ITestwebpartProps > = React.createElement(
          Testwebpart,
          {
            description: this.properties.description
          },
          pnp.sp.web.currentUser.get().then(result => {
            pnp.sp.web.lists.getByTitle("MyList").items.add({
              Title: "test",
              testuserId: result.Id
          }).then(i => {
              console.log(i);
          });
        }
      ));
        ReactDom.render(element, this.domElement);
      }

    Data Response in VSCode Console:

    Results in the List UI:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.



    Tuesday, February 20, 2018 3:26 PM

All replies

  • Hi Deeksha,

    Here is the working link for you

    import  Web  from 'sp-pnp-js';
    
    let web = new Web(this.context.pageContext.site.absoluteUrl);
    let curruser = web.currentUser.get().then(function(res){ 
    console.log(res.Title); })

    https://sharepoint.stackexchange.com/questions/222091/spfx-how-to-get-current-user-properties-with-pnp-js-core


    Please remember to click Mark as Answer on the answer if it helps you

    Wednesday, February 14, 2018 9:04 PM
  • Hi, 

    It is not working for me i have used like this.

    let web = new Web(this.context.pageContext.site.absoluteUrl);
    let curruser = web.currentUser.get().then(function(res){
    console.log(res.Id); })


    Thursday, February 15, 2018 5:14 AM
  • Hi,

    We can use the PnP Js to create a custom function named "GetUserPropeties" like below to get current user Profile information in SPFX Web Part:

    Total Ts file looks like:

    import * as React from 'react';
    import * as ReactDom from 'react-dom';
    import * as pnp from 'sp-pnp-js'
    import { Version } from '@microsoft/sp-core-library';
    import {
      BaseClientSideWebPart,
      IPropertyPaneConfiguration,
      PropertyPaneTextField
    } from '@microsoft/sp-webpart-base';
    
    import * as strings from 'HelloWorldWebPartStrings';
    import AppBar from 'material-ui/AppBar';
    import HelloWorld from './components/HelloWorld';
    import { IHelloWorldProps } from './components/IHelloWorldProps';
    
    export interface IHelloWorldWebPartProps {
      description: string;
    }
    
    
    
    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
    
      private GetUserProperties(): void {  
        pnp.sp.profiles.myProperties.get().then(function(result) {  
          var userProperties = result.UserProfileProperties;  
          var userPropertyValues = "";  
          userProperties.forEach(function(property) {  
              userPropertyValues += property.Key + " - " + property.Value + "<br/>";  
          });  
         console.log(userPropertyValues) ;  
      }).catch(function(error) {  
          console.log("Error: " + error);  
      });  
    }  
     
      public render(): void {
        const element: React.ReactElement<IHelloWorldProps > = React.createElement(
          HelloWorld,
          {
            description: this.properties.description
          }
    
        );
        
        ReactDom.render(element, this.domElement);
        this.GetUserProperties();
      }
    
      protected get dataVersion(): Version {
        return Version.parse('1.0');
      }
      
     
      protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
          pages: [
            {
              header: {
                description: strings.PropertyPaneDescription
              },
              groups: [
                {
                  groupName: strings.BasicGroupName,
                  groupFields: [
                    PropertyPaneTextField('description', {
                      label: strings.DescriptionFieldLabel
                    })
                  ]
                }
              ]
            }
          ]
        };
      }
    }

    Debug with VSCode, it will list all the property collection of Current User like below:

    More information:

    Retrieve User Profile Properties Using SPFx And PnP JS In SharePoint Online

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.



    Thursday, February 15, 2018 9:01 AM
  • Hi,

    I wrote above function and while debugging getting all information of current logged in user but how to store first name or any one of its value in one of the field in SP list, the field which stores name of currently logged in user is of person or group type thats why i am facing issue, when i am making that field as single line of text then I am getting name in it.

    Best Regards,

    Deeksha 

    Tuesday, February 20, 2018 11:55 AM
  • Hi Deeksha,

    For User Field, we need to specify the Current User Id to set value, refer the demo from GitHub:

    For example, having a user field which named testuser, then we can set it like below with current user Id:

      public render(): void {
        const element: React.ReactElement<ITestwebpartProps > = React.createElement(
          Testwebpart,
          {
            description: this.properties.description
          },
          pnp.sp.web.currentUser.get().then(result => {
            pnp.sp.web.lists.getByTitle("MyList").items.add({
              Title: "test",
              testuserId: result.Id
          }).then(i => {
              console.log(i);
          });
        }
      ));
        ReactDom.render(element, this.domElement);
      }

    Data Response in VSCode Console:

    Results in the List UI:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.



    Tuesday, February 20, 2018 3:26 PM
  • Hi,

    Thank you, It helped!

    Wednesday, February 21, 2018 7:43 AM