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

This SharePoint Online tutorial will show you how to create and use an anchor link on the SharePoint site page. We will also see how to build a site page on the SharePoint site.

We recently received a request to create and use an anchor link on a page while working with the SharePoint Site Pages. Before creating an anchor link on the site pages, first, we will see how to build a page on the SharePoint site.

Create a Page on the SharePoint site

SharePoint pages are simply a way to display content on a specific site. The purpose of a SharePoint page is to show SharePoint users what content is stored on the Site and how it is arranged.

To create a page on the SharePoint site, the following steps are:

• Navigate to your Home page of the SharePoint site. (Teams site or communication site).
• Click on the New > Page.

• As we are going to create a blank site page, click on Blank > Create Page.

• It will redirect to the blank page, where we need to give a Title to the page. (Ex: Human Resource Administration)
• Also, it allows customizing the title area by setting a different layout, alignment, background gradient, etc. For that, click on the Edit icon and select the options as needed.
• Similarly, while hovering over the title area, you can find another option to change the background image.

• Under the Title area or header of the SharePoint site page, we can find a section where we can add web parts, text, tables, headings, etc.

• Let’s add some text content including images on the section of the SharePoint site page.
• Also, format the text headings and subheadings with heading styles such as H1, H2, and H3. Below, I am displaying an example of a section where I have added text content including images with alignments.

Once the site page is finished, publish it to the SharePoint site. As a result, the page will available for other site users. This is how to create a build modern site page on SharePoint Online.

Add an anchor link to the SharePoint site page

By using the anchor link, we can navigate to the page where we want. To add an anchor link to the SharePoint site page, the following steps are:

• Open the site page on another tab. Here, I open the above-published page on another tab.
• While hovering the mouse, we can find a link next to the heading and subheadings.
• Copy the link from the published page.

• Reopen the page in edit mode on another tab. Select the text, where you want to place the copied link.
• For this, select the text i.e., About us > Select Hyperlink (Ctrl + K).
• A dialogue page will appear to insert the link in the Address bar as shown below. Click on Save.

Now, we can see the anchor tag is added to the selected text i.e., About us.

Similarly, let’s add an anchor link to the Career. Click on the Save button and we can see the link will be created on the Career as shown below.

Now, republish the page to the SharePoint site. We can see when the user clicks on any anchor link, it will redirect to the respective section as shown below:

This is how to add page anchor links using quick links on the SharePoint site page.

Conclusion

From this SharePoint Online Tutorial, we have learned how to create a site page on the SharePoint Online site. Also, we have learned how to add anchor links to the SharePoint site page.

You may also like:

• SharePoint Online Page properties web part
• Create SharePoint page template
• How to remove SharePoint Online Modern Page Title using PowerShell
• SharePoint redirect to another page

In this PowerShell SharePoint tutorial, we will discuss, how to check sharepoint version using PowerShell. We can easily get SharePoint version using PowerShell, which is installed on your server.

We can also know the SharePoint version installed on the server from SharePoint central administration.

We can use Windows PowerShell ISE to run PowerShell commands or also we can use Visual Studio Code to write, debug and run PowerShell scripts.

We can get the installed SharePoint version using PowerShell as well as we can get through central administration.

get SharePoint version using PowerShell

You can use the below command to know which version of SharePoint is installed on the server. Here is the command get sharepoint version using PowerShell.

Command:
get-spfarm | select BuildVersion

Result:
BuildVersion
——————
14.0.4762.1000

Command:
([Microsoft.SharePoint.Administration.SPFarm]::Local).buildversion

Result:

Major Minor Build Revision
——– ——– —— ———–
14 0 4762 1000

Check the below diagram:

This is how to check sharepoint version using PowerShell.

Check SharePoint Version from Central Admin

We can also check which version of SharePoint is installed on the server from SharePoint central administration.

Open SharePoint central administration -> Then from the System Settings click on Manage servers in this farm.

Then in the Manage servers in this farm, you will able to see the version details as shown in the fig below.

This is how to get sharepoint version from the central admin.

You may like SharePoint installation tutorials:

• SharePoint 2019 Download + FREE PDF on SharePoint 2019 Installation Steps Download & New Features
• SharePoint Server 2016 Installation FREE PDF guide
• SharePoint 2016 and SharePoint 2013 hardware and software installation requirements
• SharePoint Server 2016 installation error The username is invalid. The account must be a valid domain account
• Excel cannot connect to the SharePoint list
• SharePoint Online interview questions and answers

I hope this SharePoint Administration tutorial helps to know which version of SharePoint is installed in the SharePoint server using PowerShell as well as using SharePoint Central Administration.

Got an idea on how to get sharepoint version using PowerShell?

This Power Apps tutorial will walk you through several examples of how to use the Power Apps collection with a SharePoint list based on various scenarios.

We had a requirement while working with the Power Apps Canvas app to create a collection using the SharePoint list within the Power Apps environment.

It will also be discussed how to work with the Power Apps collection using the SharePoint list that contains the following items:

• Power Apps collection SharePoint list
• Power Apps show collection SharePoint list value
• Power Apps collection SharePoint list choice column
• Power Apps collection SharePoint list column
• Power Apps collection SharePoint list person field
• Power Apps collection SharePoint group field
• Power Apps collection SharePoint list limit
• Power Apps collect large SharePoint list
• Power Apps collection SharePoint image
• Power Apps collection SharePoint list attachments

Before working with the Power Apps collection via the SharePoint list, we recommend you read our previous article about what the Power Apps collection is and how to use it in various ways.

Power Apps collection from SharePoint list

Do you know how to make a Power Apps collection from a SharePoint list? If not, this section will show you how to use Power Apps to create a collection using data from a specific SharePoint list.

To work with this, the required steps are:

• We have created a SharePoint list called “Product Model” that contains various types of columns such as Title (Default), Purchase Date (Date and time), Ordered By (People column), Manufacturer (Choice column), and some random data as shown below:

• Prepare a blank Power Apps canvas app and connect the above SharePoint list to the canvas app.

• On the Power Apps screen, add a button control and set the Text property as “Create collection SharePoint list“
• Insert the below formula on the button’s OnSelect property. As a result, when the user clicks the button it will create a collection using the above SharePoint list data.

OnSelect = Collect(CollProductModel, 'Product Model')

Where,

1. Collect: The function is used to create a Power Apps collection
2. CollProductModel: The name of the new collection
3. ‘Product Model’: The name of the SharePoint list.

That’s it! Let’s click on the button while clicking on the Alt key. Once the button is clicked, it will create the collection within the Power Apps.

To check the collection, click on the ellipses (…) on the top bar of the Power Apps screen > Collections.

When we click on the Collections, it will redirect to the screen where we can find the collection that we have created from the SharePoint list shown below:

This is how to create the PowerApps collection from the SharePoint list.

Also Read: Power Apps Timer Control Examples

Power Apps show collection SharePoint list value

Once the collection is built, it allows us to display the collected data within the Power Apps screen. In this section, we will see how to show the Power Apps collection retrieved from the SharePoint list value.

We can display the data via a Power Apps data table or gallery control. Suppose, we are going to use the Power Apps data table control to display the above Power Apps collection that we have created, i.e., CollProductModel.

Set the Items property of the data table as CollProductModel. Add the fields to the data table. Now the collected data will be visible as shown below:

This is how to show Power Apps collection value from the SharePoint list.

Check: Power Apps Notify() function [How to use with examples]

Power Apps collection SharePoint list choice column

In this section, we will see how to create a Power Apps collection using the SharePoint choice column.

We have a choice field named “Manufacturer” on the above SharePoint list i.e., Product Model.

Let’s create a collection using the above SharePoint choice column via a button click. For this, the required steps are:

• On the Power Apps screen, add a button control.
• Set the Text as “Create collection using SP choices“.
• Insert the below expression on the button’s OnSelect property.

OnSelect = Collect(colManufactures, Choices('Product Model'.Manufacturer)) 

Where,

1. colManufactures is the name of the new collection to store the choices.
2. ‘Product Model’.Manufacturer is the name of the choice column of the SharePoint list.

• Next, add a Power Apps data table control to the screen to display the collected data ad set the Items as colManufacturers.
• Add the field from the Fields > Edit fields > +Add fields > Value.
• Initially, the data table will not display the collected data. For this, first, click on the button. As a result, it will create a collection using the SharePoint choice field.
• Then, it will display those data within the data table shown below:

This is how to create a Power Apps collection using the SharePoint list choice column.

Read: Power Apps Filter With Date Picker

Power Apps collection SharePoint list column

We can create a collection using the information from the SharePoint list column by using the Power Apps collection. whether there is only one column or several. This section will demonstrate how to use the SharePoint list column to create a Power Apps collection (s).

The steps below describe how to create the Power Apps collection using the Product Model SharePoint list mentioned above:

• On the Power Apps screen, add a button control.
• Set the Text property as “Click here to create collection“
• Insert the following expression on the OnSelect property of the

OnSelect = ClearCollect(CollListColumns, ShowColumns('Product Model', "Title", "OrderedBy"))

Where,

1. CollListColumns: The name of the new collection to store the data from the SharePoint list.
2. ‘Product Model’: The name of the SharePoint list
3. “Title”, “OrderedBy”: The name of the SharePoint list columns to create the collection.

• We can see, initially, it will create a blank collection within the Power Apps; to collect the data in the collection click on the button.
• Then add a data table to the screen and set the Items as CollListColumns.
• Add the fields from the Fields > Edit Fields > Add field.

• On the above data table, we can see it will create an error while displaying the Ordered By i.e., people column. To resolve this, click on the error icon > update the formula as below:

Text = ThisItem.OrderedBy.DisplayName

Now, it will show the display names of the respective person.

This is how to create a Power Apps collection using the SharePoint list column(s).

Also, have a look: How To Set Default Date in Power Apps Date Picker

Power Apps collection SharePoint list person field

Here, we’ll look at many approaches to creating a collection utilizing the SharePoint person field. There is a person field or people column i.e., ‘Ordered By’ within the above-mentioned SharePoint list named Product Model.

Approach 1: Create a collection using the person field

To create a collection using the person field within the Power Apps, the following steps are:

• On the Power Apps screen, add a button control.
• Set the Text property as “Create collection using People field“.
• Insert the below expression on the button’s OnSelect property.

OnSelect = Collect(CollOrderedBy, 'Product Model'.'Ordered By')

That’s it! When you click the button in the Power Apps collection area, a collection containing the data from the person field will be created.

In the above collection, each data is combined with email, display name, job title, and picture of the respective people. Suppose, if we click on the collected data, then it will appear like below:

• Let’s add a vertical gallery to display these collected data. For this, add a vertical gallery to the Power Apps screen.
• Set the Items property as CollOrderedBy and layout as Title to display only the person’s display name.
• Insert the below expression on the Text property of the Title field (under the gallery).

Text = ThisItem.'Ordered By'.DisplayName

This is how to create a power Apps collection using the SharePoint person field.

Read How to get current date in Power Apps?

Approach 2: Create a collection using the person field and another field

Apart from the “display name,” we can also display the email of the respective person from the SharePoint people field.

Assume that we will create a Power Apps collection that will display the email of the respective person and the Title field from the SharePoint list.

To work with this requirement, the following steps are needed:

• On the Power Apps screen, add a button control.
• Set the Text property as “Create Collection from person column”.
• Insert the below expression on the button’s OnSelect property.

OnSelect = ClearCollect(
    collPerson,
    ShowColumns(
        AddColumns(
            'Product Model',
            "Ordered By Email",
            'Ordered By'.Email
        ),
        "Title",
        "Ordered By Email"
    )
)

Where,

1. collPerson is the name of the new collection.
2. ‘Product Model’ is the name of the SharePoint list.
3. “Ordered By Email” is the name of the new column to store the emails.
4. ‘Ordered By’.Email is the name of the SharePoint people column with email.
5. “Title” is the name of the SharePoint field.

Let’s click on the button while clicking on the Alt key. We can see a collection named collPerson is created in the Power Apps having the Title and emails of the respective person who ordered that product.

This is how to build a PowerApps collection SharePoint list person field.

Read out: How to use Power Apps date picker

Power Apps collection SharePoint group field

In this section, we will see how to create a Power Apps collection using the SharePoint group field. That means the person field has multiple people. There is a SharePoint list named Projects having a person field i.e., ProjectHandler that allows multiple people shown below:

Now, we will create a Power Apps collection using the above SharePoint grouped person field which will come individually. For this, the following steps are:

