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

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