SpreadJS Scenario Manager exposes APIs for reading and managing scenarios in a workbook.
This demo calls the ScenarioManager APIs directly from the side panel.
Read Scenarios
Use all() to get each scenario and render it in the list.
Apply And Restore
Apply a single scenario to compare forecast values, or restore one scenario from the applied stack.
Set Active Scenario
Choose the active scenario from the select box and pass that name to setActiveScenario.
Remove Scenarios
Delete one scenario by name, or clear all scenarios.
var spread;
var activeScenarioName = '';
var scenarioDescriptions = {
'Break-even': 'Finance target: sales required to cover fixed operating costs for the electric fan line.',
Pessimistic: 'Sales downside forecast with softer demand at the standard unit price.',
Optimistic: 'Sales upside forecast with stronger demand and selective price gains.'
};
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(workbook) {
workbook.fromJSON(json);
bindControls();
refreshPanel();
}
function bindControls() {
document.getElementById('toggleActive').onclick = toggleActiveScenario;
document.getElementById('restoreAll').onclick = function () {
spread.scenarioManager.restore();
showResult('scenarioManager.restore() restored all applied scenarios.', 'success');
refreshPanel();
};
document.getElementById('removeAll').onclick = function () {
spread.scenarioManager.remove();
activeScenarioName = '';
showResult('scenarioManager.remove() deleted all scenarios.', 'success');
refreshPanel();
};
}
function refreshPanel() {
var manager = spread.scenarioManager;
var scenarios = manager.all().map(getScenarioSummary);
var list = document.getElementById('scenarioList');
list.innerHTML = '';
scenarios.forEach(function (scenario) {
var card = document.createElement('div');
card.className = 'scenario-card';
card.innerHTML = '<div class="scenario-name">' + scenario.name + '</div><div class="scenario-detail">' + scenario.description + '</div>';
card.appendChild(createButton('Apply', function () { applyScenario(scenario.name); }));
card.appendChild(createButton('Restore', function () { restoreScenario(scenario.name); }));
card.appendChild(createButton('Delete', function () { deleteScenario(scenario.name); }));
list.appendChild(card);
});
document.getElementById('activeScenario').textContent = activeScenarioName || 'None';
document.getElementById('appliedScenarios').textContent = manager.getAppliedScenarios().join(', ') || 'None';
document.getElementById('toggleActive').value = activeScenarioName ? 'Deactivate' : 'Set Active';
}
function createButton(value, handler) {
var button = document.createElement('input');
button.type = 'button';
button.value = value;
button.onclick = handler;
return button;
}
function applyScenario(name) {
spread.scenarioManager.apply(name);
showResult('scenarioManager.apply("' + name + '") applied this scenario.', 'success');
refreshPanel();
}
function restoreScenario(name) {
spread.scenarioManager.restore(name);
showResult('scenarioManager.restore("' + name + '") removed this scenario from the applied stack.', 'success');
refreshPanel();
}
function deleteScenario(name) {
spread.scenarioManager.remove(name);
if (activeScenarioName === name) {
activeScenarioName = '';
}
showResult('scenarioManager.remove("' + name + '") deleted this scenario.', 'success');
refreshPanel();
}
function toggleActiveScenario() {
var manager = spread.scenarioManager;
if (activeScenarioName) {
manager.setActiveScenario(null);
showResult('scenarioManager.setActiveScenario(null) deactivated scenario capture.', 'success');
activeScenarioName = '';
} else {
var selectedName = document.getElementById('activeScenarioSelect').value;
if (!manager.get(selectedName)) {
showResult('Scenario "' + selectedName + '" was not found.', 'error');
refreshPanel();
return;
}
manager.setActiveScenario(selectedName);
activeScenarioName = selectedName;
showResult('scenarioManager.setActiveScenario("' + selectedName + '") activated scenario capture.', 'success');
}
refreshPanel();
}
function getScenarioSummary(scenario) {
return {
name: scenario.name,
description: getScenarioDescription(scenario)
};
}
function getScenarioDescription(scenario) {
var comment = '';
(scenario.overrides || []).forEach(function (override) {
comment = comment || override.comment || '';
});
return comment || scenarioDescriptions[scenario.name] || '';
}
function showResult(message, resultClass) {
var result = document.getElementById('result');
result.className = 'result-container ' + resultClass;
result.textContent = message;
}
<!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/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="panel-title">Scenario API</div>
<div id="result" class="result-container success">Operate Description</div>
<div class="option-group toolbar">
<input type="button" value="RestoreAll" id="restoreAll" />
<input type="button" value="RemoveAll" id="removeAll" />
</div>
<div class="option-group active-editor">
<select id="activeScenarioSelect">
<option value="Optimistic">Optimistic</option>
<option value="Pessimistic">Pessimistic</option>
<option value="Break-even">Break-even</option>
</select>
<input type="button" value="Set Active" id="toggleActive" />
</div>
<div class="option-group summary">
<div><span>Active:</span><strong id="activeScenario">None</strong></div>
<div><span>Applied:</span><strong id="appliedScenarios">None</strong></div>
</div>
<div class="option-group">
<div id="scenarioList" class="scenario-list"></div>
</div>
</div>
</div>
</body>
</html>
var json = {
"version": "18.0.0",
"name": "",
"docProps": {
"docPropsApp": {},
"docPropsCore": {}
},
"sheetCount": 1,
"users": [
{
"id": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}",
"name": "Ethan(VP of Sales)",
"color": "#26A69A"
},
{
"id": "{483FF98B-BB90-4EB4-8329-761CD56778AE}",
"name": "Emma(Finance Director)",
"color": "#A6A634"
}
],
"customList": [],
"defaultSheetTabStyles": {},
"builtInFileIcons": {},
"sheets": {
"Annual Sales Forecast": {
"name": "Annual Sales Forecast",
"isSelected": true,
"rowCount": 19,
"columnCount": 7,
"activeRow": 11,
"activeCol": 4,
"visible": 1,
"theme": "Office",
"data": {
"dataTable": {
"0": {
"0": {
"value": "Annual Sales Forecast of Electric Fans",
"style": {
"autoFormatter": {},
"font": "bold 16px Arial",
"fontWeight": "bold",
"fontSize": "16px",
"fontFamily": "Arial"
}
}
},
"1": {
"0": {
"value": "Actual sales through April and forecast inputs for the rest of the year."
}
},
"2": {
"0": {
"value": "Month",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"1": {
"value": "Units",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"2": {
"value": "Unit Price",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"3": {
"value": "Revenue",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"4": {
"value": "Cost",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"5": {
"value": "Profit",
"style": {
"backColor": "#e8f4ff",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
}
},
"3": {
"0": {
"value": "January",
"style": {
"backColor": "#eef8f1"
}
},
"1": {
"value": 622,
"style": {
"backColor": "#eef8f1",
"formatter": "#,##0"
}
},
"2": {
"value": 48,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
}
},
"3": {
"value": 29856,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 17416,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 12440,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"4": {
"0": {
"value": "February",
"style": {
"backColor": "#eef8f1"
}
},
"1": {
"value": 631,
"style": {
"backColor": "#eef8f1",
"formatter": "#,##0"
}
},
"2": {
"value": 48,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
}
},
"3": {
"value": 30288,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 17668,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 12620,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"5": {
"0": {
"value": "March",
"style": {
"backColor": "#eef8f1"
}
},
"1": {
"value": 713,
"style": {
"backColor": "#eef8f1",
"formatter": "#,##0"
}
},
"2": {
"value": 48,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
}
},
"3": {
"value": 34224,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 19964,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 14260,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"6": {
"0": {
"value": "April",
"style": {
"backColor": "#eef8f1"
}
},
"1": {
"value": 854,
"style": {
"backColor": "#eef8f1",
"formatter": "#,##0"
}
},
"2": {
"value": 48,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
}
},
"3": {
"value": 40992,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 23912,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 17080,
"style": {
"backColor": "#eef8f1",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"7": {
"0": {
"value": "May",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"formatter": "#,##0"
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"8": {
"0": {
"value": "June",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"formatter": "#,##0"
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"9": {
"0": {
"value": "July",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"10": {
"0": {
"value": "August",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"11": {
"0": {
"value": "September",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"12": {
"0": {
"value": "October",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"13": {
"0": {
"value": "November",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"14": {
"0": {
"value": "December",
"style": {
"backColor": "#fff8dc"
}
},
"1": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "#,##0",
"imeMode": 1
}
},
"2": {
"style": {
"backColor": "#fff8dc",
"hAlign": 3,
"vAlign": 0,
"themeFont": "Body",
"formatter": "$#,##0.00",
"imeMode": 1
}
},
"3": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 0
}
},
"4": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 1
}
},
"5": {
"value": 0,
"style": {
"backColor": "#fff8dc",
"formatter": "$#,##0.00"
},
"formula": {
"si": 2
}
}
},
"15": {
"0": {
"value": "Year Total",
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"1": {
"value": 2820,
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"formatter": "#,##0",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
},
"formula": {
"si": 3
}
},
"2": {
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"3": {
"value": 135360,
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"formatter": "$#,##0.00",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
},
"formula": {
"si": 3
}
},
"4": {
"value": 78960,
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"formatter": "$#,##0.00",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
},
"formula": {
"si": 3
}
},
"5": {
"value": 56400,
"style": {
"backColor": "#dff3e3",
"font": "bold 12px Arial",
"formatter": "$#,##0.00",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
},
"formula": {
"si": 3
}
}
},
"17": {
"0": {
"value": "Scenario override cells",
"style": {
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
},
"1": {
"value": "B8:C15",
"style": {
"font": "bold 12px Arial",
"fontWeight": "bold",
"fontSize": "12px",
"fontFamily": "Arial"
}
}
}
},
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"rowHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"colHeaderData": {
"defaultDataNode": {
"style": {
"themeFont": "Body"
}
}
},
"columns": [
{
"size": 143
},
{
"size": 88
},
{
"size": 92
},
{
"size": 116
},
{
"size": 108
},
{
"size": 116
}
],
"defaultData": {
"7": {},
"8": {},
"9": {},
"10": {},
"11": {},
"12": {},
"13": {},
"14": {}
},
"leftCellIndex": 0,
"topCellIndex": 0,
"selections": {
"0": {
"row": 11,
"col": 4,
"rowCount": 1,
"colCount": 1
},
"length": 1
},
"rowOutlines": {
"items": []
},
"columnOutlines": {
"items": []
},
"cellStates": {},
"states": {},
"outlineColumnOptions": {},
"autoMergeRangeInfos": [],
"sharedFormulas": {
"0": {
"formula": "B4*C4",
"baseRow": 3,
"baseColumn": 3,
"lastRow": 14,
"lastColumn": 3
},
"1": {
"formula": "B4*28",
"baseRow": 3,
"baseColumn": 4,
"lastRow": 14,
"lastColumn": 4
},
"2": {
"formula": "D4-E4",
"baseRow": 3,
"baseColumn": 5,
"lastRow": 14,
"lastColumn": 5
},
"3": {
"formula": "SUM(B4:B15)",
"baseRow": 15,
"baseColumn": 1,
"lastRow": 15,
"lastColumn": 5
},
"nextIndex": 4
},
"printInfo": {
"paperSize": {
"width": 850,
"height": 1100,
"kind": 1
}
},
"gridline": {
"showVerticalGridline": false
},
"index": 0,
"order": 0
}
},
"sheetTabCount": 0,
"namedPatterns": {},
"scenarios": {
"Break-even": {
"name": "Break-even",
"userId": "{483FF98B-BB90-4EB4-8329-761CD56778AE}",
"overrides": [
{
"sheetName": "Annual Sales Forecast",
"dataTable": {
"7": {
"1": {
"value": 900
},
"2": {
"value": 48
}
},
"8": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"9": {
"1": {
"value": 1200
},
"2": {
"value": 48
}
},
"10": {
"1": {
"value": 1200
},
"2": {
"value": 48
}
},
"11": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"12": {
"1": {
"value": 800
},
"2": {
"value": 48
}
},
"13": {
"1": {
"value": 600
},
"2": {
"value": 48
}
},
"14": {
"1": {
"value": 600
},
"2": {
"value": 48
}
}
}
}
]
},
"Pessimistic": {
"name": "Pessimistic",
"userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}",
"overrides": [
{
"sheetName": "Annual Sales Forecast",
"dataTable": {
"7": {
"1": {
"value": 960
},
"2": {
"value": 48
}
},
"8": {
"1": {
"value": 1100
},
"2": {
"value": 48
}
},
"9": {
"1": {
"value": 1800
},
"2": {
"value": 48
}
},
"10": {
"1": {
"value": 1800
},
"2": {
"value": 48
}
},
"11": {
"1": {
"value": 1200
},
"2": {
"value": 48
}
},
"12": {
"1": {
"value": 800
},
"2": {
"value": 48
}
},
"13": {
"1": {
"value": 600
},
"2": {
"value": 48
}
},
"14": {
"1": {
"value": 600
},
"2": {
"value": 48
}
}
}
}
]
},
"Optimistic": {
"name": "Optimistic",
"userId": "{483FF98B-BB90-4EB4-8329-761CD05F2BAE}",
"overrides": [
{
"sheetName": "Annual Sales Forecast",
"dataTable": {
"7": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"8": {
"1": {
"value": 1400
},
"2": {
"value": 55
}
},
"9": {
"1": {
"value": 2300
},
"2": {
"value": 55
}
},
"10": {
"1": {
"value": 2300
},
"2": {
"value": 55
}
},
"11": {
"1": {
"value": 1400
},
"2": {
"value": 48
}
},
"12": {
"1": {
"value": 1000
},
"2": {
"value": 48
}
},
"13": {
"1": {
"value": 700
},
"2": {
"value": 48
}
},
"14": {
"1": {
"value": 700
},
"2": {
"value": 48
}
}
}
}
]
}
},
"scenarioAdditionalInfo": {
"appliedScenarios": {},
"baseValues": {
"Annual Sales Forecast": {}
}
},
"pivotCaches": {}
};
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
font-family: Arial, sans-serif;
}
.sample-spreadsheets {
width: calc(100% - 340px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 340px;
height: 100%;
padding: 12px;
box-sizing: border-box;
background: #fbfbfb;
border-left: 1px solid #ddd;
overflow: auto;
}
.panel-title {
color: #243447;
font-weight: bold;
font-size: 16px;
margin-bottom: 6px;
}
.option-group {
margin-bottom: 14px;
}
.option-group label {
display: block;
margin-bottom: 6px;
font-weight: bold;
font-size: 12px;
}
input[type=button] {
padding: 7px 10px;
margin: 0 4px 6px 0;
background: #007acc;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-weight: bold;
}
input[type=button]:hover {
background: #005a9e;
}
.toolbar input[type=button] {
width: calc(50% - 6px);
}
.active-editor {
display: flex;
gap: 8px;
}
.active-editor select {
flex: 1;
height: 31px;
padding: 6px 8px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 12px;
}
.active-editor input[type=button] {
width: 110px;
margin-right: 0;
}
.result-container,
.summary,
.scenario-card {
border: 1px solid #ddd;
border-radius: 3px;
background: #fff;
}
.result-container {
min-height: 28px;
padding: 8px;
margin-bottom: 14px;
font-size: 12px;
}
.success {
color: #155724;
background: #d4edda;
border-color: #c3e6cb;
}
.error {
color: #721c24;
background: #f8d7da;
border-color: #f5c6cb;
}
.summary {
padding: 8px;
font-size: 12px;
}
.summary div {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.summary div:last-child {
margin-bottom: 0;
}
.scenario-card {
padding: 10px;
margin-bottom: 8px;
}
.scenario-name {
font-weight: bold;
margin-bottom: 4px;
}
.scenario-detail {
color: #555;
font-size: 12px;
margin-bottom: 8px;
line-height: 1.35;
}
.scenario-card input[type=button] {
width: calc(33.33% - 5px);
}
.scenario-card input[type=button]:nth-of-type(2) {
background: #6f5a2c;
}
.scenario-card input[type=button]:nth-of-type(2):hover {
background: #584621;
}
.scenario-card input[type=button]:nth-of-type(3) {
background: #b3261e;
}
.scenario-card input[type=button]:nth-of-type(3):hover {
background: #8c1d18;
}
