You can add hyperlink to shape, line or group shape, tooltip and hyperlink target also support.
You can add hyperlink to shape, line or group shape using the following code:
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 { SpreadSheets } from '@mescius/spread-sheets-react';
import "@mescius/spread-sheets-shapes";
import { getData } from './app.data';
import { Stopwatch} from './stopwatch';
export function AppFunc() {
let spread = null;
const initSpread = (currSpread) => {
spread = currSpread;
spread.suspendPaint();
spread.setSheetCount(5);
let sheetData = getData();
var sheet1 = spread.getSheet(0);
var sheet2 = spread.getSheet(1);
var sheet3 = spread.getSheet(2);
var sheet4 = spread.getSheet(3);
var sheet5 = spread.getSheet(4);
sheet1.fromJSON(sheetData.shape_hyperlink_data_sheet1);
sheet2.fromJSON(sheetData.shape_hyperlink_data_sheet2);
sheet3.fromJSON(sheetData.shape_hyperlink_data_sheet3);
sheet4.fromJSON(sheetData.shape_hyperlink_data_sheet4);
sheet5.fromJSON(sheetData.shape_hyperlink_data_sheet5);
initSheet1(sheet1);
initSheet2(sheet2);
initSheet3(sheet3);
initSheet4(sheet4);
initSheet5(sheet5);
spread.resumePaint();
}
const initSheet1 = (sheet) => {
var rightArrow1 = sheet.shapes.add("rightArrow1", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 133, 143, 35);
applyUsageShapeStyle(rightArrow1);
rightArrow1.hyperlink({ url: "sjs://'Sheet Location'!A1", target: 0, tooltip: "goes to 'Sheet Locaton'!A1" });
var rightArrow2 = sheet.shapes.add("rightArrow2", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 193, 143, 35);
applyUsageShapeStyle(rightArrow2);
rightArrow2.hyperlink({ url: "sjs://'Email Address'!A1", target: 0, tooltip: "goes to 'Email Address'!A1" });
var rightArrow3 = sheet.shapes.add("rightArrow3", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 254, 143, 35);
applyUsageShapeStyle(rightArrow3);
rightArrow3.hyperlink({ url: "sjs://'Access URL'!A1", target: 0, tooltip: "goes to 'Access URL'!A1" });
var rightArrow4 = sheet.shapes.add("rightArrow4", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 314, 143, 35);
applyUsageShapeStyle(rightArrow4);
rightArrow4.hyperlink({ url: "sjs://'Custom Command'!A1", target: 0, tooltip: "goes to 'Custom Command'!A1" });
}
const initSheet2 = (sheet) => {
backToFirstPage(sheet);
}
const initSheet3 = (sheet) => {
backToFirstPage(sheet);
var rect1 = sheet.shapes.add("rectangle1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 175, 327, 268, 35);
var email = 'JoneBarkley@example.com';
applyLinkageShapeStyle(rect1, email);
rect1.hyperlink({ url: email, target: 0 });
}
const initSheet4 = (sheet) => {
backToFirstPage(sheet);
var rect2 = sheet.shapes.add("rectangle2", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 209, 327, 268, 35);
applyLinkageShapeStyle(rect2, 'www.spreadjs.com');
rect2.hyperlink({ url: "http://developer.mescius.com", target: 0, tooltip: "goes to SpreadJS" });
}
const initSheet5 = (sheet) => {
backToFirstPage(sheet);
var rect3 = sheet.shapes.add("rectangle3", GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, 261, 188, 280, 140);
applyTimerShapeStyle(rect3, 'Click here to start a timer');
var stopWatch = new Stopwatch(rect3);
rect3.hyperlink({
command: function () {
if (!stopWatch.started) {
stopWatch.start();
} else {
stopWatch.stop();
}
}
});
}
const backToFirstPage = (sheet) => {
var leftArrow = sheet.shapes.add("rightArrow1", GC.Spread.Sheets.Shapes.AutoShapeType.leftArrowCallout, 525, 410, 189, 35);
applyUsageShapeStyle(leftArrow, 'Back To First Page');
leftArrow.hyperlink({ url: "sjs://'Shape Hyperlink'!A1", target: 0, tooltip: "goes to 'Shape Hyperlink'!A1" });
}
const applyUsageShapeStyle = (shape, text) => {
shape.adjustments([0.38, 0.36, 0.52, 0.8]);
shape.text(text || 'Check Usage');
var style = shape.style();
style.fill.type = 0;
style.line.color = "rgb(11,116,77)";
style.textEffect.color = "rgb(11,116,77)";
style.textFrame.vAlign = 1;
shape.style(style);
}
const applyLinkageShapeStyle = (shape, text) => {
shape.text(text);
var style = shape.style();
style.fill.type = 0;
style.line.transparency = 1;
style.textEffect.color = "rgb(5,99,193)";
style.textFrame.vAlign = 1;
style.textEffect.font = "20px Calibri"
shape.style(style);
}
const applyTimerShapeStyle = (shape, text) => {
shape.text(text);
var style = shape.style();
style.fill.type = 0;
style.line.color = "rgb(11,116,77)";
style.textEffect.color = "rgb(11,116,77)";
style.textFrame.hAlign = 1;
style.textFrame.vAlign = 1;
style.textEffect.font = "22px Calibri"
shape.style(style);
}
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => initSpread(spread)}>
</SpreadSheets>
</div>
</div>);
}
import * as React from 'react';
import GC from '@mescius/spread-sheets';
import { SpreadSheets } from '@mescius/spread-sheets-react';
import "@mescius/spread-sheets-shapes";
import { getData } from './app.data';
import { Stopwatch} from './stopwatch';
const Component = React.Component;
export class App extends Component {
constructor(props) {
super(props);
this.spread = null;
}
render() {
return (
<div class="sample-tutorial">
<div class="sample-spreadsheets">
<SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
</SpreadSheets>
</div>
</div>);
}
initSpread(spread) {
let self = this;
self.spread = spread;
spread.suspendPaint();
spread.setSheetCount(5);
let sheetData = getData();
var sheet1 = spread.getSheet(0);
var sheet2 = spread.getSheet(1);
var sheet3 = spread.getSheet(2);
var sheet4 = spread.getSheet(3);
var sheet5 = spread.getSheet(4);
sheet1.fromJSON(sheetData.shape_hyperlink_data_sheet1);
sheet2.fromJSON(sheetData.shape_hyperlink_data_sheet2);
sheet3.fromJSON(sheetData.shape_hyperlink_data_sheet3);
sheet4.fromJSON(sheetData.shape_hyperlink_data_sheet4);
sheet5.fromJSON(sheetData.shape_hyperlink_data_sheet5);
self.initSheet1(sheet1);
self.initSheet2(sheet2);
self.initSheet3(sheet3);
self.initSheet4(sheet4);
self.initSheet5(sheet5);
spread.resumePaint();
}
initSheet1(sheet) {
let self = this;
var rightArrow1 = sheet.shapes.add("rightArrow1", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 133, 143, 35);
self.applyUsageShapeStyle(rightArrow1);
rightArrow1.hyperlink({ url: "sjs://'Sheet Location'!A1", target: 0, tooltip: "goes to 'Sheet Locaton'!A1" });
var rightArrow2 = sheet.shapes.add("rightArrow2", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 193, 143, 35);
self.applyUsageShapeStyle(rightArrow2);
rightArrow2.hyperlink({ url: "sjs://'Email Address'!A1", target: 0, tooltip: "goes to 'Email Address'!A1" });
var rightArrow3 = sheet.shapes.add("rightArrow3", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 254, 143, 35);
self.applyUsageShapeStyle(rightArrow3);
rightArrow3.hyperlink({ url: "sjs://'Access URL'!A1", target: 0, tooltip: "goes to 'Access URL'!A1" });
var rightArrow4 = sheet.shapes.add("rightArrow4", GC.Spread.Sheets.Shapes.AutoShapeType.rightArrowCallout, 580, 314, 143, 35);
self.applyUsageShapeStyle(rightArrow4);
rightArrow4.hyperlink({ url: "sjs://'Custom Command'!A1", target: 0, tooltip: "goes to 'Custom Command'!A1" });
}
initSheet2(sheet) {
this.backToFirstPage(sheet);
}
initSheet3(sheet) {
this.backToFirstPage(sheet);
var rect1 = sheet.shapes.add("rectangle1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 175, 327, 268, 35);
var email = 'JoneBarkley@example.com';
this.applyLinkageShapeStyle(rect1, email);
rect1.hyperlink({ url: email, target: 0 });
}
initSheet4(sheet) {
this.backToFirstPage(sheet);
var rect2 = sheet.shapes.add("rectangle2", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 209, 327, 268, 35);
this.applyLinkageShapeStyle(rect2, 'www.spreadjs.com');
rect2.hyperlink({ url: "http://developer.mescius.com", target: 0, tooltip: "goes to SpreadJS" });
}
initSheet5(sheet) {
this.backToFirstPage(sheet);
var rect3 = sheet.shapes.add("rectangle3", GC.Spread.Sheets.Shapes.AutoShapeType.roundedRectangle, 261, 188, 280, 140);
this.applyTimerShapeStyle(rect3, 'Click here to start a timer');
var stopWatch = new Stopwatch(rect3);
rect3.hyperlink({
command: function () {
if (!stopWatch.started) {
stopWatch.start();
} else {
stopWatch.stop();
}
}
});
}
backToFirstPage(sheet) {
var leftArrow = sheet.shapes.add("rightArrow1", GC.Spread.Sheets.Shapes.AutoShapeType.leftArrowCallout, 525, 410, 189, 35);
this.applyUsageShapeStyle(leftArrow, 'Back To First Page');
leftArrow.hyperlink({ url: "sjs://'Shape Hyperlink'!A1", target: 0, tooltip: "goes to 'Shape Hyperlink'!A1" });
}
applyUsageShapeStyle(shape, text) {
shape.adjustments([0.38, 0.36, 0.52, 0.8]);
shape.text(text || 'Check Usage');
var style = shape.style();
style.fill.type = 0;
style.line.color = "rgb(11,116,77)";
style.textEffect.color = "rgb(11,116,77)";
style.textFrame.vAlign = 1;
shape.style(style);
}
applyLinkageShapeStyle(shape, text) {
shape.text(text);
var style = shape.style();
style.fill.type = 0;
style.line.transparency = 1;
style.textEffect.color = "rgb(5,99,193)";
style.textFrame.vAlign = 1;
style.textEffect.font = "20px Calibri"
shape.style(style);
}
applyTimerShapeStyle(shape, text) {
shape.text(text);
var style = shape.style();
style.fill.type = 0;
style.line.color = "rgb(11,116,77)";
style.textEffect.color = "rgb(11,116,77)";
style.textFrame.hAlign = 1;
style.textFrame.vAlign = 1;
style.textEffect.font = "22px Calibri"
shape.style(style);
}
}
<!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">
<!-- 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;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
(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-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/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);
