Create your first SharePoint 2013 App via Napa

In this article i will show you how to develop SharePoint 2013 App

Steps:

1. Sign up for an Office 365 Developer Site here
2. Go to site content and click add in app
3. Select  Napa App from SharePoint store

3. Create  Developer site collection
4. Select the "Build an app" option

5. Select "App for SharePoint" option
     and provide name for app

6. In this example i will show weather forecast of Ethiopia capital city
(see older post display-current-weather)

Html
in Defualt.aspx append this table into
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> tag

 <table border="0" width="100%">
    <tr id="WtitleImage"></tr>
    <tr id="Wc"></tr>
</table>
    <div id="WIcon" />

Css
in App.Css file append classes

#wxWc {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 1px 6px 0 8px;
    overflow: hidden;
}

#wxWc {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 1px 6px 0 8px;
    overflow: hidden;
}

#WIcon {
    display: inline-block;
    font: 20px/28px Arial,Verdana,sans-serif;
    color: #333;
    vertical-align: top;
    padding-top: 5px;
    margin-left:
}

Java script 
in App.js file append this function
and in document redy function  create a call to function

    function showAddisAbeba()
    {
        var u="c";
    var loc="ETXX0001";
    var query = "SELECT item.condition \
            FROM weather.forecast \
            WHERE location='" + loc + "' AND u='" + u + "'",    url = 'https://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json';
        $.ajax({
            url: url,
            dataType: 'jsonp', // this automatically disables cache too
            success: function(data) {
                var info = data.query.results.channel.item.condition;
                $('#WIcon').css({
                    backgroundPosition: '-' + (61 * info.code) + 'px 0'
                }).attr({
                    title: info.text
                                });

    // append to table
                            $('#WtitleImage').append('<td>Addis Abeba Ethiopia</br><img src="http://l.yimg.com/a/i/us/we/52/' + info.code + '.gif" width="34" height="34" title="' + info.text + '" /></td>');
                             $('#Wc').append('<td>'+info.temp + '&deg;' +(u.toUpperCase())+'</td>');        }
        });
    }

7.Click Run Project icon

8. Result

9.Under site content option we will see our app

Do you like this post?
Buy me a cup of coffe to show your appreciation!