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.

7 comments:

  1. Regards for this marvellous post, I am glad I detected this web site on yahoo. web design new york

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. 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
  4. Hello my loved one! I wish to say that this post is awesome, nice written and include almost all significant infos. I would like to peer extra posts like this. design firms los angeles

    ReplyDelete
  5. I simply must tell you that you have written an excellent and unique article that I really enjoyed reading. I’m fascinated by how well you laid out your material and presented your views. Thank you. web design agency

    ReplyDelete
  6. Much obliged to you for some other educational web journal. Where else might I be able to get that kind of data written in such a perfect means? I have a mission that I'm a few seconds ago chipping away at, and I have been at the post for such data. How to remove negative content online

    ReplyDelete