diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
index 15dcc39c9f..14c303c116 100644
--- a/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/nodes/index.tsx
@@ -3,7 +3,6 @@
 
 export * from './steps/ActivityRenderer';
 export * from './steps/BeginDialog';
-export * from './steps/DefaultRenderer';
 export * from './steps/ReplaceDialog';
 export * from './steps/ChoiceInput';
 export * from './steps/TextInput';
diff --git a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/DefaultRenderer.tsx b/Composer/packages/extensions/visual-designer/src/components/nodes/steps/DefaultRenderer.tsx
deleted file mode 100644
index a40a063063..0000000000
--- a/Composer/packages/extensions/visual-designer/src/components/nodes/steps/DefaultRenderer.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-import React, { FC } from 'react';
-
-import { NodeProps } from '../nodeProps';
-import { renderSDKType } from '../../../schema/uischemaRenderer';
-import { NodeMenu } from '../../menus/NodeMenu';
-import { NodeEventTypes } from '../../../constants/NodeEventTypes';
-
-export const DefaultRenderer: FC<NodeProps> = ({ id, data, onEvent }) => {
-  return renderSDKType(data, {
-    menu: <NodeMenu id={id} onEvent={onEvent} />,
-    onClick: () => onEvent(NodeEventTypes.Focus, { id }),
-  });
-};
diff --git a/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx b/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
index ec5ef11b60..7612a8f448 100644
--- a/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
+++ b/Composer/packages/extensions/visual-designer/src/components/renderers/ElementRenderer.tsx
@@ -11,7 +11,6 @@ import { AttrNames } from '../../constants/ElementAttributes';
 import { NodeRendererContext } from '../../store/NodeRendererContext';
 import { SelectionContext } from '../../store/SelectionContext';
 import {
-  DefaultRenderer,
   BeginDialog,
   ReplaceDialog,
   ActivityRenderer,
@@ -24,6 +23,7 @@ import { ConditionNode } from '../nodes/steps/ConditionNode';
 import { ForeachDetail } from '../nodes/steps/ForeachDetail';
 import { ForeachPageDetail } from '../nodes/steps/ForeachPageDetail';
 import { NodeProps, defaultNodeProps } from '../nodes/nodeProps';
+import { UISchemaRenderer } from '../../schema/uischemaRenderer';
 
 const rendererByObiType = {
   [ObiTypes.BeginDialog]: BeginDialog,
@@ -37,7 +37,7 @@ const rendererByObiType = {
   [ObiTypes.UserAnswers]: UserInput,
   [ObiTypes.InvalidPromptBrick]: InvalidPromptBrick,
 };
-const DEFAULT_RENDERER = DefaultRenderer;
+const DEFAULT_RENDERER = UISchemaRenderer;
 
 function chooseRendererByType($type): FC<NodeProps> | ComponentClass<NodeProps> {
   const renderer = rendererByObiType[$type] || DEFAULT_RENDERER;
diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts b/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts
index 465d09b1a2..546980b1ab 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischema.types.ts
@@ -4,6 +4,8 @@
 import { FC, ComponentClass } from 'react';
 import { BaseSchema, SDKTypes } from '@bfc/shared';
 
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+
 export enum UISchemaBuiltinKeys {
   default = 'default',
 }
@@ -23,8 +25,12 @@ export interface UIWidget {
 
 export type WidgetComponent<T extends WidgetContainerProps> = FC<T> | ComponentClass<T, any>;
 
+export type WidgetEventHandler = (eventName: NodeEventTypes, eventData?: any) => void;
+
 export interface WidgetContainerProps {
+  id: string;
   data: BaseSchema;
+  onEvent: WidgetEventHandler;
   [propKey: string]: any;
 }
 
diff --git a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
index d7d5fa73f4..a088031c80 100644
--- a/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
+++ b/Composer/packages/extensions/visual-designer/src/schema/uischemaRenderer.tsx
@@ -1,12 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React from 'react';
+import React, { FC } from 'react';
 import { BaseSchema } from '@bfc/shared';
 import get from 'lodash/get';
 
 import { uiSchema } from './uischema';
-import { UIWidget, UI_WIDGET_KEY, UIWidgetProp } from './uischema.types';
+import { UIWidget, UI_WIDGET_KEY, UIWidgetProp, WidgetEventHandler } from './uischema.types';
 
 const buildWidgetProp = (data: BaseSchema, rawPropValue: UIWidgetProp) => {
   if (typeof rawPropValue === 'function') {
@@ -35,14 +35,20 @@ const parseWidgetSchema = (data: BaseSchema, widgetSchema: UIWidget) => {
   };
 };
 
-const renderWidget = (inputData, schema: UIWidget, contextProps = {}): JSX.Element => {
-  const { Widget, props } = parseWidgetSchema(inputData, schema);
-  return <Widget data={inputData} {...contextProps} {...props} />;
-};
+export interface UISchemaRendererProps {
+  /** The uniq id of current schema data. Usually a json path. */
+  id: string;
+
+  /** Declarative json with a $type field. */
+  data: BaseSchema;
 
-export const renderSDKType = (data: BaseSchema, context?: { menu: JSX.Element; onClick }): JSX.Element => {
+  /** Handle UI events */
+  onEvent: WidgetEventHandler;
+}
+
+export const UISchemaRenderer: FC<UISchemaRendererProps> = ({ id, data, onEvent, ...contextProps }): JSX.Element => {
   const $type = get(data, '$type');
   const schema = get(uiSchema, $type, uiSchema.default);
-
-  return renderWidget(data, schema, context);
+  const { Widget, props } = parseWidgetSchema(data, schema);
+  return <Widget id={id} data={data} onEvent={onEvent} {...contextProps} {...props} />;
 };
diff --git a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
index a8200df902..fc01237ecd 100644
--- a/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
+++ b/Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx
@@ -7,17 +7,17 @@ import { generateSDKTitle } from '@bfc/shared';
 import { FormCard } from '../components/nodes/templates/FormCard';
 import { WidgetContainerProps, WidgetComponent } from '../schema/uischema.types';
 import { ObiColors } from '../constants/ElementColors';
+import { NodeEventTypes } from '../constants/NodeEventTypes';
+import { NodeMenu } from '../components/menus/NodeMenu';
 
 export interface ActionCardProps extends WidgetContainerProps {
   title: string;
   icon: string;
   content: string | number | JSX.Element;
-  menu: JSX.Element;
   colors?: {
     theme: string;
     icon: string;
   };
-  onClick: () => any;
 }
 
 const DefaultCardColor = {
@@ -26,17 +26,24 @@ const DefaultCardColor = {
 };
 
 export const ActionCard: WidgetComponent<ActionCardProps> = ({
+  id,
   data,
+  onEvent,
   title,
   icon,
   content,
-  menu,
-  onClick,
   colors = DefaultCardColor,
 }) => {
   const header = generateSDKTitle(data, title);
   const nodeColors = { themeColor: colors.theme, iconColor: colors.icon };
   return (
-    <FormCard header={header} corner={menu} icon={icon} label={content} nodeColors={nodeColors} onClick={onClick} />
+    <FormCard
+      header={header}
+      corner={<NodeMenu id={id} onEvent={onEvent} />}
+      icon={icon}
+      label={content}
+      nodeColors={nodeColors}
+      onClick={() => onEvent(NodeEventTypes.Focus, { id })}
+    />
   );
 };