SharePoint Web Parts: Complete Configuration Guide

SharePoint Web Parts: Building Dynamic, Interactive Pages

Web parts are the building blocks of SharePoint modern pages. Each web part provides a specific function, from displaying text and images to aggregating content from across your tenant. Choosing the right web parts and configuring them effectively is the difference between a useful SharePoint page and a cluttered, confusing one.

This guide covers all major web parts available in SharePoint Online, their configuration options, use cases, and performance considerations.

---

Web Part Categories

Content Web Parts

Text is the most fundamental web part. Supports rich formatting including headings, bold, italic, lists, tables, links, and code snippets. Use heading hierarchy correctly for accessibility and search optimization.

Image displays images from SharePoint, OneDrive, web URLs, or stock image search. Configure alt text for accessibility, image sizing, captions, and optional links. Always set alt text on every image.

File Viewer embeds Office documents, PDFs, and other files directly in the page. Users can view the document without downloading it. Supports Word, Excel, PowerPoint, PDF, and Visio files.

Divider adds a horizontal line between sections of content. Use to create visual separation without adding a new page section.

Spacer adds vertical whitespace between web parts. Adjustable height for fine-tuning page layout.

Dynamic Content Web Parts

Highlighted Content is the most versatile dynamic web part. It queries SharePoint content and displays results in a card, list, filmstrip, or compact layout. Filter by content type, site, library, managed metadata, or date range. Use this web part to create dynamic pages that automatically surface relevant content.

Configuration options:

• Source: This site, a specific site, all sites in the hub, or all sites in the tenant
• Filter: Document type, managed metadata, date range, or custom query
• Sort: Most recent, most popular, managed property
• Layout: Cards, list, carousel, filmstrip, or compact

News aggregates news posts from specified sources. Configure sources (this site, hub sites, specific sites, recommended), number of items, and layout (top story, list, hub news, carousel, or tiles).

Events displays events from a SharePoint events list. Shows upcoming events with date, time, location, and description.

Sites displays a list of sites the user follows, suggested sites, or sites from a specific hub.

Interactive Web Parts

Quick Links displays a collection of links in configurable layouts. Layouts include Compact, List, Tiles, Button, Grid, and Filmstrip. Each link can have a custom icon, description, and audience targeting.

Call to Action displays a prominent button-style link. Use for primary actions like Contact Us, Submit Request, or Get Started.

Hero displays 1 to 5 items in a visually prominent layout. Each item has an image, title, description, and link. Use on landing pages as the first visual element.

Countdown Timer displays a countdown to a specific date. Use for event launches, deadline reminders, or milestone tracking.

People and Communication

People displays team members or contacts with photos, titles, and contact links from Azure AD profiles. Add specific people by name or use a dynamic group.

Yammer/Viva Engage embeds a Viva Engage feed in the page. Shows community conversations, highlights, or specific topics.

Microsoft Forms embeds a survey or quiz directly in the page. Users can complete the form without leaving SharePoint.

Stream embeds video content from Microsoft Stream. Configure autoplay, start time, and sizing.

Data and Visualization

List displays a SharePoint list with its current view configuration. Users can interact with the list (filter, sort, add items) directly on the page.

Document Library embeds a library view with full interaction capabilities.

Quick Chart creates simple bar or pie charts from manually entered data or SharePoint list data. Suitable for simple metrics and KPIs.

Power BI embeds a Power BI report or dashboard. Requires Power BI Pro or Premium licensing for viewers. Provides interactive data visualization within SharePoint pages.

Embed displays content from external sources using iframe embedding. Supports websites, apps, and third-party tools that provide embed codes.

---

Web Part Configuration Best Practices

Property Panel

Every web part has a property panel accessible by clicking the edit (pencil) icon on the web part. The property panel contains all configuration options organized in tabs.

Data Source Configuration

For dynamic web parts (Highlighted Content, News, Events), carefully configure data sources. Overly broad sources (all sites in tenant) return too many results and slow page load. Scope to the smallest source that provides the needed content.

Layout Selection

Choose layouts based on the content type and available space. Use card layouts for visual content with images. Use list layouts for text-heavy content with many items. Use carousel and filmstrip layouts for browsable collections. Use compact layouts when space is limited.

Audience Targeting

Many web parts support audience targeting. When enabled, you can show different content to different user groups based on Azure AD security groups or Microsoft 365 groups. Use audience targeting on Quick Links to show role-specific navigation, on News to show department-specific announcements, and on Highlighted Content to surface role-relevant documents.

---

Custom Web Parts with SPFx

When to Build Custom

Build custom SPFx web parts when no out-of-box web part meets the requirement, when you need integration with external APIs, when complex business logic is required, or when you need a completely custom UI.

SPFx Development Basics

SPFx (SharePoint Framework) web parts are built with TypeScript and React (recommended) or other JavaScript frameworks. They run in the browser context and interact with SharePoint through the SPFx API and Microsoft Graph.

```typescript

// Basic SPFx web part structure

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import * as React from 'react';

import * as ReactDom from 'react-dom';

export default class CustomWebPart extends BaseClientSideWebPart {

public render(): void {

const element: React.ReactElement = React.createElement(

CustomComponent,

{

context: this.context,

properties: this.properties,

}

);

ReactDom.render(element, this.domElement);

}

}

```

Deployment

Deploy SPFx web parts through the SharePoint App Catalog (tenant-wide) or a site-level app catalog (site-specific). Tenant-wide deployment makes the web part available on all sites. Site-level deployment limits availability to specific sites.

---

Performance Optimization

Web Part Count

Each web part adds to page load time. Keep the total number of web parts per page under 15. Pages with 20 or more web parts will have noticeably slower load times, especially on mobile devices and slower connections.

Data-Heavy Web Parts

Web parts that query SharePoint data (Highlighted Content, News, List) make API calls during page load. Minimize the number of data-heavy web parts per page. Configure them to return the minimum number of items needed.

Third-Party Web Parts

Evaluate third-party SPFx web parts for performance impact before deploying to production. Check JavaScript bundle size (should be under 500 KB), number of external API calls, and rendering performance on mobile devices. Request performance benchmarks from the vendor.

Image Optimization

Web parts that display images (Hero, Image, News) benefit from optimized image files. Resize images to the display size before uploading. Use JPEG for photos and PNG for graphics. Compress images to reduce file size without visible quality loss.

---

Web Part Governance

Approved Web Part List

Maintain a list of approved web parts for your organization. Include all out-of-box web parts that are allowed, approved third-party web parts with vendor and support information, custom SPFx web parts with owner and documentation, and blocked web parts (such as Embed for security reasons).

Web Part Usage Auditing

Periodically audit which web parts are used across your sites. Identify unused custom web parts that can be retired, security-sensitive web parts (Embed, Script Editor) that need review, and performance-heavy web parts on high-traffic pages.

---

Frequently Asked Questions

Can I restrict which web parts site owners can use?

Yes. Tenant administrators can block specific web parts from being used. Use the Set-SPOTenant cmdlet with the DisabledWebPartIds parameter to block specific web part IDs.

Do web parts work in Teams?

SharePoint pages embedded in Teams tabs display all web parts. However, some web parts may have reduced functionality in the Teams context (for example, navigation web parts may not work as expected).

Can I copy web parts between pages?

Yes. Use the copy and paste shortcuts (Ctrl+C, Ctrl+V) to copy web parts between pages on the same site. Cross-site web part copying is supported for most web part types.

---

For help designing SharePoint pages with the right web part strategy, contact our team for a page design assessment. We build SharePoint page experiences for organizations where user engagement and information architecture directly impact business outcomes.

Enterprise Implementation Best Practices

In our 25+ years of enterprise SharePoint consulting, we have built hundreds of custom SharePoint solutions using the SharePoint Framework, and the development practices that produce maintainable, performant, and secure solutions differ markedly from practices that create technical debt. SPFx development requires enterprise software engineering discipline, not just functional code.

• Establish a Development Environment Standard: Every developer on your team should work with a consistent development environment including Node.js version, Yeoman generator version, and toolchain configuration. Use a shared development tenant with representative data rather than developing against production. Document your environment setup in a runbook that enables new developers to become productive within hours rather than days.

• Implement Automated Testing From the Start: SPFx solutions that ship without automated tests become unmaintainable as complexity grows. Implement unit tests for all business logic using Jest, integration tests for SharePoint API interactions using mock frameworks, and end-to-end tests for critical user workflows. Target 80 percent code coverage as a minimum standard for production deployment approval.

