点击按钮打开侧边栏及动态更新

问题：设计器如何点击按钮打开侧边栏及动态更新

背景：

用户想要像模板按钮那样，点击之后弹出一个侧边栏，然后点击不同的单元格显示不同的内容。

实现方法：

首先，先在编辑器的ribbon上插入一个按钮：

接下来创建一个侧边栏模板，一个template对象，可以通过getTemplate去取一些常见的模板观察结构。

里面主要有：templateName、content，其中content是一个数组，里面可以包含不同原子类型的对象。

由于模板较大，截取部分做分析。

content里面的第一个对应一般就是侧边栏的标题，可以指定一个类型为TextBlock的原子类型。然后通过css样式给这个标题添加样式。text就对应的是标题的问文本。

第二个对象制定了一个容器类型名为“Container”，里面有一些子组件，可以可以设置其margin边距、width宽度等，另外还可以设置一个bindingPath，有点类似数据绑定，可以去动态展示数据的前提。

将template创建完成后，还需要注册该模板：

GC.Spread.Sheets.Designer.registerTemplate(
  "auditOptionTemplate",
  auditTemplate
);

template除了有UI外，还需要有对应的command，需要去定义命令对象。有一个属性需要注意的是visibleContext，这个用于控制模板的显示和关闭。然后是处理侧边栏的状态的getState了，在这里可以去对侧边栏的内容做一个更改。

如下面的text1和text2就是前面提到的bindingPath，当我们点击到指定的单元格时，侧边栏就会显示对应值。

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

var sidePanelsAuditConfig = {
  position: "right",
  width: "315px",
  command: "auditOptionPanel",
  uiTemplate: "auditOptionTemplate",
  showCloseButton: true,
};

并且添加到我们的config里面：

Object.assign(config.commandMap, sidePanelsAuditCommands);

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

Demo请参考附件：sidePannel.zip

作者: GrapeCity China | 审核：Lynn.Dou | 更新时间：2023.12.22