feat: use uischema to define Flow Actions by yeze322 · Pull Request #3858 · microsoft/BotFramework-Composer

This repository was archived by the owner on Jul 9, 2025. It is now read-only.

...es/adaptive-flow/__tests__/adaptive-flow-renderer/utils/widgetExpressionEvaluator.test.ts

-Original file line number
+Diff line change
@@ -0,0 +1,96 @@
+    // Copyright (c) Microsoft Corporation.
+    // Licensed under the MIT License.
+    import {
+      evaluateWidgetProp,
+      ActionContextKey,
+    } from '../../../src/adaptive-flow-renderer/utils/expression/widgetExpressionEvaluator';
+    const evaluate = evaluateWidgetProp;
+    describe('evaluateWidgetProp()', () => {
+      it('can evaluate string interpolation pattern.', () => {
+        expect(evaluate('${a}, ${b}', { a: 1, b: 2 })).toEqual('1, 2');
+      });
+      it('return origin input when input non-expression string.', () => {
+        ['hello', 'action.x', '= Result Value', '= ActivityId'].forEach((x) => {
+          expect(evaluate(x, {}, ActionContextKey)).toEqual(x);
+        });
+      });
+      it('can evaluate basic value access pattern.', () => {
+        expect(evaluate('=action.x', { action: { x: 1 } })).toEqual(1);
+        // Notes: Expression engine behavior. 'null' will be read as 'undefined'
+        expect(evaluate('=action.x', { action: { x: null } })).toEqual(undefined);
+        expect(evaluate('=action.x', { action: {} })).toEqual(undefined);
+        expect(evaluate('=action.x', { action: { x: undefined } })).toEqual(undefined);
+        expect(evaluate('=action.x', { action: { x: false } })).toEqual(false);
+        // Convert to string
+        expect(evaluate('=string(action.x)', { action: { x: null } })).toEqual(undefined);
+        expect(evaluate('=string(action.x)', { action: { x: undefined } })).toEqual(undefined);
+        expect(evaluate('=string(action.x)', { action: { x: false } })).toEqual('false');
+        // Case-insensitive
+        expect(evaluate('=action.x', { action: { x: 'x' } })).toEqual('x');
+        expect(evaluate('=action.x', { action: { X: 'x' } })).toEqual('x');
+      });
+      it('can evaluate expressions with foreach', () => {
+        expect(evaluate('=foreach(a.items, x=>x)', { a: { items: [] } })).toEqual([]);
+        expect(evaluate('=foreach(a.items, x=>x)', { a: { items: [1, 2] } })).toEqual([1, 2]);
+        expect(evaluate('=foreach(a.items, x=>x+1)', { a: { items: [1, 2] } })).toEqual([2, 3]);
+        expect(evaluate('=foreach(a.items, x=>x)', { a: { items: ['1'] } })).toEqual(['1']);
+        expect(evaluate('=foreach(a.items, x=>x+1)', { a: { items: ['1'] } })).toEqual(['11']);
+        expect(evaluate('=foreach(a.items, x=>x+"1")', { a: { items: ['1'] } })).toEqual(['11']);
+      });
+      it('can evaluate expressions with if', () => {
+        expect(evaluate('=if(a.x, "1", "2")', { a: { x: true } })).toEqual('1');
+        expect(evaluate('=if(a.x, "1", "2")', { a: { X: true } })).toEqual('1');
+        expect(evaluate('=if(a.x, "1", "2")', { a: { x: '' } })).toEqual('1');
+        expect(evaluate('=if(a.x, "1", "2")', { a: { x: 0 } })).toEqual('1');
+        expect(evaluate('=if(a.x<1, "1", "2")', { a: { x: 0 } })).toEqual('1');
+        expect(evaluate('=if(a.x, "1", "2")', { a: { x: false } })).toEqual('2');
+        expect(evaluate('=if(a.x, "1", "2")', { a: {} })).toEqual('2');
+        expect(evaluate('=if(a.x, "1", "2")', { a: { x: null } })).toEqual('2');
+        expect(evaluate('=if(a.x, "1", "2")', { a: { x: undefined } })).toEqual('2');
+      });
+      it('can evaluate string template pattern.', () => {
+        expect(evaluate('=concat(a.x, " and ", a.y)', { a: { x: 'x', y: 'y' } })).toEqual('x and y');
+        expect(evaluate('=concat(a.x, " and ", a.y)', { a: { X: 'X', Y: 'Y' } })).toEqual('X and Y');
+        expect(evaluate('=concat(a.x, " and ", a.y)', { a: { x: 1 } })).toEqual('1 and ');
+        expect(evaluate('=concat(string(a.x), " and ", string(a.y))', { a: { x: { val: 1 }, y: [1] } })).toEqual(
+          '{"val":1} and [1]'
+        );
+      });
+      describe('can evaluate real Flow use case', () => {
+        it('in Foreach.', () => {
+          expect(
+            evaluate('=concat("Each value in ", coalesce(action.itemsProperty, "?"))', {
+              action: { itemsProperty: 'user.names' },
+            })
+          ).toEqual('Each value in user.names');
+          expect(evaluate('=concat("Each value in ", coalesce(action.itemsProperty, "?"))', { action: {} })).toEqual(
+            'Each value in ?'
+          );
+        });
+        it('in SetProperties.', () => {
+          expect(
+            evaluate('=foreach(action.assignments, x => concat(x.property, " : " ,x.value))', {
+              action: {
+                assignments: [
+                  { property: 'a', value: 1 },
+                  { property: 'b', value: '2' },
+                ],
+              },
+            })
+          ).toEqual(['a : 1', 'b : 2']);
+        });
+      });
+    });

