SPFX ACE - running on Viva Connection Dashboard on Teams app (WebView or Teams APP MAC) the sdk property object of context (AdaptiveCardExtensionContext) is undefined

[joaojmendes]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

macOS

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version. 1.21.1
• Node.js version v22.14.0

Describe the bug / error

SPFX ACE - running on Viva Connection Dashboard on Teams (WebView or Teams APP MAC), the sdks property object of context (AdaptiveCardExtensionContext) is undefined.

I'm trying to get the current theme applied to the Teams to use on my Controls. Please take a look at my code.

  const hasTeamsContext = context.sdks?.microsoftTeams?.teamsJs !== undefined;
   console.log('context', context);
  if (hasTeamsContext) {
    // get teams theme
    const teamsContext =
      await context?.sdks?.microsoftTeams?.teamsJs?.app?.getContext();
    console.log('teamsContext', teamsContext);
    // If the context is available, determine the theme based on the app info
    if (teamsContext) {
     console.log('teamsContext.app', teamsContext.app);
      const teamsTheme = teamsContext.app?.appInfo.theme || "default";
      switch (teamsTheme) {
        case "dark":
          return teamsDarkTheme;
        case "contrast":
          return teamsHighContrastTheme;
        case "default":
          return teamsLightTheme;
        default:
          return teamsLightTheme; // Fallback to light theme
      }
    }
  }

the ...context.sdks is undefined.

here the printScreen of context on the console log.

On team's mobile app works fine.

Steps to reproduce

You need to have an ACE that uses HTML QuickView or React Control that uses FluentUI 9 Theme and try to get the theme from the ACE Context to use on the controls.

Expected behavior

The sdks object on the context filled

[Ashlesha-MSFT]

Hello @joaojmendes,
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@joaojmendes,
After reviewing the details and reproducing the behavior, This appears to be a platform-specific limitation or delayed initialization of the Microsoft Teams SDK in certain host environments, particularly on macOS or WebView containers used by Teams. The context.sdks object is not guaranteed to be initialized in all environments when the ACE loads.

[joaojmendes]

@Ashlesha-MSFT Thank you very much for the quick answer. Would you happen to have any suggestions for a workaround to get the theme applied to the teams?