Introduction to the SpreadJS Designer Component

SpreadJS provides an Excel-like standalone desktop application for the developer to design their spreadsheets. In addition, we now also offer a new separate designer add-on component that is highly customizable, flexible, and could be easily embedded into your web application. With the help of the new designer, you could easily add this interface with minimal efforts.

The SpreadJS Designer Component

Although the new designer UI looks like the previous designer, it is a significant upgrade over its predecessor in terms of usability and customization.

The following table highlights the major differences between them.

To learn more about the SpreadJS Designer Component, check out the video below:

Using the Designer Component

Using the designer is now easier than ever. We just need to follow these steps to configure it.

1. Add the required dependencies for SpreadJS The designer component is dependent on SpreadJS; it requires referencing the following SpreadJS CSS and JS files.

CS

gc.spread.sheets.xx.x.x.css

JS

 gc.spread.sheets.xx.x.x.css

Where xx.x.x is the version number of SpreadJs build used in the application.

2. Adding required dependencies for SpreadJS designer

The designer components also need the following CSS and JS files,

CSS

gc.spread.sheets.designer.xx.x.x.min.css

JS

gc.spread.sheets.designer.resource.en.xx.x.x.min.js gc.spread.sheets.designer.xx.x.x.min.js

Where xx.x.x is the version number of SpreadJs build used in the application.

3. Adding DOM element as container Add a DOM element in the page to serve as the container for the designer.

<div id="designerHost" style="width:100%; height:360px;border: 1px solid gray;"></div>

Set the license key for the designer and SpreadJS:

GC.Spread.Sheets.Designer.LicenseKey ="XXX"; GC.Spread.Sheets.LicenseKey ="XXXX";

5. Instantiating the designer

Use the designer constructor to create a new instance of the designer.

vardesigner =newGC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));

Customizing the Designer

Customizing the designer is as easy as updating a simple config file.

Whether you need to remove some buttons from the ribbon, hide some tabs, rearrange the buttons in the tabs or even add new buttons, the config file covers all the basics.

Before updating the config file, let’s get familiar with the structure and basic building blocks of the designer. The following image shows the various parts of the designer:

Following image shows the basic structure of the config file:

Custom commands can be registered using the commandsMap as demonstrated in the following screenshot

Updating Designer Config - Adding Button Groups

Let’s see how easy it is to customize the designer component. In the following example, we'll add a simple button and save the changes to the server.

1. Add the "Save Data" option into "buttonGroups" field of "HOME" ribbon as shown in the following screenshot:

2. Register the corresponding command to commandMapas shown in the following code.

3. Setting the CSS style:

   .ribbon-button-welcome{
   background-image:url('./welcome.png'); background-size:35px35px;
   }
   

4. Pass the above-customized JSON parameter when creating the designer instance.

vardesigner =newGC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config);

You should be able to see a custom command option in the ribbon as shown in the following screenshot:

Using the Designer in JavaScript Frameworks

Now let's see how to integrate designer in various JS frameworks:

1. Angular
2. React
3. Vue

Using the SpreadJS Designer in Angular

Using the designer in Angular is as easy as importing a module and adding the designer directive in component.html file. Follow these steps to add designer in an angular application:

1. Add the required node packages

   @grapecity/spread-excelio @grapecity/spread-sheets @grapecity/spread-sheets-barcode @grapecity/spread-sheets-charts @grapecity/spread-sheets-languagepackages @grapecity/spread-sheets-pdf @grapecity/spread-sheets-print @grapecity/spread-sheets-resources-ja @grapecity/spread-sheets-shapes @grapecity/spread-sheets-designer
   @grapecity/spread-sheets-designer-resources-en @grapecity/spread-sheets-designer-angular
   

2. Import designer and resources module.

   import { DesignerModule } from '@grapecity/spread-sheets-designer-angular'; import '@grapecity/spread-sheets-designer-resources-en';
   @NgModule({ declarations: [
   AppComponent
   ],
   imports: [
   BrowserModule, DesignerModule
   ],
   providers: [],
   bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. Import CSS file in component.css file.

   @import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"; @import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
   

4. Add designer tag in the component.html file.

   <designer [props]="props"></designer>
   

5. To configure the designer, you may pass the config object on the props as:

   props = {
   styleInfo: "width: 100%; height: 100%", config: config
   };
   

Using the SpreadJS Designer in React

Using the designer in react is equally easy. All we need to do is import the react component and return the component as a result of the render method.

Follow these steps:

1. Add the required node packages:

   @grapecity/spread-excelio @grapecity/spread-sheets @grapecity/spread-sheets-barcode @grapecity/spread-sheets-charts @grapecity/spread-sheets-languagepackages @grapecity/spread-sheets-pdf @grapecity/spread-sheets-print @grapecity/spread-sheets-resources-ja @grapecity/spread-sheets-shapes @grapecity/spread-sheets-designer
   @grapecity/spread-sheets-designer-resources-en @grapecity/spread-sheets-react @grapecity/spread-sheets-designer-react
   

2. Import required modules:

   import {Designer} from '@grapecity/spread-sheets-designer-react'; import '@grapecity/spread-sheets-designer-resources-en';
   import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css" import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
   

3. Render designer component:

   function App() { return (
   <Designer styleInfo = \{{width: "1500px", height: '90vh'}}></Designer>
   );
   }
   

Using the SpreadJS Designer in Vue

Follow these steps to add designer in a Vue application:

1. Add the required node packages:

   @grapecity/spread-excelio @grapecity/spread-sheets @grapecity/spread-sheets-barcode @grapecity/spread-sheets-charts @grapecity/spread-sheets-languagepackages @grapecity/spread-sheets-pdf @grapecity/spread-sheets-print @grapecity/spread-sheets-resources-ja @grapecity/spread-sheets-shapes @grapecity/spread-sheets-designer
   @grapecity/spread-sheets-designer-resources
   

2. Import required modules:

   import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
   import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'; import { Designer } from '@grapecity/spread-sheets-designer-vue';
   import '@grapecity/spread-sheets-designer-resources-en';
   

3. Add designer tag in template.

   <template>
   <div id="app">
   <gc-spread-sheets-designer
   :styleInfo='styleInfo'
   :config='config'>
   </gc-spread-sheets-designer>
   </div>
   </template>
   

4. Define config in the script part as:

   export default { name: 'App',
   data: function () { return {
   styleInfo: {height:'800px', width: '1200px', border: 'solid red 1px'}, config: null,
   };
   },
   }
   

You can download the Angular, React and Vue projects here.

Licensing the Designer Component

The designer component is licensed separately from the SpreadJS. To use the designer component in your application, you would need two licenses

1. SpreadJS License
2. Spread Designer Component License

Both the licenses would need to be purchased separately.

Designer License Variants

The designer license comes in the following three different variants, you may choose the one based on your requirement.

Contact the sales team at us.sales@grapecity.com for additional licensing information.