如何将DesignAble生成的jsonSchema反显在DesignAble上？

[sorryljt]

如题

通过DesignAble生成一个页面的jsonSchema，并存到数据库，希望通过DesignAble对已有的jsonSchema进行可视化编辑，请问如何将其反显呢？有无直接的API？或者Demo

[atzcl]

大概做以下两步即可

• 将 json schema 对象递归创建成以 TreeNode 实例为节点的节点树
• 将这棵树设置到当前的 Workspace 的 operation.tree 的下级节点中

这里可以直接使用 @designable/formily 提供的 transformToTreeNode 方法

具体的代码

这里对应上面的第一步

formily/designable/antd/playground/widgets/SchemaEditorWidget.tsx

Line 24 in 5d88e29

props.onChange?.(transformToTreeNode(JSON.parse(value), Parser))

这里对应上面的第二步

formily/designable/antd/playground/main.tsx

Lines 97 to 101 in 5d88e29

	<ViewPanel type="JSONTREE" scrollable={false}>
	{(tree, onChange) => (
	<SchemaEditorWidget tree={tree} onChange={onChange} />
	)}
	</ViewPanel>

这里的 ViewPanel 的 render props 部分需要到 designable 那边去看
https://github.com/alibaba/designable/blob/4bf6aaed683b2d30c677125d5379b6cd1f6658d3/packages/react/src/panels/ViewPanel.tsx#L20

https://github.com/alibaba/designable/blob/4bf6aaed683b2d30c677125d5379b6cd1f6658d3/packages/react/src/panels/ViewPanel.tsx#L34-L37

https://github.com/alibaba/designable/blob/4bf6aaed683b2d30c677125d5379b6cd1f6658d3/packages/core/src/models/TreeNode.ts#L611-L635

[wangjie19910615]

tree.appendNode(node)

[wangjie19910615]

要用tree.from(newTree)

[sorryljt]

要用tree.from(newTree)

害...没搞定，这代码是写在哪里的呀？方便给个代码块吗

[atzcl]

要用tree.from(newTree)

害...没搞定，这代码是写在哪里的呀？方便给个代码块吗

这个代码写在你从后端请求回 json schema 数据处，以下是伪代码，你需要根据自己的业务进行调整

// 伪代码

const tree = useTree()

const jsonSchema = await requestGetJsonSchema()

const newTreeNode = transformToTreeNode(jsonSchema)

tree.form(newTreeNode)

[sorryljt]

好的，多谢，已解决，不过在现有<Designer/>页面，使用useTree报错，我们换了一种写法，如下

  const currentWorkspace = (window['__DESINGER_WORKSPACE__']) ? window['__DESINGER_WORKSPACE__'] : engine.workbench.currentWorkspace;
  const tree = currentWorkspace?.operation?.tree;
  if(tree && jsonSchemaString){
    const newTreeNode = transformToTreeNode(JSON.parse(jsonSchemaString),FormParser)
    tree.from(newTreeNode)
    tree.takeSnapshot()
  }

我的项目是直接拉下来的git上playground的代码，总感觉这个页面框架在渲染顺序上有点问题，有时候使用个实例，用个hook啥的，还没有初始化，下面的Dom就执行了，只能想上面那样避开

[janryWang]

最新的palyground已经支持了数据回显逻辑，可以参考 https://github.com/alibaba/formily/blob/formily_next/designable/antd/playground/widgets/ActionsWidget.tsx

[sorryljt]

最新的palyground已经支持了数据回显逻辑，可以参考 https://github.com/alibaba/formily/blob/formily_next/designable/antd/playground/widgets/ActionsWidget.tsx

收到，期待文档

[janryWang]

https://v2.formilyjs.org/zh-CN/guide/form-builder

[sorryljt]

收到，多谢

[wangchenyi1996]

请问一下大佬，如果是多个Workspace工作区， 来回切换，然后点击节点，页面就卡起来了， 2个工作区都点不动，在任意工作区，重新拖动就正常了， 这是啥原因呀