Display Current User Name in SPFx Client Side Web Part

In this SPFx tutorial, we will discuss, how to display current user name in SPFx client side web part in SharePoint Online. It will also display current date and a welcome message.

Recently, we working on a project in which the requirement is to display the user name with a welcome message like “Welcome Alex” in a client side web part in SharePoint Online. When a user logged in user opens the SharePoint web part page, it will also display the current date in the format “Today is 13 March 2023, a Monday”. So it looks like below:

spfx webpart with logged in user name and current date — spfx web part with logged-in user name and current date

Let’s see how to create a spfx web part to display the SharePoint site logged-in user name and current date using SharePoint framework.

Table of Contents

Create an SPFx web part to display the logged-in user name and current date

Here we will see how to create a client side web part that will display the SharePoint site logged-in user name and the current date.

Follow the below steps to create a web part that will display the logged-in user name and current date on the SharePoint web part page.

First, create a project directory with the help of mkdir command and then navigate to the directory with the help of the cd command. Write the below command in the command prompt.

mkdir userprofile
cd userprofile

Then to create a project, run the below command inside the directory.

yo @microsoft/sharepoint

Now yeoman Sharepoint generator will ask you a list of questions like the below related to creating a project or solution.

Let’s create a new SharePoint solution.
? What is your solution name? userprofile (here provide the solution name or select the suggested name by yeoman)
? Which type of client-side component to create? WebPart (here generator will show you 4 options i.e. Webpart, Extension, Library, Adaptive Card Extension)
? What is your Web part name? UserProfile (provide the web part name or choose the suggested name generated by the yeoman SharePoint generator)
? Which template would you like to use? React (here yeoman SharePoint generator will show you 3 options i.e. Minimal, No Framework, React)

webpart with logged in user name and current date using spfx — web part with logged in user name and current date using spfx

Now yeoman SharePoint generator will take a little bit of time to install all the dependencies, required for the project. After that, you can see the below success message.

As our spfx webpart solution is ready, so now open the code editor to play with the code that will fulfill the requirements. Write the below code to open the code editor.

code . (code space dot)

Below you can see our project structure:

Display Current User Name in SPFx Client Side Web Part — project structure of spfx web part to display logged-in user name and current date

Navigate to the Userprofile.tsx file which is located in the ‘src\webparts\userProfile\components\UserProfile.tsx’. Here we will define a constant variable that stores the current date. Define it inside the ‘render()’ above the return ().

const currentDate= new Date()

In the same file .tsx file, replace the return() code with the below code :

return (
      <section className={`${styles.userProfile} ${hasTeamsContext ? styles.teams : ''}`}>
        <div className={styles.welcome}>
          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
          <h2>Welcome, {escape(userDisplayName)}. Today is {currentDate.toLocaleString('en-IN', {day: 'numeric', month: 'long', year: 'numeric'})}, a {currentDate.toLocaleString('en-IN', {weekday: 'long'})}</h2>
        </div>
      </section>
    );

In the above code, inside <h2> tag,

We have defined the logged-in user name, by using userDisplayName props inside the escape method. Whenever you will create a project, userDisplayName properties are in use, so we have used them in our project. Basically userDisplayName property value dynamically changes, based on the logged-in into SharePoint site.
And to display the current date like 23 March 2023, for this we have used this code:”{currentDate.toLocaleString(‘en-IN’, {day: ‘numeric’, month: ‘long’, year: ‘numeric’})}“.
Then to display the ‘Wednesday’ we have used this set of code: {currentDate.toLocaleString(‘en-IN’, {weekday: ‘long’})}.

Once you modify the code to get the required result, now provide the SharePoint site URL to the workbench, where we can see our solution.

For this, open the serve.json file which is located in the ‘config\serve.json’. Now provide the URL of the SharePoint site in the ‘initial page’ properties like below.

Get Current User Name in SPFx Client Side Web Part — Sharepoint customized web part to display logged-in user name and current date

Once you configure the workbench, run the below command to compile and run the project on the local server.

gulp serve

The project is running on the local server, here click on the + icon to add the web part.

Now select the solution (Userprofile) under the Local section, then you can see the webpart, which displays the current user name with the current date.

spfx web part to display user name and current date — spfx web part to display the user name and current date

This is how we can create our customized webpart that will display the username and current date using SPFx.

Conclusion

In this SPFx tutorial, we learned how we can display the SharePoint site logged-in user name with the current date in the webpart by using spfx.