SharePoint 2013 Hosted App (Part 2) – Create simple SharePoint Hosted App

Its been a while since the last time I’ve created my post for SharePoint 2013 Hosted App (Part 1) and now I would like to continue the series.

SharePoint Hosted App series:

Without further ado, please find below the list of steps to create SharePoint Hosted App:

1. Create new Project using App for SharePoint template in Microsoft Visual Studio 2013, enter the Name and Location, then click Ok

myfirstapp1

2. In Specifying the app for SharePoint settings window, enter the Site Collection URL and select SharePoint-hosted, then click Finish

myfirstapp2

3. By default, the SharePoint App Project already has Default.aspx with App.js and App.css linked. I’ve updated the Default.aspx to have message div and a button

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="VB" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <meta name="WebPartPageExpansion" content="full" />

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div id="message">
        Hello ...
    </div>

    <div>
        <input id="clickMe" type="button" value="I can guess your name" />
    </div>
</asp:Content>

4. In App.js file, I’ve implemented clickMe_Click function

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
    MyFirstApp = {
        user: '',
        init: function (element) {
            var context = SP.ClientContext.get_current();
            var user = context.get_web().get_currentUser();
            context.load(user);
            MyFirstApp.user = user;
        },
        getUserName: function () {
            var context = SP.ClientContext.get_current();
            var user = context.get_web().get_currentUser();
            context.load(user);
            context.executeQueryAsync(MyFirstApp.onGetUserNameSuccess, MyFirstApp.onGetUserNameError);
        },
        onGetUserNameSuccess: function () {
            $('#message').text('Hello ' + MyFirstApp.user.get_title());
        },
        onGetUserNameError: function (sender, args) {
            $('#message').text('Failed to get user name. Error:' + args.get_message());
        }
    }

    // initialization
    MyFirstApp.init($('#myHomeTown'));

    // attach clickMe onclick event
    $('#clickMe').onclick = MyFirstApp.getUserName();
});

5. In App.cs file, I’ve added bit of styling to message div

#message {
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
}

6. Rebuild the solution

myfirstapp6

7. Publish the solution, then click Package the app

myfirstapp7

myfirstapp8

8. Browse to your App Catalog Site. Click new app to add new custom app, then enter the Name, Short Description, Long Description, checked Enabled and click Save

myfirstapp9

myfirstapp9.2

9. Browse to your Site Collection > Site Actions > Site Contents > Add an App > From your Organization > click MyFirstApp > Add it to add the custom app to your SharePoint site

myfirstapp10

10. Click MyFirstApp from your Site Collection > Site Actions > Site Contents, it will launch your new custom app

myfirstapp11

myfirstapp11.2

Advertisements

Tagged: , , ,

3 thoughts on “SharePoint 2013 Hosted App (Part 2) – Create simple SharePoint Hosted App

  1. […] Part 2: Create simple SharePoint Hosted App […]

  2. […] from my previous post for SharePoint 2013 Hosted App (Part 2), In this post I would like to show you another entrance to your SharePoint App. SharePoint App can […]

  3. […] Part 2: Create simple SharePoint Hosted App […]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: