This sample shows the following:
How to create a "frequently used" button group and place your favorite items in a new ribbon tab.
Using search and replace functions instead of font style buttons.
You can use the ribbon's config property to edit the tabs and button groups within the tabs to show exactly what you want. Just follow these steps:
Clear the ribbon by setting the config.ribbon property to an empty array.
Create a new tab object with id, text, and buttonGroups properties.
Add the tab to the ribbon.
Create a new menu object with label, thumbnailClass, and commandGroup properties.
Add that new menu to the ribbon tab you just created
Set the existing ribbon config to the one you just created.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './styles.css';
import { AppFunc } from './app-func';
import { App } from './app-class';
// 1. Functional Component sample
ReactDOM.render(<AppFunc />, document.getElementById('app'));
// 2. Class Component sample
// ReactDOM.render(<App />, document.getElementById('app'));
import * as React from "react";
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-io";
import "@mescius/spread-sheets-designer-resources-en";
GC.Spread.Common.CultureManager.culture("en-us");
import { Designer } from "@mescius/spread-sheets-designer-react";
import {registerlic} from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js'
registerlic(GC);
const config = GC.Spread.Sheets.Designer.DefaultConfig;
const initRibbon = (spreadRef) => {
// clear ribbon
config.ribbon = [];
// add new tab
let newTab = {
id: 'operate',
text: 'Favorite',
buttonGroups: [],
};
config.ribbon.unshift(newTab);
// add new menu
let basicMenu = {
label: 'Frequently used operations',
thumbnailClass: 'Frequently used operations',
commandGroup: {
children: [
{
commands: ['formulaAutoSum'],
},
{
commands: ['insertTable'],
},
{
type: 'separator',
},
{
direction: 'vertical',
children: [
{
commands: ['fontFamily', 'fontSize', 'fontWeight', 'backColor', 'foreColor'],
},
{
commands: ['find', 'replace', 'setFilter'],
},
],
},
{
direction: 'vertical',
commands: ['showHideVGridLine', 'showHideHGridLine'],
},
],
},
};
config.ribbon[0].buttonGroups.unshift(basicMenu);
return config;
};
export function AppFunc() {
let spreadRef = { spread: undefined }
let config = initRibbon(spreadRef);
const initDesigner = (designer) => {
let workbook = designer.getWorkbook();
spreadRef.spread = workbook;
};
return (
<div class="sample-tutorial">
<Designer
styleInfo={{ height: "100%" }}
config={config}
designerInitialized={(designer) => initDesigner(designer)}
></Designer>
</div>
);
}
import * as React from "react";
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-io";
import "@mescius/spread-sheets-designer-resources-en";
GC.Spread.Common.CultureManager.culture("en-us");
import { Designer } from "@mescius/spread-sheets-designer-react";
import {registerlic} from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js'
registerlic(GC);
const config = GC.Spread.Sheets.Designer.DefaultConfig;
export class App extends React.Component {
constructor(props) {
super(props);
this.spread = null;
this.config = this.initRibbon();
}
initDesigner(designer) {
let workbook = designer.getWorkbook();
this.spread = workbook;
}
render() {
return (
<div class="sample-tutorial">
<Designer
styleInfo={{ height: "100%" }}
config={this.config}
designerInitialized={(designer) => this.initDesigner(designer)}
></Designer>
</div>
);
}
initRibbon() {
// clear ribbon
config.ribbon = [];
// add ribbon tab
let newTab = {
id: 'operate',
text: 'Favorite',
buttonGroups: [],
};
config.ribbon.unshift(newTab);
// add ribbon menu
let basicMenu = {
label: 'Frequently used operations',
thumbnailClass: 'Frequently used operations',
commandGroup: {
children: [
{
commands: ['formulaAutoSum'],
},
{
commands: ['insertTable'],
},
{
type: 'separator',
},
{
direction: 'vertical',
children: [
{
commands: ['fontFamily', 'fontSize', 'fontWeight', 'backColor', 'foreColor'],
},
{
commands: ['find', 'replace', 'setFilter'],
},
],
},
{
direction: 'vertical',
commands: ['showHideVGridLine', 'showHideHGridLine'],
},
],
},
};
config.ribbon[0].buttonGroups.unshift(basicMenu);
return config;
}
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/react/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> <!-- SystemJS -->
<script src="$DEMOROOT$/en/react/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('$DEMOROOT$/en/lib/react/license.js').then(function () {
System.import('./src/app');
});
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
.description {
margin: 10px;
width: 40%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true,
react: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/index.js',
'@mescius/spread-excelio': 'npm:@mescius/spread-excelio/index.js',
'@mescius/spread-sheets-barcode': 'npm:@mescius/spread-sheets-barcode/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-languagepackages': 'npm:@mescius/spread-sheets-languagepackages/index.js',
'@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js',
'@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-slicers': 'npm:@mescius/spread-sheets-slicers/index.js',
'@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-pivot-addon': 'npm:@mescius/spread-sheets-pivot-addon/index.js',
'@mescius/spread-sheets-designer': 'npm:@mescius/spread-sheets-designer/index.js',
'@mescius/spread-sheets-designer-react': 'npm:@mescius/spread-sheets-designer-react/index.js',
'@mescius/spread-sheets-designer-resources-en': 'npm:@mescius/spread-sheets-designer-resources-en/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'react': 'npm:react/umd/react.production.min.js',
'react-dom': 'npm:react-dom/umd/react-dom.production.min.js',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'jsx'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
