Hybrid Work Platform: Teams, SharePoint, Viva, and Azure Communication Services

Hybrid Work Platform: Teams, SharePoint, Viva, and Azure Communication Services

Introduction

[Explain hybrid work challenges: distributed teams, knowledge sharing, engagement; integrated platform approach unifies experiences.]

Platform Architecture

Core Components Overview

Step-by-Step Guide

Step 1: SharePoint Intranet Foundation

[Design hub site architecture; provision team sites; configure search schema]

# Create hub site
Register-SPOHubSite -Site https://contoso.sharepoint.com/sites/hub -Principals "admin@contoso.com"

# Associate team sites
Add-SPOHubSiteAssociation -Site https://contoso.sharepoint.com/sites/hr -HubSite https://contoso.sharepoint.com/sites/hub

Step 2: Teams Integration

Custom Tab for SharePoint Page:

{
  "contentUrl": "https://contoso.sharepoint.com/sites/hr/_layouts/15/teamslogon.aspx?spfx=true&dest=/sites/hr/SitePages/Home.aspx",
  "websiteUrl": "https://contoso.sharepoint.com/sites/hr",
  "name": "HR Hub"
}

Step 3: Viva Connections Dashboard

Custom Adaptive Card:

{
  "type": "AdaptiveCard",
  "body": [
    {
      "type": "TextBlock",
      "text": "Team Announcements",
      "weight": "Bolder",
      "size": "Large"
    },
    {
      "type": "TextBlock",
      "text": "${announcementText}",
      "wrap": true
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "View Details",
      "url": "${detailsUrl}"
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.4"
}

Step 4: Azure Communication Services Integration

Embed Video Calling:

import { CallClient } from "@azure/communication-calling";
import { AzureCommunicationTokenCredential } from "@azure/communication-common";

const tokenCredential = new AzureCommunicationTokenCredential(userToken);
const callClient = new CallClient();
const callAgent = await callClient.createCallAgent(tokenCredential);

// Start call
const call = callAgent.startCall([{ communicationUserId: 'recipient-id' }]);

Step 5: Microsoft Graph Integration

Fetch User Presence:

var presence = await graphClient.Users[userId].Presence.Request().GetAsync();
Console.WriteLine($"Availability: {presence.Availability}");

Query SharePoint News:

var news = await graphClient.Sites["root"].Pages.Request()
    .Filter("promotionKind eq 'newsPost'")
    .Top(10)
    .GetAsync();

Step 6: Power Automate Workflow

Notify on Document Approval:

Trigger: When an item is created or modified (SharePoint)
Condition: If ApprovalStatus equals "Approved"
Action: Post message in Teams channel

Step 7: Viva Insights Integration

[Connect to Viva Insights APIs for productivity analytics; display burnout risk, collaboration patterns]

Step 8: Custom Portal with ACS

React Component Example:

import { AzureCommunicationCallAdapterProvider } from "@azure/communication-react";

<AzureCommunicationCallAdapterProvider
  userId={userId}
  displayName={displayName}
  credential={tokenCredential}
  locator={{ callId: meetingId }}>
  <CallComposite />
</AzureCommunicationCallAdapterProvider>

Security & Governance

Identity & Access

• Use Entra ID Conditional Access for device compliance
• Apply sensitivity labels to documents
• Configure guest access policies

Data Loss Prevention

New-DlpCompliancePolicy -Name "Hybrid Work Policy" -ExchangeLocation All -SharePointLocation All -OneDriveLocation All -TeamsLocation All
New-DlpComplianceRule -Name "PII Protection" -Policy "Hybrid Work Policy" -ContentContainsSensitiveInformation @{Name="Credit Card Number"} -BlockAccess $true

Monitoring

// Teams meeting quality
CallRecords
| where MediaStreams has "audio" or MediaStreams has "video"
| extend AvgJitter = toreal(MediaStreams[0].averageJitter)
| where AvgJitter > 30
| project Timestamp, Organizer, AvgJitter

User Adoption Strategy

1. Pilot Group: IT + early adopters
2. Training: Role-based learning paths
3. Champions Network: Peer support model
4. Feedback Loop: Survey + usage analytics
5. Continuous Improvement: Quarterly reviews

Performance Optimization

• Use CDN for SharePoint assets
• Implement caching for Graph API calls
• Optimize Adaptive Cards payload size
• Monitor ACS media quality metrics

Cost Management

Troubleshooting

Issue: Teams tab not loading SharePoint page
Solution: Verify app registration permissions; check CORS settings

Issue: ACS call quality poor
Solution: Review network diagnostics; check firewall rules for media ports

Issue: Viva Connections card not displaying
Solution: Validate Adaptive Card schema; check Graph API permissions

Best Practices

• Centralize governance via SharePoint hub sites
• Standardize Teams templates for consistency
• Use service health dashboard for proactive monitoring
• Implement lifecycle policies for inactive content

Key Takeaways

• Integrated platform reduces context switching for hybrid workers.
• SharePoint + Teams + Viva creates cohesive employee experience.
• Azure Communication Services extends reach to custom apps.
• Graph API unifies access to signals across Microsoft 365.

Next Steps

• Roll out Viva Connections to entire organization
• Build custom Teams app with ACS calling
• Implement advanced analytics dashboards

Additional Resources

• Microsoft Teams Platform
• Viva Connections
• Azure Communication Services
• Microsoft Graph

How will you unify your hybrid workforce experience?