Monday, October 28, 2013

Display app web content in the host web using an app part

Display app web content in the host web using an app part
http://msdn.microsoft.com/en-us/library/office/apps/fp179921.aspx
http://code.msdn.microsoft.com/office/SharePoint-2013-Display-be8dac16

vs2012->file->new->project
c#->office/sharepoint->apps->apps for sharepoint 2013-> "AppClientWebPart"

AppClientWebPart-> right click->add new item-> select "client webpart (Host Web)-> "ClientWebPart1"

open AppClientWebPart-> Pages-> ClientWebPart1.aspx
<%@ 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" />

<h1 id="editmodehdr" style="display:none">
    The app part is in edit mode.
</h1>

<div id="content">
    String property: <span id="strProp"></span><br />
    Integer property: <span id="intProp"></span><br />
    Boolean property: <span id="boolProp"></span><br />
    Enumeration property: <span id="enumProp"></span><br />
</div>

<script type="text/javascript">
    "use strict";
    var params = document.URL.split("?")[1].split("&");
    var strProp;
    var intProp;
    var boolProp;
    var enumProp;
    var editmode;

    for (var i = 0; i < params.length; i = i + 1) {
        var param = params[i].split("=");
        if (param[0] == "strProp")
            strProp = decodeURIComponent(param[1]);
        else if (param[0] == "intProp")
            intProp = parseInt(param[1]);
        else if (param[0] == "boolProp")
            boolProp = (param[1] == "true");
        else if (param[0] == "enumProp")
            enumProp = decodeURIComponent(param[1]);
        else if (param[0] == "editmode")
            editmode = decodeURIComponent(param[1]);
    }

    if (editmode == 1) {
        document.getElementById("editmodehdr").style.display = "inline";
        document.getElementById("content").style.display = "none";
    }
    else {
        document.getElementById("strProp").innerText = strProp;
        document.getElementById("intProp").innerText = intProp;
        document.getElementById("boolProp").innerText = boolProp;
        document.getElementById("enumProp").innerText = enumProp;

        document.getElementById("editmodehdr").style.display = "none";
        document.getElementById("content").style.display = "inline";
    }

</script>
open AppClientWebPart-> ClientWebPart1-> Elements.xml
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
       <ClientWebPart Name="ClientWebPart1"
                              Title="ClientWebPart1 Title"
                              Description="ClientWebPart1 Description"
                              DefaultWidth="300"
                              DefaultHeight="200">
              <Content
                           Src="~appWebUrl/Pages/ClientWebPart1.aspx?strProp=_strProp_&amp;intProp=_intProp_&amp;boolProp=_boolProp_&amp;enumProp=_enumProp_&amp;editmode=_editMode_"
                           Type="html"/>
              <Properties>
                     <Property
                           Name="strProp"
                           Type="string"
                           RequiresDesignerPermission="true"
                           DefaultValue="String default value"
                           WebCategory="Basic app part category"
                           WebDisplayName="A property of type string.">
                     </Property>
                     <Property
                           Name="intProp"
                           Type="int"
                           RequiresDesignerPermission="true"
                           DefaultValue="0"
                           WebCategory="Basic app part category"
                           WebDisplayName="A property of type integer.">
                     </Property>
                     <Property
                           Name="boolProp"
                           Type="boolean"
                           RequiresDesignerPermission="true"
                           DefaultValue="false"
                           WebCategory="Basic app part category"
                           WebDisplayName="A property of type boolean.">
                     </Property>
                     <Property
                           Name="enumProp"
                           Type="enum"
                           RequiresDesignerPermission="true"
                           DefaultValue="1st"
                           WebCategory="Basic app part category"
                           WebDisplayName="A property of type enum.">
                           <EnumItems>
                                  <EnumItem WebDisplayName="First option" Value="1st"/>
                                  <EnumItem WebDisplayName="Second option" Value="2nd"/>
                                  <EnumItem WebDisplayName="Third option" Value="3rd"/>
                           </EnumItems>
                     </Property>
              </Properties>
       </ClientWebPart>

</Elements>
Now Deploy the solution. and go to any site page and edit page and add app webpart.
Thank You.

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Yes, there are an awesome load of action sequences, which may i point out looked pretty well done ; but there isn’t much more to it – there isn’t any story , the other characters don’t even try to make a stance, and the gaps between the action sequences are just tedious. web design agencies los angeles

    ReplyDelete