负责技术支持的葡萄又来啦。
三日不见，咱们的客户又为咱们发来新的问题。
这次咱们须要实现的场景是在前端表格环境中，像模板按钮那样，点击之后弹出一个侧边栏，而后通过点击不同的单元格显示不同的内容。
挤接下来咱们就带大家一起来看看，如何在前端电子表格中实现这样的性能。
实例操作
首先，惯例地咱们先惯例地在编辑器的ribbon上插入一个按钮。
按钮插入结束后，咱们来创立一个侧边栏模板。这个侧边栏模板其实是一个template对象，大家能够通过getTemplate去取一些常见的模板，察看它的构造。
比拟罕用的元素有：templateName和content。其中content是一个数组，外面能够蕴含不同原子类型的对象，。对于原子类型前面咱们会为大家介绍更多相干内容，大家在这里能够简略将原子组件了解为新增template的根本单位。
因为内容容量很多，咱们这里只截取局部为大家介绍。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试试：
https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MTk2MTcwfGJkY2EwYjI0fDE2NTAyNjIwNTJ8NjI2NzZ8MTQyNzIx