MyAppPage.html:-
------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>PageTitle</title>
<link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
<link href="../App.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js" type="text/javascript"></script>
<script src="../App.js" type="text/javascript"></script>
<script src="MyAppPage.js" type="text/javascript"></script>
</head>
<body>
<div style="padding: 15px; overflow: auto; border: .2em solid #000;">
<table>
<tr>
<td>
<button id="get-text" style="width: 100px;">Get symbol</button>
</td>
<td>
<button id="bind-text" style="width: 100px;">Bind to cell</button>
</td>
</tr>
<tr>
<td>
<input id="input" style="width: 100px;" />
</td>
<td>
<button id="add-text" style="width: 100px;">Add symbol</button>
</td>
</tr>
</table>
<h1>
<div id="stock-name"></div>
</h1>
<table border="true">
<tr>
<td>
<table>
<tr>
<td>Prev close:</td>
<td id="prev-close"></td>
</tr>
<tr>
<td>Open:</td>
<td id="open"></td>
</tr>
<tr>
<td>Bid:</td>
<td id="bid"></td>
</tr>
<tr>
<td>Ask:</td>
<td id="ask"></td>
</tr>
<tr>
<td>1y Target Est::</td>
<td id="target-est"></td>
</tr>
<tr>
<td>Days range:</td>
<td id="days-range"></td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Volume:</td>
<td id="volume"></td>
</tr>
<tr>
<td>Avg daily volume:</td>
<td id="avg-volume"></td>
</tr>
<tr>
<td>Market capitalization:</td>
<td id="market-cap"></td>
</tr>
<tr>
<td>PE Ratio:</td>
<td id="pe-ratio"></td>
</tr>
<tr>
<td>Earnings p share:</td>
<td id="earnings"></td>
</tr>
<tr>
<td>Dividend yield:</td>
<td id="yield"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
MyAppPage.js:-
-----------------
/// <reference path="../App.js" />
(function () {
"use strict";
// The initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
$('#get-text').click(getTextFromDocument);
$('#add-text').click(addTextToDocument);
$('#bind-text').click(addBindingFromSelection);
Office.context.document.addHandlerAsync
(Office.EventType.DocumentSelectionChanged, updateApp);
});
}
})();
function getTextFromDocument() {
Office.context.document.getSelectedDataAsync(Office.CoercionType.Text,
{
valueFormat: "unformatted", filterType: "all"
},
function (asyncResult) {
showStockData(asyncResult.value);
});
}
function showStockData(symbol) {
// Yahoo YQL - http://developer.yahoo.com/yql/
var yql = 'select * from yahoo.finance.quotes where symbol in (\'' + symbol + '\')';
var queryURL = 'https://query.yahooapis.com/v1/public/yql?q=' + yql + '&format=json&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=?';
$.getJSON(queryURL, function (results) {
if (results.query.count > 0) {
var quotes = results.query.results.quote;
$('#stock-name').text(quotes.Name);
$('#prev-close').text(quotes.PreviousClose);
$('#open').text(quotes.Open);
$('#bid').text(quotes.Bid);
$('#ask').text(quotes.Ask);
$('#target-est').text(quotes.OneyrTargetPrice);
$('#days-range').text(quotes.DaysRange);
$('#volume').text(quotes.Volume);
$('#avg-volume').text(quotes.AverageDailyVolume);
$('#market-cap').text(quotes.MarketCapitalization);
$('#pe-ratio').text(quotes.PERatio);
$('#earnings').text(quotes.EarningsShare);
$('#yield').text(quotes.DividendYield);
}
});
}
function addTextToDocument() {
var e = document.getElementById("input");
var text = e.value;
Office.context.document.setSelectedDataAsync(text,
function (asyncResult) { });
}
function updateApp() {
getTextFromDocument();
}
function addBindingFromSelection() {
Office.context.document.bindings.addFromSelectionAsync(Office.BindingType.Text, { id: 'MyBinding' },
function (asyncResult) {
Office.select("bindings#MyBinding").addHandlerAsync
(Office.EventType.BindingDataChanged, onBindingSelectionChanged);
}
);
}
function onBindingSelectionChanged(eventArgs) {
Office.select("bindings#MyBinding").getDataAsync
(function (asyncResult) {
if (asyncResult.value !== "") {
showStockData(asyncResult.value);
}
});
}
Click on 'Run' Button. then below excel will open in other window.
Thank You.