• Follow the PnP Patterns and Practices: The Microsoft 365 Patterns and Practices community provides battle-tested libraries, controls, and architectural patterns that dramatically reduce development time and improve solution quality. Use PnP JS for SharePoint API interactions, PnP React controls for consistent UI components, and PnP provisioning templates for environment configuration.

• Design for Performance and Accessibility: Every SPFx web part must meet performance budgets and accessibility standards. Implement lazy loading for heavy components, minimize bundle sizes through tree shaking and code splitting, and test against WCAG 2.1 AA accessibility standards. Performance and accessibility are not post-development optimizations but architectural requirements that inform design decisions.

• Implement CI/CD Pipelines for Deployment: Manual deployment of SPFx solutions to production environments is error-prone and unauditable. Implement continuous integration pipelines that run tests and quality checks on every commit, and continuous deployment pipelines that package and deploy approved solutions to the app catalog through a governed release process.

Governance and Compliance Considerations

Custom SharePoint Framework development introduces compliance obligations related to code security, data handling, application lifecycle management, and the governance of custom solutions deployed across your tenant.

For HIPAA-regulated organizations, SPFx solutions that access or display protected health information must implement the same security controls as native SharePoint components including access logging, encryption compliance, and minimum necessary data retrieval. Custom web parts must not cache PHI in browser local storage, must not transmit PHI to unauthorized external services, and must maintain audit trails for all data access operations.

Financial services organizations must subject SPFx solutions to the same change management, testing, and operational controls required for other business applications under SOC 2. Implement code review processes that include security assessment, maintain deployment audit trails, and ensure that custom solutions do not create data handling pathways that fall outside your compliance control environment.

Government organizations must ensure that custom code complies with applicable security frameworks, has undergone appropriate security review, and does not introduce dependencies on unauthorized external services or data storage locations.

Establish a custom solution governance framework that requires security code review before production deployment, mandates automated testing including security scanning, defines data handling standards for custom solutions, and assigns ongoing maintenance responsibility with defined SLAs. Include custom SharePoint solutions in your annual penetration testing scope and your regular compliance assessments. Our SharePoint development specialists build enterprise-grade solutions with security and compliance integrated into every phase of the development lifecycle.

Ready to build custom SharePoint solutions with enterprise-grade quality? Our development specialists have delivered hundreds of SPFx solutions for organizations with demanding requirements for performance, security, and maintainability. Contact our team for a development consultation, and discover how our SharePoint consulting services can extend your platform with custom capabilities.

Common Challenges and Solutions

Organizations implementing SharePoint Web Parts consistently encounter obstacles that, if left unaddressed, undermine adoption and erode stakeholder confidence. Drawing on two decades of enterprise SharePoint consulting, these are the challenges we see most frequently and the proven approaches for overcoming them.

Challenge 1: Content Sprawl and Information Architecture Degradation

Over time, SharePoint Web Parts environments accumulate redundant, outdated, and trivial content that degrades search relevance and confuses users. Without proactive content lifecycle management, the signal-to-noise ratio deteriorates and user trust in the platform erodes. The resolution requires a structured approach: establishing automated retention policies that flag content for review after defined periods of inactivity, combined with content owner accountability structures that assign clear responsibility for each site collection and library. Organizations that address this proactively report 40 to 60 percent fewer support tickets within the first 90 days of deployment. Establishing a dedicated governance committee with representatives from IT, compliance, and business stakeholders ensures ongoing alignment between technical configuration and organizational objectives.

Challenge 2: Compliance and Audit Readiness Gaps

SharePoint Web Parts implementations in regulated industries often lack the audit trail depth and policy enforcement rigor required by frameworks such as HIPAA, SOC 2, and GDPR. Retroactive compliance remediation is significantly more expensive and disruptive than building compliance into the initial design. We recommend embedding compliance requirements into the information architecture from day one. Configure Microsoft Purview retention labels, DLP policies, and audit logging before deploying content, and validate compliance posture through regular internal audits. Tracking these metrics through SharePoint health dashboards provides early warning indicators that allow administrators to intervene before minor issues become systemic problems affecting enterprise-wide productivity.

Challenge 3: Inconsistent Governance Across Business Units

When different departments implement SharePoint Web Parts independently, inconsistent naming conventions, metadata schemas, and security configurations create silos that undermine cross-functional collaboration and complicate compliance reporting. The most effective mitigation strategy involves centralizing governance policy definition while allowing controlled flexibility at the departmental level. A hub-and-spoke governance model balances enterprise consistency with departmental autonomy. Enterprises operating in regulated industries such as healthcare and financial services must pay particular attention to this challenge because compliance violations carry significant financial and reputational consequences. Regular audits conducted quarterly at minimum help organizations maintain alignment with evolving regulatory requirements and internal policy updates.

Challenge 4: Migration and Legacy Content Complexity

Organizations transitioning legacy content into SharePoint Web Parts often underestimate the complexity of mapping old structures, metadata, and permissions to modern architectures. Failed migrations erode user confidence and create parallel systems that duplicate effort. Addressing this requires conducting thorough pre-migration content audits that classify and prioritize content based on business value. Invest in automated migration tools that preserve metadata fidelity and permission integrity while providing detailed validation reports. Organizations that invest in structured change management programs achieve adoption rates 35 percent higher than those relying on organic discovery alone. Executive sponsorship combined with department-level champions creates the organizational momentum necessary for sustained success.

Integration with Microsoft 365 Ecosystem

SharePoint Web Parts does not operate in isolation. Its value multiplies when connected to the broader Microsoft 365 ecosystem, creating unified workflows that eliminate context switching and reduce manual data transfer between applications.

Microsoft Teams Integration: SharePoint Web Parts content surfaces directly in Teams channels through embedded tabs and adaptive cards, giving team members instant access to relevant documents and dashboards without leaving their collaborative workspace. Teams channels automatically provision SharePoint document libraries, which means sharepoint web parts configurations and content flow seamlessly between collaborative conversations and structured document management. Users can surface SharePoint content directly within Teams tabs, reducing the friction that typically causes adoption to stall.

Power Automate Workflows: Build approval workflows that route SharePoint Web Parts content through structured review chains, automatically notifying approvers and escalating overdue items to maintain process velocity. Automated workflows triggered by SharePoint events such as document uploads, metadata changes, or approval completions eliminate repetitive manual tasks. Organizations typically automate 15 to 25 processes within the first quarter, saving an average of 8 hours per week per department. These automations also create audit trails that satisfy compliance requirements for regulated industries.

Power BI Analytics: Visualize SharePoint Web Parts usage patterns and adoption metrics through Power BI dashboards that update automatically, giving leadership real-time visibility into platform health and user engagement. Connecting SharePoint data to Power BI dashboards provides real-time visibility into content usage patterns, adoption metrics, and operational KPIs. Decision makers gain actionable intelligence without requiring manual report generation, enabling faster response to emerging trends and potential issues.

Microsoft Purview and Compliance: Apply sensitivity labels to SharePoint Web Parts content automatically based on classification rules, ensuring that confidential and regulated information receives appropriate protection throughout its lifecycle. Sensitivity labels, data loss prevention policies, and retention schedules configured in Microsoft Purview extend automatically to sharepoint web parts content. This unified compliance framework ensures that governance policies apply consistently across the entire Microsoft 365 environment rather than requiring separate configuration for each workload. For organizations subject to HIPAA, SOC 2, or FedRAMP requirements, this integrated approach significantly reduces compliance management overhead.

Getting Started: Next Steps

Implementing SharePoint Web Parts effectively requires more than technical configuration. It demands a strategic approach grounded in your organization's specific business requirements, compliance obligations, and growth trajectory. The difference between a deployment that delivers measurable ROI and one that becomes shelfware often comes down to the quality of upfront planning and expert guidance.

Begin with a focused assessment of your current SharePoint environment. Evaluate your existing information architecture, permission structures, content lifecycle policies, and user adoption patterns. Identify gaps between your current state and the target state required for successful sharepoint web parts implementation. This assessment typically takes 2 to 4 weeks and produces a prioritized roadmap that aligns technical work with business outcomes.

Our SharePoint specialists have guided organizations across healthcare, financial services, government, and education through hundreds of successful implementations. We bring deep expertise in SharePoint architecture, governance frameworks, and compliance alignment that accelerates time to value while minimizing risk.

Ready to move forward? Contact our team for a complimentary consultation. We will assess your environment, identify quick wins, and develop a phased implementation plan tailored to your organization's needs and timeline. Whether you are starting from scratch or optimizing an existing deployment, our enterprise SharePoint consultants deliver the expertise and accountability that Fortune 500 organizations demand.