Tutorial Concept
Learn how to implement and customize a JavaScript spreadsheet ribbon bar control. Discover what is included with the component, such as: ribbon bar, formula bar, context menus, and more.
What You Will Need
Controls Referenced
SpreadJS, the ultimate JavaScript spreadsheet component, offers a customizable, optional add-on called the Designer Ribbon Component. This customizable add-on enables developers to embed a spreadsheet ribbon toolbar and advanced spreadsheet design capabilities directly into web applications. With this component, end-users can easily modify spreadsheets using a familiar interface that includes a ribbon bar, formula bar, status bar, and context menus. In this blog, we will discuss what is included with the Designer Ribbon Component, its capabilities, and how to get started using it in JavaScript, Angular, React, and Vue applications.
Understanding JavaScript Spreadsheet Ribbon Bar Controls
- Understanding the JavaScript Ribbon Bar Component
- Using the Ribbon Tool Bar in JavaScript Frameworks
- Customizing the JavaScript Ribbon Component
- Expand the Possibilities with the JavaScript Spreadsheet Ribbon Bar
Understanding the JavaScript Spreadsheet Ribbon Bar
The SpreadJS Designer Ribbon Component is a versatile JavaScript control that allows developers to embed a customizable spreadsheet toolbar interface directly into web applications, enhancing the functionality of the spreadsheet component. With features like ribbon bar tabs, a formula bar, a status bar, a side panel, and a context menu, it provides users with intuitive controls to define intricate details such as hyperlink styles, cell padding, and spreadsheet settings.
Using the Ribbon Toolbar in JavaScript Frameworks
The optional Designer Ribbon Component add-on is a fully JavaScript-based tool that integrates seamlessly into both new and existing SpreadJS applications. Designed for flexibility, it offers framework-specific wrappers, making it simple to implement across various web frameworks like React, Angular, and Vue. In this section, we provide a quick-start guide to help you add the Designer Ribbon Component to your web application, enabling a user-friendly and customizable spreadsheet experience.
JavaScript
Using the Designer Ribbon Component in a pure JavaScript app is straightforward. Simply include the required dependencies, set up a container, and instantiate the designer. Follow these steps to integrate the designer into your JavaScript application:
1. Download the latest SpreadJS release files.
2. Include the necessary CSS and JS files for both SpreadJS and the Designer, replacing xx.x.x with your downloaded version number.
CSS
gc.spread.sheets.xx.x.x.css
gc.spread.sheets.designer.xx.x.x.min.css
JS
gc.spread.sheets.xx.x.x.js
gc.spread.sheets.designer.resource.en.xx.x.x.min.js
gc.spread.sheets.designer.xx.x.x.min.js
3. Create a DOM container element for the Designer Ribbon Component.
<div id="designerHost" style="width:100%; height:360px; border: 1px solid gray;"></div>
4. Initialize the JavaScript Designer Ribbon Component using the new designer constructor.
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designerHost"));
To learn more, check out our Designer Ribbon Component's Quick Start documentation and the JavaScript Designer Customization demo.
Angular
Using the Designer Ribbon Component in Angular is as easy as importing a module and adding the designer directive in component.html file. Follow these steps to add the designer in an angular application:
1. Install the required SpreadJS Angular modules to use the SpreadJS Designer Component.
npm install @mescius/spread-sheets @mescius/spread-sheets-angular @mescius/spread-sheets-shapes @mescius/spread-sheets-charts @mescius/spread-sheets-slicers @mescius/spread-sheets-print @mescius/spread-sheets-formula-panel @mescius/spread-sheets-barcode @mescius/spread-sheets-pdf @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-tablesheet @mescius/spread-sheets-ganttsheet @mescius/spread-sheets-reportsheet-addon @mescius/spread-sheets-languagepackages @mescius/spread-sheets-io @mescius/spread-excelio @mescius/spread-sheets-designer @mescius/spread-sheets-designer-resources-en @mescius/spread-sheets-designer-angular
2. Import the needed CSS files in the component.css file.
@import '@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
@import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
3. Import the Designer and Resources modules in the app.modules.ts files.
...
import { AppComponent } from './app.component';
import { DesignerModule } from '@mescius/spread-sheets-designer-angular';
import { SpreadSheetsModule } from "@mescius/spread-sheets-angular";
...
4. Add the designer tag in the app.component.html file using the following code snippet.
<designer [props]="props"></designer>
5. To configure the designer, pass the props parameters in the app.component.ts file.
props = {
styleInfo: "width: 100%; height: 100%", config: config
};
For more info, check out the Angular documentation or this Angular Designer Customization demo.
React
To use the Designer Ribbon Component in React, we need only import the react component and return the component as a result of the render method.
1. Install the required SpreadJS React modules to use the SpreadJS Designer Component.
npm install @mescius/spread-sheets @mescius/spread-sheets-react @mescius/spread-sheets-shapes @mescius/spread-sheets-charts @mescius/spread-sheets-slicers @mescius/spread-sheets-print @mescius/spread-sheets-formula-panel @mescius/spread-sheets-barcode @mescius/spread-sheets-pdf @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-tablesheet @mescius/spread-sheets-ganttsheet @mescius/spread-sheets-reportsheet-addon @mescius/spread-sheets-languagepackages @mescius/spread-sheets-io @mescius/spread-excelio @mescius/spread-sheets-designer @mescius/spread-sheets-designer-resources-en @mescius/spread-sheets-designer-react
2. Import the required modules to the App.js file.
import '@mescius/spread-sheets-designer-resources-en';
import {Designer} from '@mescius/spread-sheets-designer-react';
import '@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
3. Render the Designer Component using the following code snippet in the App.js file.
function App() {
return (
<Designer styleInfo = {{width: "1500px", height: '90vh'}}></Designer>
);
}
export default App;
For more info, check out the React documentation or the React Designer Customization demo.
Vue
To use the Designer Ribbon Component in Vue 3, simply install the required modules, register the Designer component, and include it in your App.vue file.
1. Install the required SpreadJS Vue modules to use the SpreadJS Designer Component.
npm install @mescius/spread-sheets @mescius/spread-sheets-vue @mescius/spread-sheets-shapes @mescius/spread-sheets-charts @mescius/spread-sheets-slicers @mescius/spread-sheets-print @mescius/spread-sheets-formula-panel @mescius/spread-sheets-barcode @mescius/spread-sheets-pdf @mescius/spread-sheets-pivot-addon @mescius/spread-sheets-tablesheet @mescius/spread-sheets-ganttsheet @mescius/spread-sheets-reportsheet-addon @mescius/spread-sheets-languagepackages @mescius/spread-sheets-io @mescius/spread-excelio @mescius/spread-sheets-designer @mescius/spread-sheets-designer-resources-en @mescius/spread-sheets-designer-vue
2. Register the SpreadJS Designer Vue component in the main.js file.
import { createApp } from 'vue'
import App from './App.vue'
import Designer from "@mescius/spread-sheets-designer-vue"
let app = createApp(App);
app.component("gc-spread-sheets-designer", Designer);
app.mount('#app');
3. Update App.vue to import styles and register the component.
<script setup>
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
import "@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import * as GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-print";
import "@mescius/spread-sheets-shapes";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-designer-resources-en";
import "@mescius/spread-sheets-designer";
</script>
<template>
<div id="gc-designer-container">
<gc-spread-sheets-designer
:styleInfo="{ height: '98vh', width: '100%' }"
:config="config"
:spreadOptions="{ sheetCount: 2 }"
@designerInitialized="designer = $event"
/>
</div>
</template>
For more info, check out the Vue documentation and the Vue3 Designer Customization demo.
Customizing the JavaScript Spreadsheet Ribbon Component
The Designer Ribbon Component provides powerful customization options, enabling developers to fine-tune the spreadsheet interface to meet their application's unique requirements. These capabilities allow for creating an intuitive and personalized user experience that aligns seamlessly with specific use cases. Developers can effortlessly access the default configuration of the Designer Component through the DefaultConfig field, which organizes the component settings in a structured command tree.
var config = GC.Spread.Sheets.Designer.DefaultConfig;
This configuration serves as a foundation, making it simple to customize and adapt the Designer Ribbon Component to suit your application's needs.
The key areas available for customization include:
- Ribbon Tabs: You can add new tabs to the ribbon or modify existing ones to include custom functionalities. This involves accessing the designer's configuration and appending new tab definitions.
- Buttons and Drop-Downs: Within the ribbon, it's possible to add new buttons or drop-down menus, as well as modify existing ones. This requires defining new commands in the command map and associating them with the desired ribbon elements.
- Dialogs: The Designer Component supports the creation of custom dialogs, allowing for enhanced user interactions. You can define new dialog templates and register them within the designer. Additionally, existing dialogs can be modified by retrieving their templates, making necessary changes, and re-registering them.
- Disabling UI Elements: Specific elements within dialogs or the ribbon can be programmatically enabled or disabled based on certain conditions. This is achieved by setting the enableWhen or the enableContent properties for the respective elements, allowing for dynamic control over the UI components.
- Custom Components: Beyond standard UI elements, you can integrate custom components into the Designer. For instance, adding a 'Date Picker' involves defining a custom component class, registering it with the designer, and incorporating it into the ribbon or other UI sections.
To learn more areas that can be customized, check out our Designer Ribbon Component's Customization Documentation or our blog Customizing the Designer Component in SpreadJS.
Expand the Possibilities with the JavaScript Spreadsheet Ribbon Bar
The Designer Ribbon Component is just the beginning. Its functionality can be extended even further with other optional SpreadJS add-ons, including Pivot Tables for dynamic data analysis, Report Sheets for generating professional reports, and Gantt Chart Sheets for advanced project management. These powerful tools work seamlessly with the JavaScript Spreadsheet Ribbon Bar to elevate your web application’s capabilities.
Want to see more? Check out our video below or visit our SpreadJS optional add-ons landing page to explore how these tools can transform your projects. Start unlocking the full potential of SpreadJS today!
Top comments (0)