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.
<template>
<div class="sample-tutorial">
<gc-spread-sheets-designer :styleInfo='styleInfo' :config='config'/>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import "@mescius/spread-sheets-pivot-addon";
import "@mescius/spread-sheets-tablesheet";
import "@mescius/spread-sheets-io";
import '@mescius/spread-sheets-designer-resources-en';
import '@mescius/spread-sheets-designer'
import { registerlic } from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js'
registerlic(GC);
GC.Spread.Common.CultureManager.culture("en-us");
const styleInfo = { width: "100%", height: "97vh" };
const initConfig = () => {
let config = GC.Spread.Sheets.Designer.DefaultConfig,
commandNames = GC.Spread.Sheets.Designer.CommandNames;
// 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;
}
const config = ref(initConfig());
</script>
<style scoped>
.sample-tutorial {
position: relative;
height: 97vh;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
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;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/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-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/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-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-vue': 'npm:@mescius/spread-sheets-designer-vue/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'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