• On the Power Apps screen, add a button control.
• Set the Text property as “Create collection from SharePoint group“.
• Insert the below expression on the button’s OnSelect property.

OnSelect = ClearCollect(
    CollProjectHandler,
    Ungroup(
        Projects,
        "ProjectHandler"
    )
)

Where,

1. CollProjectHandler is the name of the new collection.
2. Projects is the name of the SharePoint list.
3. “ProjectHandler” is the name of the SharePoint person field.

Let’s click the button to build the collection, which will contain each individual person’s details from the SharePoint grouped column.

This is how to create a Power Apps collection using the SharePoint group field.

Read How To Use Power Apps Image Control

Power Apps collection SharePoint list limit

While using a SharePoint list to create a Power Apps collection, there are some restrictions. Let’s talk about the restrictions on the Power Apps collection that were pulled from the SharePoint list.

• We will get a warning issued if the item exceeds its limit which is officially known as a Delegation warning.
• That means a data source can only have a maximum of 500 items added to it. The PowerApps won’t let us add anything if we add more than 500.
• To overcome this limit issue, we need to increase the total item limit inside the Power Apps settings. On the Power Apps screen, click on Settings > General > Data Row Limit > 1500.

The disadvantage of this method is that it only allows values up to 2000. This approach won’t work if the data source has more than 2000 items. In such a situation, we must use static data rather than continuing with this strategy.

Check out: How to use Power Apps Check Box Control

Power Apps collect large SharePoint list

If the Share Point list has a large data source, do you wonder how to establish a Power Apps collection? The Power Apps collection currently enables a maximum of 2000 entries. So how do we deal with it?

The Microsoft Power Apps community has contributed a number of responses. To learn how to generate a collection using a large data set, we advise you to click on the abovementioned website.

Power Apps collection SharePoint image

In this section, we will see how to create a Power Apps collection using the SharePoint image field. Suppose, there is an Image field named “Model Image” in the above-mentioned SharePoint list i.e., Product Model. That column contains the images of the respective product shown below:

Using the above SharePoint Image column, we will build a collection that will store all the images as well as the respective title within the Power Apps. For this, the required steps are:

• Add a button control to the Power Apps screen.
• Set the Text as Click Here.
• Insert the below expression on the button’s OnSelect property.

OnSelect = ClearCollect(
    collProductModel, 
    ShowColumns('Product Model', "Title", "ModelImage"))

Where,

1. collProductModel: The name of the new collection to store the product’s image and title.
2. ‘Product Model’: The name of the SharePoint list
3. “Title”, “ModelImage”: The name of the SharePoint list default and image columns

As soon as we press the button, a collection including the product’s titles and images is created within the Power Apps collection section.

To display the images in the Power Apps screen, add a vertical gallery to the screen. Keep the layout as Image and title.

Set the Items property as collProductModel. Now the gallery will appear as shown below:

This is how to create a Power Apps collection using the SharePoint image field.

Power Apps collection SharePoint list attachments

Do you want to build a Power Apps collection using the SharePoint list attachments field? But unfortunately, Power Apps does not allow the creation of collections using list attachments.

As an alternative, we could only access the attachments for a SharePoint List item from the Attachments control of an Edit form.

We recommend you visit the mentioned link to get ideas about building the Power Apps collection using the SharePoint list attachments.

Furthermore, you may like some more Power Apps tutorials:

• Power Apps Collection Using Excel [Complete Guide]
• Power Apps Collection Removes Items [With Examples]
• Power Apps Checkbox control within Gallery
• How To Set Default Value in Power Apps List Box Control
• Power Apps Listbox items from SharePoint list
• How to use Power Apps List box control?
• Power Apps combo box default value
• Power Apps Combo box with SharePoint list
• Power Apps combo box filter

Conclusion

From this Power Apps Tutorial, we learned all about creating a Power Apps collection using the SharePoint list based on the following scenarios such as:

• Power Apps collection SharePoint list
• Power Apps show collection SharePoint list value
• Power Apps collection SharePoint list choice column
• Power Apps collection SharePoint list column
• Power Apps collection SharePoint list person field
• Power Apps collection SharePoint group field
• Power Apps collection SharePoint list limit
• Power Apps collect large SharePoint list
• Power Apps collection SharePoint image
• Power Apps collection SharePoint list attachments