Share via

How to Implement a OneDrive-Like Personal Static Tab Sidebar in a Custom Teams Bot App Using Teams Toolkit (Including File Management and Bot Integration)

Luma Warren (Axon Enterprise) 125 Reputation points
2025-10-30T12:46:43.9833333+00:00

I want to add a persistent sidebar tab similar to the OneDrive app in Teams—a pinned personal app in the left sidebar that opens a web-based panel for file management. This panel should let users browse, upload, download, and share files, and also connect with my bot to send proactive notifications (for example, “New file uploaded” messages in chat). Basically, I’m trying to recreate the OneDrive-style experience inside Teams, but customized for my own use case, a project-specific file-sharing workflow integrated with my bot.

Project Structure:

Created a new app via Teams Toolkit: Selected "Tab + Bot" template.

Basic tab UI in tabs/src/components/Tab.js using Fluent UI React for a file list (e.g., <List> component displaying mock files).

Bot logic in bot/index.js using Bot Framework SDK, handling messages and sending Adaptive Cards.

My environment set up:

Using ngrok for tab

Updated .env.local with endpoints, BOT_ID, and BOT_PASSWORD.

Sideloaded via Teams Toolkit's "Preview in Teams" – the tab loads in the sidebar after pinning, but file operations are mock (no real Graph integration yet).

Bot responds to messages with a sample Adaptive Card linking back to the tab.

However, while the basic tab and bot work in testing. I'm struggling to match OneDrive's native feel: for sidebar pinning (manual by default), options for auto-pin or org-wide pre-pinning via App Setup Policies, plus adoption tips, and persisting tab state via localStorage/backend sessions; on file management, Graph calls like /me/drive/root/children fail with 401 despite Files.ReadWrite permissions recommend silent auth with TeamsUserCredential or explicit sign-in, with tab upload/sharing code samples, and Azure Blob alternative using SAS tokens for secure uploads, plus real-time sync via SignalR/WebSockets in Teams iframes

How can I implement a OneDrive-like personal static tab sidebar in my custom Microsoft Teams bot app using Teams Toolkit, including seamless file management via Microsoft Graph, bot integration for proactive notifications, and best practices for deployment and user pinning?

P/s:

  • I cant choose the Teams Development tag
  • Whenever Im try to input the code, it say "You are not authorized to response"
Microsoft Teams | Development

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Kudos-Ng 8,245 Reputation points Microsoft External Staff Moderator
    2025-10-30T15:16:46.9233333+00:00

    Hi Luma Warren (Axon Enterprise),

    Thank you for posting your question in the Microsoft Q&A forum. 

    Based on your description, I understand that you are trying to develop a Teams app that can be pinned by default in the side panel of the Teams client. This app combines:

    • A bot for notifications, and
    • An iframe-based tab for file management (similar to OneDrive).

    You mentioned several challenges:

    • Making the tab feel native like OneDrive, including auto-pinning in the sidebar (currently requires manual pinning).
    • Persisting tab state (suggesting localStorage or backend sessions).
    • Authenticating and calling Microsoft Graph APIs (e.g., /me/drive/root/children) for file management, which results in 401 Unauthorized errors despite having Files.ReadWrite permissions.
    • Considering alternatives like Azure Blob Storage with SAS tokens for uploads.
    • Real-time file sync using SignalR or WebSockets within Teams iframes.

    Please correct me if I misunderstood anything.

    After reviewing your manifest and researching these challenges, here are my observations:

    1) Auto-pinning the personal app

    Teams does not support automatic pinning for custom apps out-of-the-box. However, administrators can enforce pinning organization-wide using App Setup Policies in the Teams Admin Center. You can read more here: https://free.blessedness.top/en-us/microsoftteams/teams-app-setup-policies

    2) Graph API calls failing with 401

    The endpoint /me/drive/root/children requires Microsoft Graph delegated permissions such as Files.ReadWrite. I noticed you declared this permission in the resourceSpecificConsent (RSC) section of the manifest. However, this is not correct for Graph calls and Graph permissions must be configured in Azure AD App Registration under API permissions.
    Reference: https://free.blessedness.top/en-us/graph/api/driveitem-list-children?view=graph-rest-1.0&tabs=http

    3) App registration and webApplicationInfo

    From your manifest, I see webApplicationInfo.id is set to an AAD app client ID, but resource is api://botid-BOT_ID. This looks inconsistent.

    • webApplicationInfo should represent the AAD app for the tab, because the tab needs tokens to call Graph.
    • Typically, you have two parallel components:
      • Bot (with its own AAD app for Bot Framework)
      • Tab (with its own AAD app for SSO and Graph calls)
    • You can package both in one Teams app manifest, but each capability should point to the correct AAD app. Please confirm whether you are using two separate AAD app registrations or a single one for both bot and tab.

    For the remaining items (state persistence, Azure Blob + SAS, real-time sync via SignalR), these require deeper design considerations.

    I’ll follow up with more details on the remaining challenges after further research.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.