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.

Introduction to the SpreadJS Designer Component

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.

Features Previous designer (before v14.0.0) Designer Component (v14.0.0)
Architecture Single monolithic application Pure JS component
Customizability Requires source code modifications and application rebuild to add new commands Easily customizable using JSON config files.
Support for JS Frameworks Limited integration with other JS frameworks like Angular, React, and Vue Provides framework-specific components for easy integration
Spread Instance Designer creates its own workbook instance The designer can re-use the existing workbook instance

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.

  1. 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.

  1. 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";
  1. 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:

Introduction to the SpreadJS Designer Component

Following image shows the basic structure of the config file:

Introduction to the SpreadJS Designer Component

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

Introduction to the SpreadJS Designer Component

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:

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

Introduction to the SpreadJS Designer Component

  1. Setting the CSS style:

    .ribbon-button-welcome{
    background-image:url('./welcome.png'); background-size:35px35px;
    }
    
  2. 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: Introduction to the SpreadJS Designer Component

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.

License type Description
Annual Single Hostname Allows deploying the designer on a single hostname
Annual Single Domain (. domain) / SaaS Allows deploying the designer on any hostname under a single domain name.
Annual Unlimited Domain (.*) / SaaS Allows deploying the designer on any hostname under any domain name

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

Try SpreadJS free for 30 days

Download SpreadJS

Download Now!

Try SpreadJS free for 30 days

Download SpreadJS

Download Now!