When you add a List web part or Document Library web part on modern pages to show the (filtered) list items or documents, it shows See all link at the top right corner of web part as shown in below image. By clicking this See all link, users can navigate to the full list/library page.

But sometimes when you are showing the filtered list views or custom created list views on modern pages, you don’t want other users to access the original list/library and switch between views or modify existing list views. Previously there was no SharePoint out of the box way to hide the See all link from web parts. But, recently Microsoft has added a new option to Show/Hide “See all” button in list/library web part property pane settings.

Show/Hide See All link from SharePoint list/library web parts

Follow below steps to show/hide See all button from list web part in SharePoint online:

1. Go to SharePoint modern page where you have added the list/library web part.

2. Open the page in Edit mode by clicking Edit button from top right corner.

3. Click on the Edit web part button against your list/library web part.

4. Toggle Show “See all” button option and change it to Hide “See all” Button as shown in below image.

5. Click Apply button.

6. Click on Publish/Republish button to save the changes to the modern page.

Here’s how the list/library web part will look after you hide the “See all” link from web part settings:

Microsoft is finally introducing an audience targeting feature for the Quick links web part in SharePoint Online, Roadmap. By using audience targeting, you can promote links to specific groups of people. This is useful when you want to present information that is especially relevant to a particular group of people.

With the release of this update, you will be able to target specific links to different audiences, helping you provide more personalized experiences on SharePoint pages.

Key Points:

1. The feature is disabled on the web part by default, so nothing is required to prepare for its availability.
2. To use audience targeting, you must first enable audience targeting on the web part from property pane, and then edit each quick link to specify the audience to target.
3. Currently you can only use AD groups or Microsoft 365 groups to target audiences. If you want to use SharePoint groups for audience targeting, vote on this UserVoice.
4. You can target maximum 50 audiences (AD groups or Microsoft 365 groups) per link.

How to Use Audience Targeting:

As I mentioned earlier, to use audience targeting, you must first enable audience targeting on the web part from property pane, and then edit each quick link to specify the audience to target.

Enable audience targeting:

1. Go to your modern SharePoint page and open it in Edit mode by clicking Edit button from top right corner.
2. Select the Quick links web part and click on Edit web part (Pencil icon) button.
3. From the property pane, change the toggle for Enable audience targeting to On.

Set the target audiences for each link:

1. From Page Edit mode, click on the link you want to edit, and select the Edit (Pencil icon) on the link.
2. Under Audiences to target, type or search for the group(s) you want to target.

Below Audiences to target, you can see the maximum limit of 50 audiences and number of audiences left to target.

On the page, while you’re in edit mode, you can see which links have audiences selected by looking for the audience icon next to the link as shown below:

Once you publish the page, audience targeting will take effect.

Output:

The SharePoint page will show filtered links based on targeted audiences. A user who is not a part of the audience targeted for Learning & Development link will see the quick links web part as shown below:

Note: If you’ve selected an audience group that you recently created or changed, it may take some time to see targeting applied for that group.

I hope you liked this blog. Give your valuable feedback & suggestions in the comments section below and share this blog with others.

In my earlier blog, add modern calendar to a SharePoint online page, I explained how you can show modern calendar list view on SharePoint Online modern pages using Embed web part. I used embed web part because modern calendar views were not supported in SharePoint out of the box List web part at that time.

Fortunately, Microsoft is rolling out a new feature which will support modern calendar views in List web part. This feature is associated with Microsoft 365 Roadmap ID 70750. In this blog we will see how to add the modern calendar view to a SharePoint online page using List web part.

1. First of all, create a modern calendar list view by following this blog: Create a modern Calendar view in SharePoint Online/Microsoft Lists.

2. Go to your modern SharePoint page and open it in Edit mode by clicking Edit button from top right corner.

3. Open web part toolbox and search for List.

4. Click on List web part from Search results. It will add the List web part to your modern page.

5. Initially the List web part shows all the lists available on your SharePoint site. Click on the list name where you created a modern calendar view OR you can also select a list from web part configuration property pane which opens when you click on Edit web part button

6. By default the List web part will load the default view of your SharePoint list. If you have set newly created Calendar view as your default view, skip this step. Else, select your calendar view from Switch view options dropdown as shown below:

7. Click on Publish/Republish button to save the changes.

You will see the final output on SharePoint page as shown below:

Learn more

• Microsoft Lists: Calendar view item drag and drop
• Unscheduled Pane in Microsoft Lists Calendar Views

Tech giant Microsoft is introducing Embed web part in SharePoint spaces which will allow users to show SharePoint pages or HTML page embed content as an interactable overlay on a SharePoint space. Space viewers will see a thumbnail image in the 3D space that can be viewed as a fully functional HTML overlay when selected by the user. Space viewers that are using a mixed reality headset will only see the thumbnail when selecting the web part unless they return to the browser to interact with the embedded content.

This new feature release will allow users to add content such as:

• Microsoft Forms
• The PowerPoint embed viewer
• SharePoint Pages
• Power Apps

This message is associated with Microsoft 365 Roadmap ID 70732.

Release Timeline

