[Front-end dry goods] Don't envy other people's Excel anymore, teach you to click the button to open the sidebar directly!

The grapes responsible for technical support are here again.

We haven't seen you for three days, and our client has sent us a new question.

The scenario we need to implement this time is in the front-end table environment, like a template button, a sidebar will pop up after clicking, and then different content will be displayed by clicking on different cells.

Squeeze Next, let's take a look at how to implement such a function in the front-end spreadsheet.

instance operation

First, we routinely insert a button on the editor's ribbon.

Once the button is inserted, let's create a sidebar template. This sidebar template is actually a template object. You can use getTemplate to get some common templates and observe its structure.

The more commonly used elements are: templateName and content. Where content is an array, which can contain objects of different atomic types. We will introduce more related content to you later about atomic types. Here, you can simply understand atomic components as the basic unit of adding templates.

Due to the large amount of content, we will only intercept some of them to introduce to you. The first correspondence in content is generally the title of the sidebar. We can specify an atomic type of type TextBlock, and then add styles to this title through CSS styles. text corresponds to the text of the title. In the second object, we specify a container type named "Container", which contains some sub-components, which can set its margin, width, etc. In addition, you can also set bindingPath, which is similar to data binding , this parameter is the premise that you can choose whether to display the data dynamically.

After the template is created, we need to register the template next.

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

In addition to the UI, the template also needs to have a corresponding command, and we also need to define the command object. There is one property that needs to be paid attention to is the visibleContext, which is used to control the display and closing of the template, which is more critical. Then there is the getState that handles the state of the sidebar. Here, we can make a change to the content of the sidebar. For example, text1 and text2 below are the bindingPath mentioned earlier. When we click on the specified cell, the sidebar will display the corresponding value.

Next, organize the ui and command into a sidebar object.

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

And add it to our config.

 Object.assign(config.commandMap, sidePanelsAuditCommands);

Finally, go back to the object of the button defined earlier and add the code that controls the display and hide of the sidebar, and you're all done.

If you are interested, you can download the demo to try:

https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MTk2MTcwfGJkY2EwYjI0fDE2NTAyNjIwNTJ8NjI2NzZ8MTQyNzIx

Extended reading

SpreadJS pure front-end form control official website