AdaptiveCardHost - Added "context" property

Author: fabiofranzini

docs/documentation/docs/controls/AdaptiveCardHost.md

@@ -11,6 +11,19 @@ Three custom themes have been created for Microsoft Teams to emulate the colors
 
 All Elements and Actions of Adaptive Cards have been redefined using Fluent UI React, both for SharePoint and Microsoft Teams (in this case the "Fluent UI Northstar" library is not used), adding and improving features that are not managed in Microsoft's implementation of the "adaptivecards-fluentui" library (Theme support for example).
 
+Thanks to the "context" property that allows you to pass the SPFx context, whether the "data" property is passed or not, a new field called @context will be injected into the data object.
+
+This allows, using Adaptive Cards templating syntax, to access to the context informations using the following fields (for more information on these fields, refer to the [BaseComponentContext](https://docs.microsoft.com/en-us/javascript/api/sp-component-base/basecomponentcontext) class):
+- "aadInfo": property "aadInfo" of the SPFx context object.
+- "cultureInfo": "cultureInfo" property of the SPFx context object.
+- "legacyPageContext": "legacyPageContext" property of the SPFx context object.
+- "list": property "list" of the SPFx context object.
+- "listItem": property "listItem" of the SPFx context object.
+- "site": property "site" of the SPFx context object.
+- "user": "user" property of the SPFx context object.
+- "web": "web" property of the SPFx context object.
+- "theme": property "theme" from the current theme applied to the card.
+
 The Adaptive Cards version supported is 1.5, by using the 'adaptivecards' npm package version 2.10.0.
 
 Here is an example of the control in action inside a Web Part:
@@ -32,17 +45,18 @@ import { AdaptiveCardHost, IAdaptiveCardHostActionResult, AdaptiveCardHostThemeT
 
 - Example on use the `AdaptiveCardHost` control with only required properties:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with all properties:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   data={data}
@@ -63,62 +77,68 @@ import { AdaptiveCardHost, IAdaptiveCardHostActionResult, AdaptiveCardHostThemeT
     hostCapabilities.setCustomProperty("CustomPropertyName", Date.now);
   }}
   isUniqueControlInPage={true}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with SharePoint Theme:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   themeType={AdaptiveCardHostThemeType.SharePoint}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with SharePoint Theme "Section Variation" ('this.props.theme' is the theme that come from the Web Part) */):
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   theme={this.props.theme}
   themeType={AdaptiveCardHostThemeType.SharePoint}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with Teams "Default" Theme:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   themeType={AdaptiveCardHostThemeType.Teams}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with Teams "Dark" Theme:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   themeType={AdaptiveCardHostThemeType.TeamsDark}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
 - Example on use the `AdaptiveCardHost` control with Teams "High Contrast" Theme:
 
-```TSX
+```TypeScript
 <AdaptiveCardHost
   card={card}
   themeType={AdaptiveCardHostThemeType.TeamsHighContrast}
   onInvokeAction={(action) => alert(JSON.stringify(action))}
   onError={(error) => alert(error.message)}
+  context={this.props.context}
 />
 ```
 
@@ -141,6 +161,7 @@ The `AdaptiveCardHost` control can be configured with the following properties:
 | onSetCustomActions | (registry: CardObjectRegistry<Action>) => void | no | Invoked to manage Actions to the current Adaptive Card instance. |
 | onUpdateHostCapabilities | (hostCapabilities: HostCapabilities) => void | no | Invoked to manage the HostCapabilities object like add custom properties. |
 | isUniqueControlInPage | boolean | no | Set to true if you want to use only one instance of this control per page, false for multiple controls. This affects how CSS variables are set. |
+| context | BaseComponentContext | yes | Set the context from SPFx component. |
 
 Interface `IAdaptiveCardHostActionResult`
 

src/controls/adaptiveCardHost/AdaptiveCardHost.tsx

@@ -12,7 +12,7 @@ import {
     useRef
 } from 'react';
 import './AdaptiveCardHost.css';
-import { convertFromPartialThemeToTheme, createDarkTeamsHostConfig, createDefaultTeamsHostConfig, createHighContrastTeamsHostConfig, createSharePointHostConfig, initProcessMarkdown, setFluentUIThemeAsCSSVariables } from './AdaptiveCardHostHelpers';
+import { convertFromPartialThemeToTheme, createDarkTeamsHostConfig, createDefaultTeamsHostConfig, createHighContrastTeamsHostConfig, createSharePointHostConfig, initProcessMarkdown, injectContextProperty, setFluentUIThemeAsCSSVariables } from './AdaptiveCardHostHelpers';
 import { createDarkTeamsTheme, createDefaultTeamsTheme, createHighContrastTeamsTheme, getDefaultFluentUITheme, setFluentUIThemeAsHostCapability, useLocalFluentUI } from './fluentUI';
 import { AdaptiveCardHostThemeType, IAdaptiveCardHostActionResult, IAdaptiveCardHostProps } from './IAdaptiveCardHostProps';
 
@@ -201,14 +201,9 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps) => {
 
         let currentAdaptiveCard = adaptiveCardInstanceRef.current;
         try {
-            let cardPayload;
-            if (props.data) {
-                let template = new Template(props.card);
-                cardPayload = template.expand(props.data);
-            }
-            else {
-                cardPayload = props.card;
-            }
+            let template = new Template(props.card);
+            let evaluationContext = injectContextProperty(props.data, fluentUIThemeInstanceRef.current, props.context);
+            let cardPayload = template.expand(evaluationContext);
 
             currentAdaptiveCard.parse(cardPayload, serializationContextInstanceRef.current);
 
@@ -232,4 +227,4 @@ export const AdaptiveCardHost = (props: IAdaptiveCardHostProps) => {
             />
         </ThemeProvider>
     );
-};
+};

src/controls/adaptiveCardHost/AdaptiveCardHostHelpers.ts

@@ -1,7 +1,8 @@
 import { LocalizedFontFamilies } from '@fluentui/theme/lib/fonts';
 import { mergeThemes } from '@fluentui/theme/lib/mergeThemes';
-import { IReadonlyTheme } from '@microsoft/sp-component-base';
+import { BaseComponentContext, IReadonlyTheme } from '@microsoft/sp-component-base';
 import { ActionAlignment, AdaptiveCard, TextColor, TextWeight } from 'adaptivecards';
+import { IEvaluationContext } from 'adaptivecards-templating/lib/template-engine';
 import * as markdown from 'markdown-it';
 import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
 import { getDefaultFluentUITheme } from './fluentUI';
@@ -1024,4 +1025,27 @@ const setCSSVariables = (domElement: HTMLElement, prefix: string, obj: any) => {
             domElement.style.setProperty(`--${prefix}-${key}`, obj[key]);
         });
     }
+};
+
+export const injectContextProperty = (dataObject: { "$root": object }, theme: ITheme, spfxContext: BaseComponentContext): IEvaluationContext => {
+    let evaluationContext: IEvaluationContext;
+    let context = {
+        theme: theme,
+        aadInfo: (spfxContext?.pageContext?.aadInfo) ? JSON.parse(JSON.stringify(spfxContext?.pageContext?.aadInfo)) : undefined,
+        cultureInfo: (spfxContext?.pageContext?.cultureInfo) ? JSON.parse(JSON.stringify(spfxContext?.pageContext?.cultureInfo)) : undefined,
+        legacyPageContext: (spfxContext?.pageContext?.legacyPageContext) ? JSON.parse(JSON.stringify(spfxContext?.pageContext?.legacyPageContext)) : undefined,
+        list: (spfxContext?.pageContext?.list) ? JSON.parse(JSON.stringify(spfxContext?.pageContext?.list)) : undefined,
+        listItem: (spfxContext?.pageContext?.listItem) ? JSON.parse(JSON.stringify(spfxContext?.pageContext?.listItem)) : undefined,
+        site: (spfxContext?.pageContext?.site) ? JSON.parse(JSON.stringify(spfxContext?.pageContext?.site)) : undefined,
+        user: (spfxContext?.pageContext?.user) ? JSON.parse(JSON.stringify(spfxContext?.pageContext?.user)) : undefined,
+        web: (spfxContext?.pageContext?.web) ? JSON.parse(JSON.stringify(spfxContext?.pageContext?.web)) : undefined
+    };
+
+    if (dataObject) {
+        evaluationContext = { $root: { ...dataObject?.$root, "@context": context } };
+    } else {
+        evaluationContext = { $root: { "@context": context } };
+    }
+
+    return evaluationContext;
 };

src/controls/adaptiveCardHost/IAdaptiveCardHostProps.ts

@@ -1,3 +1,4 @@
+import { BaseComponentContext } from '@microsoft/sp-component-base';
 import { Action, CardElement, CardObjectRegistry, HostCapabilities } from 'adaptivecards';
 import { IPartialTheme, ITheme } from 'office-ui-fabric-react/lib/Styling';
 
@@ -77,6 +78,10 @@ export interface IAdaptiveCardHostProps {
      * Set to true if you want to use only one instance of this control per page, false for multiple controls. This affects how CSS variables are set.
      */
     isUniqueControlInPage?: boolean;
+    /**
+     * Set the context from SPFx component.
+     */
+    context: BaseComponentContext;
 }
 
 export enum AdaptiveCardHostThemeType {

src/webparts/controlsTest/components/ControlsTest.tsx

@@ -2244,6 +2244,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             onInvokeAction={(action: IAdaptiveCardHostActionResult) => { alert(JSON.stringify(action)); }}
             onError={(error: Error) => { alert(error.message); }}
             isUniqueControlInPage={true}
+            context={this.props.context}
           />
         </div>