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

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts