負責技術支援的葡萄又來啦。
三日不見，我們的客戶又為我們發來新的問題。
這次我們需要實現的場景是在前端表格環境中，像模板按鈕那樣，點選之後彈出一個側邊欄，然後通過點選不同的單元格顯示不同的內容。
擠接下來我們就帶大家一起來看看，如何在前端電子表格中實現這樣的功能。
例項操作
首先，常規地我們先常規地在編輯器的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試試：
