mitchdenny/ExcelSelectionChangedDemo.html

## ExcelSelectionChangedDemo.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Excel Selection Changed Demo</title>
    <link rel="stylesheet" type="text/css" href="../Content/Office.css" />
    <link rel="stylesheet" type="text/css" href="../Content/App.css" />
    <script src="../Scripts/jquery-1.7.1.js"></script>
    <!--<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>-->
    <script src="../Scripts/knockout-2.2.1.debug.js"></script>
    <script src="../Scripts/Office/1.0/MicrosoftAjax.js"></script>
    <script src="../Scripts/Office/1.0/office.js"></script>
    <script src="../Scripts/ExcelSelectionChangedDemo.js"></script>
</head>
<body>
    <div id="content">
        <h1>Excel Selection Demo</h1>
        <p>Thanks for using this App for Office. This is just a simple demonstration that dumps out a JSON representation of the selected data. You can view the source of this application <a href="http://github.com/MitchDenny/ExcelSelectionChangedDemo">at GitHub</a>.</p>
        <div id="history">
            <h2>Previous Selections</h2>
            <div class="previous-selections" data-bind="foreach: previousSelections">
                <div class="previous-selection">
                    <h3 data-bind="text: status() + ' (#' + sequence() + ')'"></h3>
                    <code data-bind="text: jsonText"></code>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

## ExcelSelectionChangedDemo.js
function PreviousSelection(status, jsonText, sequence) {
    var self = this;
    this.status = ko.observable(status);
    this.jsonText = ko.observable(jsonText);
    this.sequence = ko.observable(sequence);
}

function MainViewModel() {
    var self = this;
    this.previousSelections = ko.observableArray();
}

Office.initialize = function (reason) {
    $(document).ready(function () {

        var history = document.getElementById('History');
        viewModel = new MainViewModel();
        ko.applyBindings(viewModel, history);

        Office.context.document.addHandlerAsync(
            Office.EventType.DocumentSelectionChanged,
            SelectionChanged
            );
    });
};

function SelectionChanged(args) {
    args.document.getSelectedDataAsync(Office.CoercionType.Matrix, {}, DataSelected);
}

function DataSelected(result) {
    var sequence = viewModel.previousSelections().length + 1;
    var status = result.status;
    var jsonText = JSON.stringify(result, {}, ' ');
    var previousSelection = new PreviousSelection(status, jsonText, sequence);
    viewModel.previousSelections.unshift(previousSelection);
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<title>Excel Selection Changed Demo</title>
	<link rel="stylesheet" type="text/css" href="../Content/Office.css" />
	<link rel="stylesheet" type="text/css" href="../Content/App.css" />
	<script src="../Scripts/jquery-1.7.1.js"></script>
	<!--<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>-->
	<script src="../Scripts/knockout-2.2.1.debug.js"></script>
	<script src="../Scripts/Office/1.0/MicrosoftAjax.js"></script>
	<script src="../Scripts/Office/1.0/office.js"></script>
	<script src="../Scripts/ExcelSelectionChangedDemo.js"></script>
	</head>
	<body>
	<div id="content">
	<h1>Excel Selection Demo</h1>
	<p>Thanks for using this App for Office. This is just a simple demonstration that dumps out a JSON representation of the selected data. You can view the source of this application <a href="http://github.com/MitchDenny/ExcelSelectionChangedDemo">at GitHub</a>.</p>
	<div id="history">
	<h2>Previous Selections</h2>
	<div class="previous-selections" data-bind="foreach: previousSelections">
	<div class="previous-selection">
	<h3 data-bind="text: status() + ' (#' + sequence() + ')'"></h3>
	<code data-bind="text: jsonText"></code>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	function PreviousSelection(status, jsonText, sequence) {
	var self = this;
	this.status = ko.observable(status);
	this.jsonText = ko.observable(jsonText);
	this.sequence = ko.observable(sequence);
	}

	function MainViewModel() {
	var self = this;
	this.previousSelections = ko.observableArray();
	}

	Office.initialize = function (reason) {
	$(document).ready(function () {

	var history = document.getElementById('History');
	viewModel = new MainViewModel();
	ko.applyBindings(viewModel, history);

	Office.context.document.addHandlerAsync(
	Office.EventType.DocumentSelectionChanged,
	SelectionChanged
	);
	});
	};

	function SelectionChanged(args) {
	args.document.getSelectedDataAsync(Office.CoercionType.Matrix, {}, DataSelected);
	}

	function DataSelected(result) {
	var sequence = viewModel.previousSelections().length + 1;
	var status = result.status;
	var jsonText = JSON.stringify(result, {}, ' ');
	var previousSelection = new PreviousSelection(status, jsonText, sequence);
	viewModel.previousSelections.unshift(previousSelection);
	}