Streamlining SharePoint Online: A Successful Project Implementation

The architecture followed a robust multilayered approach:

• Presentation Layer: SPFx app with multiple web parts deployed on specific SharePoint site pages, delivering a user-friendly interface.
• Business and Service Layer: A Web API for handling business logic and service operations.
• Data Layer: SQL Server database for efficient data storage and retrieval.

Additionally, Microsoft Graph was leveraged to interact with Microsoft 365 services, facilitating access to user profiles, group data, and other resources essential for the application's functionality.
The project involved making changes to front-office features, but since the back-office changes required for these updates were outside our responsibility, we had to rely on another team to implement them. This dependency caused some tasks to take longer, though the implementation adhered to the planned timeline overall.

The implementation’s architecture was already established and functioning, ensuring seamless integration of new features:

1. SPFx App:

• Consisted of multiple web parts.
• Built using React for responsive and interactive user interfaces.
• Developed and managed in Visual Studio Code with Git and Azure DevOps handled centralized version control.

2. Web API:

• Acted as the bridge between SharePoint and the database.
• Hosted in Azure App Service, ensuring scalability and reliability.

3. SQL Server Database:

• Stored critical project data.
• Connected securely to the Web API.

4. Microsoft Graph Integration:

• Enabled the application to fetch and interact with data from Microsoft 365 services.
• Supported features like user profile retrieval and group membership validation.

The project followed a phased approach, with tasks divided into clearly defined requirements and priorities agreed upon collaboratively between the teams.

Challenges:

• Since the back-office was managed by a different team, adjustments to its logic caused slight delays in some tasks.
• Underestimated effort for certain feature refinements.

Successes:

• Efficient collaboration with the team ensured smooth interactions and quick issue resolution.
• Some tasks were completed ahead of schedule due to proactive planning and easier resolution of potential issues and features.

Tools and Development Workflow:

• Development Tools: Visual Studio Code and Git Bash.
• Version Control: Git and Azure DevOps for CI/CD pipelines.
• Languages and Frameworks: TypeScript, React, CSS, and HTML for SPFx web parts.
• Deployment: Azure App Service for hosting the Web API and SQL Server database integration.
• APIs and Services: Microsoft Graph for interacting with Microsoft 365 services and retrieving user and group data.

The project’s success demonstrates the power of a well-structured, multilayered architecture combined with modern development practices. While challenges arose, effective team collaboration and adherence to agile methodologies ensured the project stayed on track. This implementation displays how SharePoint Online, integrated with robust back-end systems and Microsoft Graph, can provide a seamless user experience.

by Cláudia Costa, Senior Consultant at Luza