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:
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.
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)
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:
- 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.
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.
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.
You may also like:
- How to use office UI fabric react groupedlist in SPFx web part
- SPFx multiline textbox field rendering as a single line of text in SharePoint Online
- SPFx – Bind dropdown list from SharePoint list using PnP
After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (9 times). I have also worked in companies like HP, TCS, KPIT, etc.