Step-by-Step Guide to Enabling and Using Web Parts in SharePoint Online

The Tech Platform
10 min readFeb 15, 2024

--

In the dynamic world of digital collaboration, SharePoint Online stands as a powerful tool that allows businesses to share and manage content, knowledge, and applications to empower teamwork, quickly find information, and seamlessly collaborate across the organization. Web Parts are reusable components that display content on SharePoint sites, and they can be customized to cater to specific business needs. This article will guide you through the process of enabling Web Parts in SharePoint Online and provide a comprehensive overview of how to use them effectively.

Steps to enable and use Web Part in SharePoint
Step-by-Step Guide to Enabling and Using Web Parts in SharePoint Online

Table of Contents:

  1. What are Web Parts in SharePoint?
  2. Types of Web Parts available in SharePoint Online
  3. Enabling custom Web Parts in SharePoint
  4. Using Out-of-the-box Web Parts
  5. Conclusion

Let’s begin!

What are Web Parts in SharePoint?

Web Parts in SharePoint Online are segmental components that shape the basic building block of a page on SharePoint sites. They are elements in a page that display content. It’s like puzzle pieces that you assemble to create a site page. Under the hood, these web parts are small applications that store and display a certain type of content (it differs depending on the web part). You can use them to embed pictures, videos, documents, and other content onto your page, create forms for collecting data, and more.

Types of Web Parts available in SharePoint Online

There are many built-in Web Parts in SharePoint, like document libraries, calendars, and task lists. However, there are also third-party web parts available on Microsoft 365 that you can use on your site.

Here is the list of the available web parts in SharePoint online:

  1. Bing Maps: You can use Bing Maps to display a map on your page.
  2. Button: This web part allows you to add a button to your page with your label and link.
  3. Call to Action: This web part enables you to create a call to action button for users.
  4. Code Snippet: If you need to display code on your page for some reason, then the code snippet web part is the solution.
  5. Countdown Timer: This web part allows you to add a countdown timer to your page.
  6. Divider: This web part allows you to visually divide web parts into sections.
  7. Document Library: This web part allows you to show a document library on your page.
  8. Embed: This web part allows you to insert an iframe to your page.
  9. Events: This web part allows you to show upcoming events on your page.
  10. Group Calendar: This web part allows you to show a group calendar on your page.
  11. Hero: This web part allows you to display up to five items with images, text, and links.
  12. Highlighted Content: This web part allows you to display content that meets certain criteria.
  13. Image: This web part allows you to insert an image on your page.
  14. Image Gallery: This web part allows you to share collections of pictures on a page.
  15. Link: This web part allows you to add a link to your page.
  16. List: This web part allows you to display a list from your site on a page.
  17. News: This web part allows you to display a set of news items.
  18. People: This web part allows you to display a group of people on your page.
  19. Quick Chart: This web part allows you to add a simple chart to your page.
  20. Quick Links: This web part allows you to show a list of links on your page.
  21. Site Activity: This web part allows you to show recent activity on your site.
  22. Text: This web part allows you to add text to your page.
  23. Video: This web part allows you to insert a video on your page.
  24. Weather: This web part allows you to show the current weather on your page.
  25. World Clock: This web part allows you to show the time in different locations worldwide.

and more…

Enabling Custom Web Parts in SharePoint Online

To enable Custom Web Part in SharePoint Online:

STEP 1: Go to Settings in the SharePoint admin center, and sign in with an account that has admin permissions for your organization.

STEP 2: At the bottom of the page, select the “classic settings page”.

Enable Web Parts in SharePoint Online

STEP 3: Under Custom Script, select:

  • Allow users to run custom script on personal sites.
  • Allow users to run custom script on self-service created sites.
Enable Web Parts in SharePoint Web Parts (2)

Please note that you should know the security implications before allowing custom scripts on sites in your organization.

Using Out-of-the-box Web Parts

Out-of-the-box web parts in SharePoint Online are pre-configured components that you can use to customize your SharePoint pages with a variety of content ranging from text and images to dynamic content from across Microsoft 365.

Here are some of them:

  1. Embed web part: Allows you to display content on your page from sites that allow embedding.
  2. Markdown web part: Allows you to add text to your page and format it using Markdown language.
  3. Text web part: Allows you to add and format text and tables on a page easily.
  4. Button web part: Easily add a button to your page with your label and link.
  5. Call to action web part: Creates a button with a call to action for users.
  6. Weather web part: Shows the current weather on your page.
  7. World clock web part: Shows the time in different locations worldwide.
  8. Highlighted Content Web Part: This web part allows you to display dynamic content based on content type, filtering, and sorting.
  9. File Viewer Web Part: This web part allows you to display files directly on your SharePoint pages.
  10. Sites Web Part: This web part allows you to display sites in a card or a list layout.
  11. Lists Web Part: This web part allows you to display lists on your SharePoint pages.

Markdown Web Part

The Markdown Web Part in SharePoint Online offers a convenient way to incorporate formatted text using Markdown syntax directly into your pages. Markdown is a lightweight markup language that allows you to easily add formatting elements to plaintext documents.

To use the Markdown Web part, navigate to your SharePoint page and click “Edit”.

After that click on “+” and select “Markdown” from the list.

Add Markdown Web Part in SharePoint