...ser/packages/adaptive-flow/__tests__/adaptive-flow-renderer/utils/widgetRenderer.test.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,10 +3,9 @@ @@
     import React from 'react';
     import { render } from '@bfc/test-utils';
-    import { WidgetComponent, FlowEditorWidgetMap } from '@bfc/extension-client';
+    import { WidgetComponent, FlowEditorWidgetMap, FlowWidget } from '@bfc/extension-client';
     import { renderUIWidget, UIWidgetContext } from '../../../src/adaptive-flow-renderer/utils/visual/widgetRenderer';
-    import { FlowWidget } from '../../../src/adaptive-flow-renderer/types/flowRenderer.types';
     const renderWidget = (schema: FlowWidget, widgetsMap: FlowEditorWidgetMap, context: UIWidgetContext) => {
       const TestResult = () => renderUIWidget(schema, widgetsMap, context);
@@ Expand Down @@

Composer/packages/adaptive-flow/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,8 @@ @@
         "@bfc/ui-shared": "*",
         "@emotion/core": "^10.0.27",
         "@emotion/styled": "^10.0.27",
+        "adaptive-expressions": "4.10.0-preview-147186",
+        "botbuilder-lg": "^4.10.0-preview-150886",
         "create-react-class": "^15.6.3",
         "d3": "^5.9.1",
         "dagre": "^0.8.4",
@@ Expand Down @@

Composer/packages/adaptive-flow/src/adaptive-flow-editor/AdaptiveFlowEditor.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -8,10 +8,9 @@ import React, { useRef, useMemo, useEffect } from 'react';
  
    import isEqual from 'lodash/isEqual';

    import formatMessage from 'format-message';

    import { DialogFactory } from '@bfc/shared';

    import { useShellApi, JSONSchema7 } from '@bfc/extension-client';

    import { useShellApi, JSONSchema7, FlowUISchema, FlowWidget } from '@bfc/extension-client';

    import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';

    import { FlowSchema, FlowWidget } from '../adaptive-flow-renderer/types/flowRenderer.types';

    import { NodeEventTypes } from '../adaptive-flow-renderer/constants/NodeEventTypes';

    import { AdaptiveDialog } from '../adaptive-flow-renderer/adaptive/AdaptiveDialog';

    @@ -105,7 +104,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ onFocus, onBlur, schema
  
        customSchemas: customActionSchema ? [customActionSchema] : [],

      };

      const customFlowSchema: FlowSchema = nodeContext.customSchemas.reduce((result, s) => {

      const customFlowSchema: FlowUISchema = nodeContext.customSchemas.reduce((result, s) => {

        const definitionKeys: string[] = Object.keys(s.definitions);

        definitionKeys.forEach(($kind) => {

          result[$kind] = {

    @@ -114,7 +113,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({ onFocus, onBlur, schema
  
          } as FlowWidget;

        });

        return result;

      }, {} as FlowSchema);

      }, {} as FlowUISchema);

      const divRef = useRef<HTMLDivElement>(null);

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/adaptive/AdaptiveDialog.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -5,9 +5,8 @@
  
    import { jsx } from '@emotion/core';

    import { FC, Fragment } from 'react';

    import get from 'lodash/get';

    import { FlowEditorWidgetMap as NodeWidgetMap } from '@bfc/extension-client';

    import { FlowEditorWidgetMap, FlowUISchema } from '@bfc/extension-client';

    import { FlowSchema } from '../types/flowRenderer.types';

    import { EditorEventHandler } from '../constants/NodeEventTypes';

    import { RendererContext, DefaultRenderers, RendererContextData } from '../contexts/RendererContext';

    import builtinSchema from '../configs/builtinSchema';

    @@ -31,10 +30,10 @@ export interface AdaptiveDialogProps {
  
      onEvent: EditorEventHandler;

      /** UI schema to define how to render a sdk $kind */

      schema: FlowSchema;

      schema: FlowUISchema;

      /** All available widgets to render a node */

      widgets: NodeWidgetMap;

      widgets: FlowEditorWidgetMap;

      renderers?: Partial<RendererContextData>;

    }

Composer/packages/adaptive-flow/src/adaptive-flow-renderer/configs/builtinSchema.ts

-Original file line number
+Diff line change
@@ -0,0 +1,49 @@
+    // Copyright (c) Microsoft Corporation.
+    // Licensed under the MIT License.
+    import { SDKKinds } from '@bfc/shared';
+    import { FlowUISchema } from '@bfc/extension-client';
+    const builtinVisualSDKSchema: FlowUISchema = {
+      default: {
+        widget: 'ActionHeader',
+      },
+      custom: {
+        widget: 'ActionHeader',
+        colors: { theme: '#69797E', color: '#FFFFFF' },
+      },
+      [SDKKinds.IfCondition]: {
+        widget: 'IfConditionWidget',
+        nowrap: true,
+        judgement: {
+          widget: 'ActionCard',
+          body: '=coalesce(action.condition, "<condition>")',
+        },
+      },
+      [SDKKinds.SwitchCondition]: {
+        widget: 'SwitchConditionWidget',
+        nowrap: true,
+        judgement: {
+          widget: 'ActionCard',
+          body: '=coalesce(action.condition, "<condition>")',
+        },
+      },
+      [SDKKinds.Foreach]: {
+        widget: 'ForeachWidget',
+        nowrap: true,
+        loop: {
+          widget: 'ActionCard',
+          body: '=concat("Each value in ", coalesce(action.itemsProperty, "?"))',
+        },
+      },
+      [SDKKinds.ForeachPage]: {
+        widget: 'ForeachWidget',
+        nowrap: true,
+        loop: {
+          widget: 'ActionCard',
+          body: '=concat("Each page of ", coalesce(action.pageSize, "?"), " in ", coalesce(action.page, "?"))',
+        },
+      },
+    };
+    export default builtinVisualSDKSchema;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: use uischema to define Flow Actions #3858

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!