SharePoint 2013 Hosted App (Part 4) – Create App Part

Following 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 be added like a web part as well into web part zone.

SharePoint Hosted App series:

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

1. Continue from previous solution in Part 2, right click on the MyFirstApp project > Add > New Item … 

myfirstapp12

2. In New Item page, select Client Web Part (Host Web) and click Add

myfirstapp13

3. In Specify the client web part page window, select Create a new web page for the client web part content, enter Page Name and click Finish

myfirstapp13.2

4. Now the project should have additional MyFirstAppPart module with Elements.xml and MyFirstAppPart.aspx page. Update MyFirstAppPart.aspx page to have:

  • same body content as Default.aspx
  • App.js and App.css linked
<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, 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" %>
<%@ 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" %>

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<html>
<head>
    <title></title>

    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <script type="text/javascript">
        // Set the style of the client web part page to be consistent with the host web.
        (function () {
            'use strict';

            var hostUrl = '';
            if (document.URL.indexOf('?') != -1) {
                var params = document.URL.split('?')[1].split('&');
                for (var i = 0; i < params.length; i++) {
                    var p = decodeURIComponent(params[i]);
                    if (/^SPHostUrl=/i.test(p)) {
                        hostUrl = p.split('=')[1];
                        document.write('<link rel="stylesheet" href="' + hostUrl + '/_layouts/15/defaultcss.ashx" />');
                        break;
                    }
                }
            }
            if (hostUrl == '') {
                document.write('<link rel="stylesheet" href="/_layouts/15/1033/styles/themable/corev15.css" />');
            }
        })();
    </script>
    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
</head>
<body>
    <div id="message">
        Hello ...
    </div>

    <div>
        <input id="clickMe" type="button" value="I can guess your name" />
    </div>
</body>
</html>

5. Rebuild the solution

myfirstapp6

6. Publish the solution, then click Package the app

myfirstapp7

myfirstapp8

7. 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

8. Remove existing MyFirstApp from your Site Collection > Site Actions > Site Contents

myfirstapp17

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

myfirstapp10

10. Edit Home.aspx page to add Part and Save back the page

myfirstapp15

myfirstapp16

Advertisements

Tagged: , , , ,

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

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: