Schema Driven Visual Editor

[yeze322]

Description
Visual Editor and Form Editor are both visualization libs for AdaptiveDialog schema, they work on the same abstraction level.

In Form Editor, we have an uischema.ts file in which render process is defined by a json.

We should also have a schema definition file in Visual Editor. Then we can possibily

1. define multiple versions of schema to support different SDK versions' rendering
2. let users define their own ui elements for customization

Interface
Ideally, a semantic Visual Editor could be used like this

import  { uischema } from '@bfc/schema/4.7.0'

const customizedSchema = { ...uischema, ...myshema };

const render = () => {
    return (
        <VisualEditor
               data={data}
               schema={customizedSchema}
         />
    );
}

PR plan

• stage 1 (merged feat: Schema-driven visual editor - migrates 15 simple types #1811 ) - support basic rendering with uischema definition
  • set up uischema definition & implement a generic renderer based on uischema
  • covered $types: 15 simple $types, such as LogAction
• stage 2 - support complicated content rendering
  • extract more widget to support complicated node content
  • covered $types: SendActivity, ReplaceDialog, BeginDialog
• stage 3 - support multiple nodes rendering
  • implement a InputWidget which looks like current BaseInput
  • covered $types: all input $types, such as TextInput, NumberInput (but exclude OauthInput)
• stage 4 - support nested uischema definition
  • extend 'uischema''s definition to support rendering nested $types such as IfConditon, Foreach
  • covered $types: branching - IfCondtion, SwitchConditon; loop - Foreach, ForeachPage;

[yeze322]

@cwhitten this is the 'schema driven' topic we talked today

[yeze322]

In FormEditor, uischema contains several types of elements:

1. ui:widget
2. ui:field
3. ui:order
4. ui:hidden
5. ui:options

1 & 2 define what a SDK type looks like; 3,4,5 provide us convenience to config the form.

---

In Visual Editor, we will build something similar with FormEditor. Here is an example on 'SendActivity'.

const FormCard = (title, content, menu) => <div>{title}{content}{menu}</div>;
const AdaptiveTitle = data => ConceptLabels[data.$type].title;
const LgField= value = > <LgContent value={value} />

const uischema = {
  [SDKTypes.SendActivity]: {
    'ui:widget': FormCard,
    'ui:theme': <a group of styles>,
    title: AdaptiveTitle,
    content: data => <LgField value={data.activity} />,
  }
}

It will produce a node like this:

[yeze322]

Another example on IfCondition.

const FormCard = (title, content, menu) => <div>{title}{content}{menu}</div>;
const ActionList = (actions: AdaptiveAction[]) => /* leverage uischema*/

const uischema = {
  [SDKTypes.IfCondition]: {
    'ui:widget': IfCondition,
    condition: {
      'ui:widget': FormCard,
      title: 'Condition',
      content: data => data.condition,
    },
    ifBranch: {
      'ui:widget': ActionList,
      actions: data => data.actions,
    },
    elseBranch: {
      'ui:widget': ActionList,
      actions: data => data.elseActions,
    }
  }
}

It will produce a node like this:

[yeze322]

@cwhitten @a-b-r-o-w-n do you have suggestions on the schema format?

[hibrenda]

#1811

[yeze322]

closed by

• feat: Schema-driven visual editor - migrates 15 simple types #1811 (migrated 14 simple types)
• chore: migrate SendActivity, BeginDialog, ReplaceDialog to uischema #1840 (migrated SendActivity, BeginDialog, ReplaceDialog)
• feat: migrate TextInput and all other *Input types to uischema #1874 (migrated 6 Input types)
• chore: migrate IfCondition, SwitchCondition, Foreach(Page) to uischema #1899 (migrated IfCondition, SwitchCondition, Foreach, ForeachPage)