自定义组件版编辑器——点击按钮打开侧边栏及动态更新

现在组件版编辑器从v14发布至今已经迭代至v15了，大家对于自定义编辑器的需求也基本得到满足，但是相关侧边栏的示例较少。有的朋友有这样一个场景，想要像模板按钮那样，点击之后弹出一个侧边栏，然后点击不同的单元格显示不同的内容。那这个怎么实现呢？

首先，比较常规地，我们先在编辑器的ribbon上插入一个按钮，这部分其余教程有描述，这边就不再赘述了。


接下来我们要创建一个侧边栏模板，这个就是一个template对象，大家可以通过getTemplate去取一些常见的模板观察他的结构。里面主要有：templateName、content，其中content是一个数组，里面可以包含不同原子类型的对象，关于原子类型后面会出相关的系列文章做介绍。
由于模板较大，我们就截取部分做分析。content里面的第一个对应一般就是侧边栏的标题，我们可以指定一个类型为TextBlock的原子类型。然后通过css样式给这个标题添加样式。text就对应的是标题的问文本。第二个对象我们制定了一个容器类型名为“Container”，里面有一些子组件，可以可以设置其margin边距、width宽度等，另外还可以设置一个bindingPath，有点类似数据绑定，可以去动态展示数据的前提。


把template创建完成后，我们还需要取注册该模板

1. GC.Spread.Sheets.Designer.registerTemplate(
   
2.   "auditOptionTemplate",
   
3.   auditTemplate
   
4. );

复制代码

template除了有UI外，还需要有对应的command，我们也需要去定义命令对象。有一个属性需要注意的是visibleContext，这个用于控制模板的显示和关闭比较关键。然后就是处理侧边栏的状态的getState了，在这里，我们可以去对侧边栏的内容做一个更改。如下面的text1和text2就是前面提到的bindingPath，当我们点击到指定的单元格时，侧边栏就会显示对应值。


再接着，将这个ui和command规整为一个侧边栏对象中

1. var sidePanelsAuditConfig = {
   
2.   position: "right",
   
3.   width: "315px",
   
4.   command: "auditOptionPanel",
   
5.   uiTemplate: "auditOptionTemplate",
   
6.   showCloseButton: true,
   
7. };

复制代码

并且添加到我们的config里面

1. Object.assign(config.commandMap, sidePanelsAuditCommands);

复制代码

最后再回到前面定义的按钮的对象中将控制侧边栏显隐的代码加上就大功告成。


下载附件即可查看完整demo。

侧边栏如果在左侧打开，会把sheet表格挤出屏幕。打开左侧面板前：

打开面板后：

新用户 发表于 2022-4-1 15:36
侧边栏如果在左侧打开，会把sheet表格挤出屏幕。打开左侧面板前：

打开面板后：

你好，为了更好地定位你的问题，建议开一个新帖将对应的demo上传，这边来调研一下。

侧边栏我只想要一个空白的div（只需要占个位置），具体类容自己写进去，需要怎么做？
v14我是通过左右布局，左边编辑器右边侧边栏，但是显得不好看，我需要把侧边栏布局到工具栏下面表格右边，像截图那样

豪 发表于 2022-5-8 13:39
侧边栏我只想要一个空白的div（只需要占个位置），具体类容自己写进去，需要怎么做？
v14我是通过左右布局 ...

侧边栏的添加必须按照上面的规则，利用模板去添加，不支持添加自己的div。除非自己去做一个div，然后独立在设计器之外，点击的时候显示，关闭的时候隐藏这个dom。

但是这个自己实现的div就不会像你提供的图片那样显示在设计器里面。