The SpreadJS Designer Component is a separate deployment add-on package that gives JavaScript developers the ability to embed an interactive UI similar to Excel, making it easier for the users to interact with the spreadsheets.
This highly customizable, flexible add-on component includes Angular, React, and Vue wrappers, making it possible to add it to all these JavaScript frameworks easily.
In the first section of this blog, you will learn how you can add the Designer Component to your AngularJS, React, and Vue web applications. We will also show how you can make various customizations to this component with minimal effort on your part.
Let's get started!
Using the Designer Component in different JavaScript Frameworks
In the first section of this blog, you will learn how you can add the Designer Component to your AngularJS, React, and Vue web applications. Next, we will show how you can make various customizations to this component with minimal effort on your part
AngularJS
After having created your application, follow the next steps:
- Import the following SpreadJS modules into your project
npm install @grapecity/spread-excelio
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-barcode
npm install @grapecity/spread-sheets-charts
npm install @grapecity/spread-sheets-languagepackages
npm install @grapecity/spread-sheets-pdf
npm install @grapecity/spread-sheets-print
npm install @grapecity/spread-sheets-shapes
npm install @grapecity/spread-sheets-pivot-addon
npm install @grapecity/spread-sheets-designer
npm install @grapecity/spread-sheets-designer-resources-en
npm install @grapecity/spread-sheets-angular
npm install @grapecity/spread-sheets-designer-angular
- Import the designer and resources module in the app.module.ts file
import '@grapecity/spread-sheets-designer-resources-en';
import { DesignerModule } from '@grapecity/spread-sheets-designer-angular';
- Import the designer CSS files in app.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';
- Add the designer tag and an event listener to the designer initialized event in the app.component.html file
<designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>- Pass the props parameters to configure the designer
Also, initialize the designer to access the SpreadJS instance
export class AppComponent {
props = {
styleInfo: "width: 100%; height: 900px",
config: null
}
designerInitialization(e: any) {
//spread instance
var workbook = e.designer.getWorkbook();
var sheet = workbook.getActiveSheet();
sheet.setValue(1, 1, 'Test');
}
}
- Save and run the application
In no time, you will have embedded in your Angular Application a ready-to-use Designer Component.
React
To add the Designer Component to your React Application, follow the below steps:
- Import the following SpreadJS modules into your project
npm install @grapecity/spread-excelio
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-barcode
npm install @grapecity/spread-sheets-charts
npm install @grapecity/spread-sheets-languagepackages
npm install @grapecity/spread-sheets-pdf
npm install @grapecity/spread-sheets-print
npm install @grapecity/spread-sheets-shapes
npm install @grapecity/spread-sheets-pivot-addon
npm install @grapecity/spread-sheets-designer
npm install @grapecity/spread-sheets-designer-resources-en
npm install @grapecity/spread-sheets-angular
npm install @grapecity/spread-sheets-designer-angular
- Import the required modules in the App.js file
import '@grapecity/spread-sheets-designer-resources-en';
import {Designer} from '@grapecity/spread-sheets-designer-react';
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
- Render the Designer Component using the following code:
<designer (designerInitialized)="afterDesignerInit($event)" [props]="props"></designer>- Save and Run the application
Vue
To add the Designer Component to your Vue Application do as follows:
- Import the following SpreadJS modules into your project
npm install @grapecity/spread-excelio
npm install @grapecity/spread-sheets
npm install @grapecity/spread-sheets-barcode
npm install @grapecity/spread-sheets-charts
npm install @grapecity/spread-sheets-languagepackages
npm install @grapecity/spread-sheets-pdf
npm install @grapecity/spread-sheets-print
npm install @grapecity/spread-sheets-shapes
npm install @grapecity/spread-sheets-pivot-addon
npm install @grapecity/spread-sheets-designer
npm install @grapecity/spread-sheets-designer-resources-en
npm install @grapecity/spread-sheets-angular
npm install @grapecity/spread-sheets-designer-angular
- Import the 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';
- Add the designer tag as below
<template>
<div id="app">
<gc-spread-sheets-designer:styleInfo='styleInfo':config='config'>
</gc-spread-sheets-designer>
</div>
</template>
- Configure and initialize the Designer in you App.vue file
export default {
name: 'App',
data: function () {
return {
styleInfo: { height: '800px', width: '1200px', border: 'solid black 1px' },
config: null,
designer: null
}
},
methods: {
designerInitialized (value) {
this.designer = value
}
}
}
- Save and Run the application
Customizations
This section will show you how you can customize the SpreadJS Designer component according to your user needs.
Below there the sections and features of the Designer Component that can be customized:
- Ribbon, context menu, file menu, and side panels can be deleted but not modified or added
- Buttons, tabs, context menu options, dialog boxes, etc., can be customized
- The response or interaction of each element can be customized by setting commandMap to register the command
Download this sample to follow the various customizations that we will describe below.
Note: You can look at this blog for further instructions on how to customize the component.
Enable or Disable Ribbon Elements
Below, we show how you can disable three buttons on the INSERT menu.
Note: Be aware if you wish to enable buttons that need a selection of data to be functional, for example: insertChart.
- Access the default configuration and identify the command with the button you wish to disable or enable. In our case, we have disabled the PivotTable, Picture, and Camera on the INSERT menu
// Access the default config
var config = GC.Spread.Sheets.Designer.DefaultConfig;
console.log(config);
- Apply getCommand method on the right command to identify its state expression
console.log(GC.Spread.Sheets.Designer.getCommand('insertPivotTable'));
//commandName: "insertPivotTable"
//enableContext: "AllowInsertPivotTable && !IsProtected"
console.log(GC.Spread.Sheets.Designer.getCommand('insertPicture'));
//commandName: "insertPicture"
//enableContext: "AllowEditObject"
console.log(GC.Spread.Sheets.Designer.getCommand('insertCameraShape'));
//commandName: "insertCameraShape"
//enableContext: "AllowInsertShape && AllowEditObject"
- Set the above command to commandMap in your project and disable the respective state expression by setting the enableContext option
config.commandMap = {
insertPivotTable: {
commandName: "insertPivotTable",
// To disable the Pivot Table button
enableContext: "!AllowInsertPivotTable"
},
insertPicture: {
commandName: "insertPicture",
// To disable the Picture button
enableContext: "!AllowEditObject"
},
insertCameraShape: {
commandName: "insertCameraShape",
// To disable the Camera Shape button
enableContext: "false"
}
}
- Initialize the designer instance by passing "config" parameter for customizable configuration
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"), config, spread);You will notice that the mentioned buttons are now disabled.
Bind File Import Events
Designer Component provides event binding methods such as bind, unbind, and unbindAll. These methods help to add or remove events in the Designer Component. For example, you can use these functions during file import operations.
The events used in our sample are FileLoading and FileLoaded. FileLoading event displays the number of worksheets if the imported file format is Excel. In contrast, the FileLoaded event displays a message when the file import is completed.
// Using the FileLoading Event in bind method
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoading, function(type, message){
if (message.fileType = GC.Spread.Sheets.Designer.FileType.Excel){
let spreadJsonData = message.data;
if(spreadJsonData.sheetCount >= 0) {
window.alert("Number of worksheets: " + spreadJsonData.sheetCount);
}
};
});
// Using the FileLoaded Event in bind method
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, function(event,data){
window.alert("File has loaded");
});
// Using the unbind method to remove FileLoaded event
designer.unbind(GC.Spread.Sheets.Designer.Events.FileLoaded);
// Using the unbindAll method to remove all the events
designer.unbindAll();
Customize Designer Localization
Get the original designer resource object using the getResources method
var resources = GC.Spread.Sheets.Designer.getResources();
console.log(resources);
Modify the content of the resource object
resources.close = "Close!";
resources.ribbon.formulas.formulas = "Functions & Formulas";
resources.nameManagerDialog.title = "Name MANAGER Dialog";
Set the modified resource object using the setResources method
GC.Spread.Sheets.Designer.setResources(resources);
There were just a few cases on how you can customize the SpreadJS Designer Component.
Want to know more?
Contact us to learn more at us.sales@grapecity.com and visit the SpreadJS page.
If you have any questions or insights you like to share, you are welcome to post a comment below!
Tags:
Related Blogs
Try Our JavaScript Spreadsheet Components
SpreadJS Resources
Jola Hoxha