• Targeted release (selected users and entire organization): Roll out will begin in early November and expect to be complete by mid-November.
• Standard release: Roll out will begin in mid-November and expect to be complete by late November.

How this will affect your organization

SharePoint spaces authors will see a new embed web part available in the spaces web part toolbox while designing a SharePoint space.

SharePoint spaces authors will see embed web part as shown in below image:

What you need to do to prepare

You might want to notify your users about this new capability and update your training documentation as appropriate.

Learn more

• SharePoint spaces
• SharePoint spaces to be available by default in New menu

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

Since SharePoint sites in modern SharePoint are pretty visual, one of the common requirements on employee-facing sites and Intranet Homesites is to add graphics and images. There are a few options available in SharePoint Online, and one of my favorite ones I want to highlight is the ability to add an Image Gallery Web Part. So in this article, I would like to explain how it works.

What is Image Gallery Web Part?

Image Gallery Web Part is a web part that allows you to add multiple images to your page. Moreover, it allows you to change the display options of those images as well.

How to add images to your SharePoint page using the Image Gallery Web Part

1. Edit the Page, then find a web part called Image gallery, from the list of available out-of-the-box web parts
2. Once you add it to the page, you will notice a side panel where you can configure the settings of the Image gallery web part. You can either upload any images or source them from the document library on your site.
3. In case you oped to add images on the fly, you click the Add images button
4. Then, upload the images from your PC or any other location
5. You can also display the images from a document library on your site. This allows you to put all the images into that library, and this web part will draw them from there and display them on your page. You can optionally click the Include subfolders checkbox to include images from the folders within a document library. You can also specify how many images will be displayed on a page at a given time.
6. Finally, you can also choose from one of the three available layouts (Brick, Grid, and Carousel). If you choose Carousel, users must manually cycle through the images on your page.

The post How to add images to your SharePoint page using the Image Gallery Web Part appeared first on SharePoint Maven.

A frequent request for company intranets is to display and share information about the Team Members. This could be a Welcome New Team Members Page on a Human Resources site, welcoming new employees, or a page to display a roster of external users, say a list of Board Members for a nonprofit organization. So in this article, I want to show you a few ways to display department or team Members on a SharePoint Site.

Option 1: People Web Part

The first option involves the use of the People Web Part. I blogged about it previously. The idea is that it automatically displays information from your Active Directory and shows you the user’s name, photo, role, contact information, etc. In addition, you can switch the layout to large and add additional information about the user. Once again, I covered it all in this post.

Pros

• Nice and easy to set up

Cons

• It only works for users in your Active Directory (internal users, it does not work for external users)
• This option assumes that Active Directory is maintained by IT and contains user photos and other relevant information
• Limited area to add a description about the user (255 characters max)
• Limited display options

Option 2: Image Gallery Web Part

If you want more control over the layout, you may try using the Image Gallery web part. This way, you are getting a nice visual photo of each employee and an area to add some text below the photo.

Pros

• Nice and easy to set up, visually appealing
• Multiple layouts available
• Ability to manually upload user photos or dynamically display them from the document library
• Works for both internal and external team members (since we are not relying on Active Directory)

Cons

• The Name and additional information (Title and Caption, respectively) do not appear under the photo unless you choose the Carousel layout. With the other two layouts, they will only appear after you click on a photo/image.

Option 3: SharePoint Pages and Quick Links

OK, this is my favorite option, because it delivers the best experience for you and the users. It does take a bit more time to set it up, but, hey, at least you will not need to pretend in front of your boss that you are doing some actual work 😊. Plus, your boss will think you are smart. Let me walk you through this option.

The idea behind this option is that every member gets their own page containing a photo and text/description of them. On the homepage, there will be a Quick Links Web Part to link to each and every team member’s page. I documented step-by-step instructions on how to set it all up in this article.

Pros

• Looks amazing. Visually appealing.
• Works for both internal and external team members (since we are not relying on Active Directory)

Cons

• It takes a bit of time to set up, but totally worth it

Option 4: Gallery View on a List

Believe it or not, there is another cool option that exists to display department/team members, and this one involves Microsoft Lists. The idea is that you would maintain the users in the Custom List and then present the data using the Gallery view. The setup is pretty simple, and I actually documented how to create a Gallery View in this article.

List View

Gallery View

Pros

• Looks amazing as well
• Works for both internal and external team members. If you just have internal members, you can rely on the People Column to draw the name of the members from the Active Directory. If you have external members, you can create a Text Column to capture their names.
• Ability to add additional information/metadata to a user “card” (by adding extra columns to a list). For example, you can add the date of birth or city/town they are from.
• Good options in terms of changing the order of the fields/format via the Gallery Card Designer

Cons

• It takes a bit of time to set up
• Limited area for the text on the cards; you have to click on the photo to get more information

The post 4 ways to display Department or Team Members on a SharePoint Site appeared first on SharePoint Maven.

As your users create teams, sites, lists, and libraries in your Microsoft 365 environment, the content becomes somewhat decentralized. There is nothing wrong with this model; it is just a fact and a byproduct of modern flat architecture. That said, there are use cases where you must display content from one site (i.e., a specific list or document library) on another site. In today’s post, I want to share a trick allowing you to display lists and libraries from other SharePoint sites.

