Tuesday, August 6, 2013

Create your first content app for Excel by using "Napa" Office 365 Development Tools

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.

No comments:

Post a Comment