After adding the Markdown Web Part, you’ll see a code compiler where you can write Markdown syntax directly. Write your Markdown code in the compiler. You can include various formatting elements such as headings, lists, links, and more.

Select Markdown Web Part in SharePoint

For example, to add a heading, a list, and a link to your SharePoint page using Markdown, you can write code like this:

Enter code for Markdown Web Part in SharePoint

Click on “Edit” to see a reference to markdown syntax to add various formatting elements such as paragraphs, links, images, etc.

Edit Markdown Web Part in SharePoint

Button Web Part

The button web part is useful for guiding users to important resources, documents, or other pages. It provides a visually distinct and clickable element that can be easily customized to suit your needs.

To use, click “+” and select “Button” from the list.

Button Web Part in SharePoint

For example, you want to add a button that links to a document on your SharePoint site. here how you can do:

Label: View Document

Link: https://yoursharepointsite.com/Shared%20Documents/your-document.pdf

Alignment: Center
Edit Button Web Part in SharePoint

Call to action Web Part

The Call to Action web part in SharePoint Online allows you to create a button with a call to action for users. This web part is a great way to highlight content or an action you want your audience to take.

To utilize the Call to Action web part in SharePoint Online to create a button with a compelling call to action for users, click on the “Call to action” option from the list.

Call to action Web Part in SharePoint

Let’s say you want to add a Call to Action that links to a document on your SharePoint site.

Edit Call to action Web Part in SharePoint
Call to Action Text: Enter "View Our Latest Report" as the text for the call to action.

Background Image: Select an image that is relevant to the report by uploading or choosing from the available images.

Button Label: Set the button label to "Click Here".

Button Link: Replace "https://yoursharepointsite.com/Shared%20Documents/your-document.pdf" with the actual URL to your document.

Alignment: Choose "Center" to align the call to action button at the center of the web part.

Weather Web Part

The Weather web part in SharePoint Online allows you to show the current weather on your page. This can be useful for providing users with quick access to weather information for a specific location.

Let’s say you want to add a weather web part that shows the weather for New York.

Click the “+” icon and select “Weather”.

Weather Web Part in SharePoint

Now, you’ve added the Weather web part to your page. Now, click “Edit” to customize it to display the weather for New York in Fahrenheit:

Location: Enter "New York" as the location

Units of Temperature: Choose °F to display the temperature in Fahrenheit
Enter Location and temperature in weather Web Part in SharePoint

Highlighted Web Part

The Highlighted Content Web Part in SharePoint Online is a modern web part that dynamically displays content from various sources. This content can include documents, pages, news, videos, images, and more.

Let’s say you want to add a Highlighted Content web part that shows the most recent documents from a specific document library.

Click on the “+” icon and select “Highlighted content”.

Highlighted Web Part in SharePoint

Now, you’ve added the Highlighted Content web part to your page.

Click on the “Edit” icon to customize the display of the most recent documents from a specific document library.

In the customization pane that appears on the right side of the page:

Title: Enter “Most Recent Documents” as the title.

Highlighted Web Part in SharePoint (1)

Source: Select “A document library on this site”.

Type: Choose “Documents” from the dropdown menu.

Filter: Set the filter to “Modified by the current user” to display documents modified by the current user.

Highlighted Web Part in SharePoint (2)

Sort by: Choose “Most recent” to display the most recently modified documents first.

Layout: Select “List” as the layout to display the documents in a list format.

Highlighted Web Part in SharePoint (3)

List Web Part

The List web part in SharePoint Online allows you to display a list from your site on a page and customize it with your title, view, and even size. Types of lists you can use are custom lists, announcement lists, contact lists, and issue tracking lists. Users can view, filter, sort, and group the list, or go to the list page by clicking “See all”.

Here’s how you can use it:

Click on the “+” icon and select “List” from the list of available web parts.

List Web Part in SharePoint

Now, click “Edit” to customize the appearance and settings of the list on the SharePoint Page.

Edit List Web Part in SharePoint

From here, you can do the following customizations:

  • Title: Change the title of the List web part if needed.
  • Source: Select the list you want to display from your site. This can be a custom list, announcement list, contact list, or issue tracking list.
  • View: Choose the specific view of the list you want to display. SharePoint allows you to create multiple views for a list, such as a standard view, grouped view, or filtered view.
  • Layout: Adjust the layout of the list. You can choose from options like compact, tile, or filmstrip layout.
  • Size: Resize the web part according to your preference.
  • Toolbar: Decide whether to show or hide the toolbar for the list, which includes options for filtering, sorting, and grouping the list items.
  • See All Link: Enable or disable the “See all” link, which allows users to navigate to the full list page from the web part.

After making the desired changes, click “Apply” or “Save” to save your customizations.

Conclusion

Web Parts are key to customizing SharePoint Online. They allow for dynamic, interactive pages tailored to your needs. From basic to custom Web Parts, their effective use enhances digital collaboration and content management. Mastering Web Parts unlocks SharePoint Online’s full potential, paving the way for efficient and productive digital workspaces.

Happy Coding!

--

--

The Tech Platform
The Tech Platform

Written by The Tech Platform

Welcome to your self-owned "TheTechPlatform" where the subscription brings together the world's best authors on all Technologies together at one platform.

No responses yet