To make this happen, we will rely on the mighty Embed Web Part I blogged about a while back. The web part allows you to embed content from other websites, that are not part of Microsoft 365 (i.e., CRM dashboard, videos from video hosting platforms, etc.). However, today we will use the same web part to embed content from another SharePoint site.

Here is a use case. I have a document library of company policies residing on one of my SharePoint sites, and I would like to embed it on the Quality Site as well.

Policies Library on a Policies Site

How to display lists and libraries from other SharePoint sites

1. Navigate to another site where you want to embed a list or library, and click the Edit button to edit the page
2. Click the plus sign to add web parts and choose Embed Web Part
3. Paste the URL of the Document Library inside the Embed window
4. In the step above, make sure to enter the full URL of the actual view of a list or library you want to embed. Otherwise, it will give you an error message when you try to display lists and libraries from other SharePoint sites.
5. Click Republish to publish the changes to the page
6. The library will now be displayed on another site
7. You can use the above technique to display lists from one site on another as well.

The post How to display lists and libraries from other SharePoint sites using the Embed widget appeared first on SharePoint Maven.

One of the frequent requirements on Intranet sites is to display some sort of charts/graphs. In addition to spicing up the look and feel of a page, the charts provide some valuable insight and information. Usually, the data and corresponding graphs/reports reside in Power BI or 3^rd party databases. However, sometimes you just need to display a really simple graph, based on just a few data points. Moreover, with the revamp of the Microsoft Lists app, lists have become a popular choice for data storage among SharePoint and Teams users. So in case your data resides in a list, there is a hidden gem in SharePoint called Quick Chart Web Part, which will allow you to build and display a graph on a SharePoint page. Let me explain.

What is a List?

Before I explain how to create a chart, it is important to understand the components that are necessary to make this happen. In case you are wondering what a Microsoft List is – check out this post first.

What is a Chart?

If you are wondering what a chart is, I suggest you return to the third grade of elementary school. 😀. Yep, you probably should not have stared out the window, when the teacher explained those concepts. Thank God for Wikipedia.

What is a Quick Chart Web Part?

A Quick Chart Web Part is an out-of-the-box Web Part that exists in SharePoint and allows us to either build simple charts “on the fly” or display them based on data in the SharePoint list (the topic of this post). I introduced the Quick Chart Web Part in one of my previous blog posts.

Use Case

I have a list of Projects stored in a custom list, as shown below. In addition to project names, I have start and end dates, budget, and project status columns.

How to create a Chart from a list in SharePoint Online

1. On the site where the list was created, click the Edit button in the upper-right-hand-corner to edit the page
2. Add a new section and choose the column layout you would like to have (I suggest 1 column, so there is plenty of real estate on a screen for the chart)
3. Click the plus sign, then choose Quick Chart from the list of available web parts
4. You will see the web part added to the page. Click the pencil icon to configure its settings.
5. On the right-hand side that opens up, choose the chart type. Two choices are available: Column (Bar) Chart and Pie Chart.
6. Next, choose the source of data. In our case, select the radio button next to “Get data from a list or library on the site.” Then, choose the column from a list that will represent values (Y-Axis) and the column that will represent X-Axis. In my case, the Title (Project Name) is X-Axis, and the Budget is Y-Axis). In case you get an error: No list available on this site, read the Notes section at the bottom of this article.
7. Next, type in the labels for the Axis above. You may type any text that makes sense to you/chart you have.
8. Finally, give your chart a name (in my case, I called it Project Dashboard)
9. Click Republish in the upper-right-hand corner to republish the page.

Important Notes about Quick Chart Web Part in SharePoint Online

Below, I would like to summarize a few important notes and limits when it comes to using list data with Quick Chart Web Part in SharePoint Online.

Data from Document Libraries

Quick Chart Web Part is not limited to getting data from just the list. You can also get data from document libraries as well! Here is an example/use case. I have a Document Library called Invoices, where I track the amounts and statuses of project invoices.

If I choose the Invoices library as a source and select a File name for X-Axis and Amount for Y-Axis…

…it will produce a nice graph/chart as well.

Limit of 50 data points on a list

If your list or library contains more than 50 items, you will get the following warning when connecting them via the Quick Chart Web Part: Only 50 items in this list will be displayed. Sorting options may affect which items are displayed. Essentially what that means is that Quick Chart Web Part only allows a max of 50 data points to be displayed.

“No list available on this site” error message

You might see the following error message when trying to connect your chart with the List: No list available on this site. Alternatively, it will allow you to get data from other lists and libraries but won’t display your list on a site in a source of data drop-down column.

The reason for this is that in order for the list or library to be a valid source of data for Quick Chart Web Part, it must have at least 1 (one) text column (for X-Axis), and either 1 (one) number or currency column (for Y-Axis). Unless both of the above conditions are satisfied, you will get the above error message/scenario.

The post How to create a Chart from a list in SharePoint Online appeared first on SharePoint Maven.