This sample shows the following:
Hide tabs and buttons in the ribbon and context menu and show only the items you need.
Change the text of the insert and delete buttons on the home tab and the confirm and cancel buttons on the formatting dialog.
Disable the indentation and direction dropdown list.
When viewing the code, you can see the following steps are taken:
Create a new Designer config.
Hide specific tabs.
Hide specific button groups in each tab.
Disable buttons in the ribbon.
Customize the localization by changing the text for buttons and tabs using the Designer.getResources() call.
Remove certain commands from the context menu.
Replace the current Designer config with 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 initRibbon = () => {
let commandNames = GC.Spread.Sheets.Designer.CommandNames, config = GC.Spread.Sheets.Designer.DefaultConfig;
// Hide tabs except "Insert", "Page Layout", "Formula" and "Settings"
config.ribbon = config.ribbon.filter(
(rb) => rb.id !== 'insert' && rb.id !== 'pageLayout' && rb.id !== 'formulas' && rb.id !== 'settings'
);
// Hide button except groups "Number", "Style" and "Edit" on Home tab
let homeTab = config.ribbon.find((r) => r.id === 'home');
homeTab.buttonGroups = homeTab.buttonGroups.filter(
(bg) => bg.label !== 'Numbers' && bg.label !== 'Styles' && bg.label !== 'Editing'
);
// Hide button except groups "Data Binding", "Query and Connection", "Outline" in Data tab
let dataTab = config.ribbon.find((r) => r.id === 'data');
dataTab.buttonGroups = dataTab.buttonGroups.filter(
(bg) => bg.label !== 'Data Binding' && bg.label !== 'Queries & Connections' && bg.label !== 'Outline'
);
// Hide button except groups "Zoom", "Viewport" and "Pane" in View tab
let viewTab = config.ribbon.find((r) => r.id === 'view');
viewTab.buttonGroups = viewTab.buttonGroups.filter(
(bg) => bg.label !== 'Zoom' && bg.label !== 'Viewport' && bg.label !== 'Pane'
);
// Hide "Format" except button in cell button group
let cellButtonGroup = homeTab.buttonGroups.find((bg) => bg.label === 'Cells');
if (cellButtonGroup) {
cellButtonGroup.commandGroup.children = cellButtonGroup.commandGroup.children.filter(
(cg) => cg.command !== 'cellsFormat'
);
}
// Disable some buttons
config.commandMap = {
// disable decreaseIndent
decreaseIndent: {
enableContext: 'false'
},
// disable increaseIndent
increaseIndent: {
enableContext: 'false'
},
// Disable orientationList
orientationList: {
enableContext: 'false'
}
};
// Customizing the localization of the ribbon container
var resources = GC.Spread.Sheets.Designer.getResources();
resources.ribbon.home.home = 'HOME';
resources.ribbon.data.data = 'DATA';
resources.ribbon.view.view = 'VIEW';
resources.ok = 'OK';
resources.cancel = 'CANCEL';
resources.formatDialog.title = 'FORMAT DIALOG';
resources.ribbon.home.wrapText = 'WRAP TEXT';
resources.ribbon.home.insert = 'INSERT';
resources.ribbon.home.Delete = 'DELETE';
GC.Spread.Sheets.Designer.setResources(resources);
// Remove unnecessary context menu
if (config.contextMenu) {
const deleteMenu = [
commandNames.RichText, // RichText
commandNames.InsertComment, // InsertComment
commandNames.DefineName, // DefineName
commandNames.CellTag, // CellTag
commandNames.RowTag, // RowTag
commandNames.ContextMenuOutlineColumn, // ContextMenuOutlineColumn
commandNames.DesignerPasteFormulaFormatting // DesignerPasteFormulaFormatting
];
for (let i = 0; i < config.contextMenu.length; i++) {
var item = config.contextMenu[i];
if (deleteMenu.includes(item)) {
config.contextMenu.splice(i, 1);
}
}
}
return config;
};
export function AppFunc() {
let config = initRibbon();
return (
<div class="sample-tutorial">
<Designer
styleInfo={{ width: "100%", height: "97vh" }}
config={config}
></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);
export class App extends React.Component {
constructor(props) {
super(props);
this.config = this.initRibbon();
}
render() {
return (
<div class="sample-tutorial">
<Designer
styleInfo={{ width: "100%", height: "97vh" }}
config={this.config}
></Designer>
</div>
);
}
initRibbon() {
let commandNames = GC.Spread.Sheets.Designer.CommandNames, config = GC.Spread.Sheets.Designer.DefaultConfig;
// Hide tabs except "Insert", "Page Layout", "Formula" and "Settings"
config.ribbon = config.ribbon.filter(
(rb) => rb.id !== 'insert' && rb.id !== 'pageLayout' && rb.id !== 'formulas' && rb.id !== 'settings'
);
// Hide button except groups "Number", "Style" and "Edit" on Home tab
let homeTab = config.ribbon.find((r) => r.id === 'home');
homeTab.buttonGroups = homeTab.buttonGroups.filter(
(bg) => bg.label !== 'Numbers' && bg.label !== 'Styles' && bg.label !== 'Editing'
);
// Hide button except groups "Data Binding", "Query and Connection", "Outline" in Data tab
let dataTab = config.ribbon.find((r) => r.id === 'data');
dataTab.buttonGroups = dataTab.buttonGroups.filter(
(bg) => bg.label !== 'Data Binding' && bg.label !== 'Queries & Connections' && bg.label !== 'Outline'
);
// Hide button except groups "Zoom", "Viewport" and "Pane" in View tab
let viewTab = config.ribbon.find((r) => r.id === 'view');
viewTab.buttonGroups = viewTab.buttonGroups.filter(
(bg) => bg.label !== 'Zoom' && bg.label !== 'Viewport' && bg.label !== 'Pane'
);
// Hide "Format" except button in cell button group
let cellButtonGroup = homeTab.buttonGroups.find((bg) => bg.label === 'Cells');
if (cellButtonGroup) {
cellButtonGroup.commandGroup.children = cellButtonGroup.commandGroup.children.filter(
(cg) => cg.command !== 'cellsFormat'
);
}
// Disable some buttons
config.commandMap = {
// disable decreaseIndent
decreaseIndent: {
enableContext: 'false'
},
// disable increaseIndent
increaseIndent: {
enableContext: 'false'
},
// Disable orientationList
orientationList: {
enableContext: 'false'
}
};
// Customizing the localization of the ribbon container
var resources = GC.Spread.Sheets.Designer.getResources();
resources.ribbon.home.home = 'HOME';
resources.ribbon.data.data = 'DATA';
resources.ribbon.view.view = 'VIEW';
resources.ok = 'OK';
resources.cancel = 'CANCEL';
resources.formatDialog.title = 'FORMAT DIALOG!';
resources.ribbon.home.wrapText = 'WRAP TEXT';
resources.ribbon.home.insert = 'INSERT';
resources.ribbon.home.Delete = 'DELETE';
GC.Spread.Sheets.Designer.setResources(resources);
// Remove unnecessary context menu
if (config.contextMenu) {
const deleteMenu = [
commandNames.RichText, // RichText
commandNames.InsertComment, // InsertComment
commandNames.DefineName, // DefineName
commandNames.CellTag, // CellTag
commandNames.RowTag, // RowTag
commandNames.ContextMenuOutlineColumn, // ContextMenuOutlineColumn
commandNames.DesignerPasteFormulaFormatting // DesignerPasteFormulaFormatting
];
for (let i = 0; i < config.contextMenu.length; i++) {
var item = config.contextMenu[i];
if (deleteMenu.includes(item)) {
config.contextMenu.splice(i, 1);
}
}
}
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: 97vh;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#ribbonHost {
height: 100%;
}
.description {
margin: 10px;
width: 40%;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
th {
background-color: #dcdcdc;
}
tr:nth-child(even) {
background-color: #f5f5f5;
}
(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-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js',
'@mescius/spread-sheets-barcode': 'npm:@mescius/spread-sheets-barcode/index.js',
'@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js',
'@mescius/spread-sheets-languagepackages': 'npm:@mescius/spread-sheets-languagepackages/index.js',
'@mescius/spread-sheets-pivot-addon': 'npm:@mescius/spread-sheets-pivot-addon/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-slicers': 'npm:@mescius/spread-sheets-slicers/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);