Access WCF Service with jQuery in SharePoint2010

In Create Custom WCF Service in SharePoint2010

 I described how to develop a custom WCF service. Today I’ll cover how you can invoke the SharePoint WCF Service from jQuery. In my last post I described to develop a SOAP web service but for using WCF service from jQuery I’m going to use REST web service. For the list of service types and factories supported in SharePoint you can visit the link in MSDN. You can download source code from the link given at the end of the post.

Prepare the service to call from jQuery

Consider developing a service as described in Create Custom WCF Service in SharePoint2010 with the following changes:

• For  using json I’ve used REST service factory ‘Microsoft.SharePoint.Client.Services.MultipleBaseAddressWebServiceHostFactory’ as shown below. You can use SOAP factory but you then need to parse data in different way.
  

  <%@ ServiceHost Language="C#" Debug="true"
      Service="AccessSPServiceFromJQuery.MyService, $SharePoint.Project.AssemblyFullName$"  
      CodeBehind="MyService.svc.cs"
      Factory="Microsoft.SharePoint.Client.Services.MultipleBaseAddressWebServiceHostFactory, 

  Microsoft.SharePoint.Client.ServerRuntime, Version=14.0.0.0,     Culture=neutral, 

  PublicKeyToken=71e9bce111e9429c" %>
  

• Next you need to specify the return type to json in the service interface as shown below. I’ve specified both request and response type to json in WebInvoke attribute:
  
  

  [ServiceContract]
  public interface IMyService
  {
      [OperationContract]
      [WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Bare, RequestFormat = WebMessageFormat.Json, 

  ResponseFormat = WebMessageFormat.Json)]
      List<Product> SearchProduct(string productName);
   
   
      [OperationContract]
      [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Bare, RequestFormat = WebMessageFormat.Json, 

  ResponseFormat = WebMessageFormat.Json)]    bool Save(Product product);
  }

One thing to notice here is that you can’t access the service in browser with mex endpoint. For example if you service is http://myserver/myservice.svc, then the url http://myserver/myservice.svc/mex will not work for service created with MultipleBaseAddressWebServiceHostFactory.

Call Service with jQuery

The next step is to call the service with jQuery. The url of the service to be used in jQuery will be service url and method name. For example if you service url is‘/_vti_bin/AccessSPServiceFromJQuery/MyService.svc’ and the method name you want to invoke is ‘Search’ then the full url will be ‘/_vti_bin/AccessSPServiceFromJQuery/MyService.svc/Search’. As shown in the code below, you can invoke the service Search by passing the parameter in data field of ajax call of jquery

function getProductFromService(searchText) {
    try {
        $.ajax({
            type: "GET",
            url: '/_vti_bin/AccessSPServiceFromJQuery/MyService.svc/SearchProduct',
            contentType: "application/json; charset=utf-8",
            data: { "productName": searchText },
            dataType: 'json',
            success: function (msg) {
                WCFServiceGetSucceeded(msg);
            },
            error: WCFServiceGetFailed
        });
    }
    catch (e) {

        alert('error invoking service.get()' + e);
    }
}
function WCFServiceGetSucceeded(result) {
    alert('success');
}
function WCFServiceGetFailed(error) {
    alert('Service Failed.');
}

Download and use code

I’ve uploaded the code for this post in my skydrive. You can download the code from the link below. To use the code please ensure you have internet connection as I’ve used jqery from Microsoft CDN. The search functionality get all products matching name. You can try to search just by typing a single character. You can debug and test the code. In save I’ve just shown you can pass value from browser to service using POST method.

Create Custom WCF Service in SharePoint2010

In SharePoint 2007, creating a custom Web Service was not so easy. However, asp.net web services are obsolete in SharePoint 2010. Rather new and recommended approach is to develop WCF Service. So the question comes up, “How much difficult it is to create a custom WCF service in SharePoint 2010?”. I’m going to answer the question just right in this blog.

Install CKS development tools edition

For showing how easily you can develop your own Custom WCF Service in SharePoint 2010, I’m going to use a open source Visual Studio 2010 extension know asCommunity Kit for SharePoint: Development Tools Edition. This tool will make the WCF service development much easier. It’ll automate tasks that you would have to do manually. There are two version of the extensions: One for SharePoint Foundation and another one is for SharePoint Server. Download the appropriate version and install.

Create WCF Service

Once you installed the CKSDev Visual Studio extension, you can open a SharePoint Project. In the SharePoint Project, right click on the project and try to add a new item. In the “Add New Item” dialog, you will find some new items added by CKSDev Visual Studio extension. Please select the option “WCF Service (CKSDev)” for new item as shown below:

Figure 1: ‘Add New WCF Service’ option ‘add new item’ dialog

Once you add the WCF Service, two files will be added by the dialog. One is the service interface and another is the Service itself.

Modify Service Types

As defined in MSDN, there are three different service types. Most of the time you need SOAP service. But if you need REST or ADO.NET Data service you can modify the service types by modifying the service factory as sown in the figure 2. The following table shows the three service types and their service factory name.

Service Type	Service Factory	Description
SOAP service	MultipleBaseAddressBasicHttpBindingServiceHostFactory	Basic HTTP binding must be used, which creates endpoints for a service based on the basic HTTP binding.
REST Service	MultipleBaseAddressWebServiceHostFactory	The service factory creates endpoints with Web bindings.
ADO.NET Data Service	MultipleBaseAddressDataServiceHostFactory	A data service host factory can be used.

When you create service with CKSDev tool, the default service generated is SOAP service. If you want to change the service type, please modify the factory in .svc file as shown below:

Figure 2: Service Factory defined in SVC file.

Deploy the Service

Once you are done with the service development, you are ready to deploy. But where you want to deploy the service? By default SharePoint service are kept in ISAPIdirectory. However, CKSDev deploy the service in ISAPI\ProjectNameSpace path as shown below:

Figure 3: Service deployment location

Once you define the service deployment location as shown in the figure 3, you can deploy the solution.

Access the Custom WCF Service

After Service deploy, you need to use the service in another projects. First try to access the service in browser. But remember you need to access the MEX endpoint either you will not get the service accessible in browser. To access the MEX endpoint, you should add “/MEX” at the end of the service name as shown below:

Figure 4: Access WCF Service MEX endpoint.

Finally try to add the service reference in a project using Visual Studio’s ‘Add Service Reference’ dialog as shown below:

Figure 5: Add Service Reference

Conclusion

So the steps described in this post are pretty simple:

• Make sure you have downloaded and installed CKSDev Visual Studio extension.
• Create a WCF Service (CKSDev) in the project. And if necessary, modify the service type
• Deploy the solution and if necessary, change the deployment path.
• Access the service MEX endpoint.

Get Full or Relative Url of web using EcmaScript in SharePoint2010

Sometimes from client side, you need to know the current web url. And for this little information you don’t want to call EcmaScript’s load function to get information from server side. Actually the information can be found without any server call. You can access the information from ClientContext as shown below.

var context = new SP.ClientContext();
var relativeWebUrl = context.get_url();

Remember the get_url method will only return relative url of the site. As shown in the following table:

Site Collection Url	Site Url	context.get_url() response
http://moss2010.com	http://moss2010.com	/
http://moss2010.com	http://moss2010.com/site1	/site1
http://moss2010.com/sites	http://moss2010.com/sites/site1	/sites/site

So if you need to know the full url of the site you can do so easily with the following script:

function getFullWebUrl() {
    var context = new SP.ClientContext();
    var relativeWebUrl = context.get_url();
    var fullWebUrl = window.location.protocol + '//' + window.location.host + relativeWebUrl ;
    alert(fullWebUrl);
}

Configure Kerberos Authentication in SharePoint 2010

SharePoint 2010 supports two authentication mode: Classic mode and Claims based. Today I’m going to explain how to configure Kerberos authentication for an web application with classic mode Authentication. I’ll try to explain how to configure Kerberos for an web application with Claims based authentication later.

Step 1:  Create/Configure Web Application

In this step you need to create an web application with required configurations. However, you can convert an existing web application to use Kerberos authentication if the web application app pool user is a domain user. But as mentioned already, the configuration explained in this post applies for an web application with Classic Mode Authentication.

Create a new web application

In creating new web application for using Kerberos Authentication you need to consider the following options:

• Use classic mode Authentication as shown below (You can use Claims Based Authentication but then the steps described in this post might not work. For Claims Based Authentication you need different sets of configuration):
  
  
  Figure 1: Create site with ‘Classic Mode Authentication’
  
• Use Negotiate (Kerberos) as Authentication Provider in ‘Create Web Application’ page as shown below:
  
  
  Figure 2: Create site with Negotiate (Kerberos) Authentication provider selected. 
• Use domain username for app-pool account. Don’t use Predefined (like Network Service, Local System etc) user account. This is important to use domain user name as you will configure Kerberos against this app-pool username.
  
  
  Figure 3: User domain user name for App-pool account.
  
• One recommendation. Make the site url to be Fully Qualified Domain Name. For example, my server name was sohel-server and domain name was sohel.com. I’ve modified my full site name from default http://sohel-server:5000 to http://sohel-server.sohel.com:5000. This will help you identifying if the Only Kerberos is used for authentication instead of NTLM. 

Configure an existing web application

If you have an existing web application that you want to move to Kerberos from NTLM you need to make sure your site meets the following criterion:

• The web application uses a domain user in application pool account instead of predefined account like Network Service, Local System. If your web application doesn’t use domain user then you can create a new web application with domain user name as application pool account. Changing the application pool account might make your web application malfunctioning.
• If you existing web application uses Classic Mode Authentication then configuration in this post should work. However, if you are using Claims based Authentication then you need to configure Security Token Service (STS) which in not mentioned in this post. If you are using Classic Mode, then you can continue this post as this post describes Kerberos for an web application with Classic Mode Authentication.

If you meet the above mentioned criterion, then you can change the authentication of the site to Kerberos. To change the Authentication Provider to Kerberos, navigate to Central Admin site then click “Application Management” => Manage Web Applications => Select your web application => Click Authentication Provider from ribbon button as shown below:

Figure 4: Change Authentication Provider 

In the Authentication provider windows click on the zone you want to configure the Kerberos Authentication. Then you will be shown ‘Edit Authentication’ window. If your web application is using NTLM you can change the Authentication to Kerberos as shown below:

Figure 5: Change NTLM to Kerberos 

When you change the authentication type from NTLM to Kerberos you will be prompted with message saying “” as shown below. You don’t need to worry, we’ll configure other settings to use Kerberos. So just click ok button when the message appears and then save the settings.

Figure 6: Warning appears during Authentication changes from NTLM to Kerberos

Step 2: Configure Service Principal Name (SPN) in Active Directory

So your web application is configured for Kerberos Authentication but you need to configure Service Principal Name (SPN). Simply SPN is an unique identifier for each service (HTTP, SQL, AD etc) running in the server. An SPN is a combination of service name, host name and port name. The original format for SPN is

<Service Name>/<DNS Host>:Port

To know more about SPN, you can follow the link: http://technet.microsoft.com/en-us/library/cc961723.aspx. For our web application we need to create SPN. The SPN format for our web application is as shown below:

• HTTP/<DNS Host Name>:Port
• HTTP/<DNS FQDN>:Port

In my case the SPN are:

• HTTP/sohel-server:5000
• HTTP/sohel-server.sohel.com/5000

However, if you are using any port other than 80, you need to add four SPNs (two for 80 port and two for your non-80 web application port). Whether you use Kerberos for 80 port, you need to add SPNs for default port. So though I’m configuring Kerberos for HTTP port 5000, I need to configure Kerberos for 80 port also. The following SPNs are need to configured for my example.

• HTTP/sohel-server
• HTTP/sohel-server.sohel.com
• HTTP/sohel-server:5000
• HTTP/sohel-server.sohel.com:5000

How to set SPN?

1. Make sure you installed ‘Active Directory Lightweight Directory Services’ from Server Role to get the ADSI Edit UI for editing SPN values. You can add the  ‘Active Directory Lightweight Directory Services’ from Server Manager => Add Roles  as shown below:
   
   
   Figure 7: Install ‘Active Directory Lightweight Directory Services’ from ‘Add Server Role’
   
2. To setup SPN, Run the command “adsiedit.msc” in either command prompt or from Run. You will get the ADSI Edit window.
3. In ADSI Edit window, expand the ‘Default naming context’ and expand CN=Users and find the user you used for application pool in web application.
4. Right click on the user entry CN=UserName and select properties window. Then find the property ‘servicePrincipalName’ and click edit as shown below:
   
   
   Figure 8: Set SPN through servicePrincipalName
   
5. Finally add the SPNs in the edit window as shown below:
   
   
   Figure 9: Add SPN values as value of attribute ‘servicePrincipalName’.
   
6. Press OK and then apply to close the dialog.

 

Step 3: Enable delegation

In some cases you may need to enable delegation of credentials. To enable delegation, open the Active Directory users and Computers from ‘Administrative Tools’ menu. Find the user used in Application pool under ‘Users’ node. Right click on the user and click Properties to get the properties window. Then in the properties window go to ‘Delegation’ tab and select ‘Trust this user for…’ as shown below: 

Figure 10: Enable delegation

 

Step 4: Configure Internet Explorer

Finally you need to configure Internet Explorer (IE) to use current windows user to access the SharePoint site.

1. Go to Tool => Internet Options. Then select ‘Local Intranet’ and click Sites as shown below:
   
   
   Figure 11: Setup IE for adding the SharePoint site to local Intranet
   
2. After ‘Local Intranet’ dialog select ‘Advanced’ and then you’ll find the way to add sites to local intranet. Add ‘*.yourdomain’ in the local intranet zone as shown below:
   
   Figure 12: Adding my domain (sohel.com) to local intranet.
   
3. Now close the Internet Options dialog. Then open the ‘Internet Options’ dialog from Tools => Internet Options. Then go to Security tab and select ‘Local Intranet’ and select ‘Custom Level’. Then At the end of the ‘Security settings’ window, select ‘Automatic login only in Intranet zone’ as shown below:
   
   Figure 13: Enable automatic login for Intranet zone

Conclusion

Configuring Kerberos authentication may depends on many factors. So I can’t guarantee than each and every steps described here will work for everybody. But the overall sets of configurations are same. You need to configure SharePoint site, You need to configure SPN, You need to enable delegation (if required), you n need to configure Internet Explorer.  You can get elaborate description of configuring Kerberos Authentication with SharePoint 2010 from the link:http://www.microsoft.com/download/en/details.aspx?id=23176.

How to Iterate through All the webs in the site of SharePoint

Sometimes we need to process all webs in a site collection, as you want to do some quick fixes in the web. Few weeks back my manager asked me to do some fixes in the list items exists in all the webs in the site collection. There were about 30,000 webs in the site collection and I was looking for some kind of script that will be efficient. The usual way of looping through all webs might be using some recursive way, as shown below.

//Starting point
public void ProcessAllWeb(SPSite site)
{
    using (var web = site.RootWeb)
    {
        ProcessWebRecursive(web);
    }

}

//Recursive method
private static void ProcessWebRecursive(SPWeb web)
{
    //do some processing
    //web.Lists["listName"].ItemCount

    foreach (SPWeb subWeb in web.Webs)
    {
        using (subWeb)
        {
            ProcessWebRecursive(subWeb);            
        }
    }

}

Code Snippet 1: Recursive way of processing all webs in the site collection (Not optimized)

In the recursive way of processing all webs, there will be more than one SPWeb instance alive in memory. In the above code snippet, when the method ProcessAllWeb is invoked it’ll call the recursive method ProcessWebRecursive. The recursive method will keep calling the subwebs while keeping the parent web alive.

While I was writing the code, I was wonder if there’s any way of processing only one web non-recursively. So my intention was to open only one web in memory at once. And then I found it. You can get all web Url(including all subwebs at all level) using SPSite.AllWebs.Names. The following code snippet shows the efficient way of processing all webs in the site collection:

public void ProcessAllWeb(SPSite site)
{
    string[] allWebUrls = site.AllWebs.Names;
    foreach (string webUrl in allWebUrls)
    {
        using (SPWeb web = site.OpenWeb(webUrl))
        {
            //process web
        }
    }
}

Code Snippet 2: Process all webs one by one (Optimized for large number of webs)

Using the code snippet shown in figure 2, you just open one web at a time in memory for processing. The trick here is ‘SPSite.AllWebs.Names’ which will return all the (I mean it!) subwebs (including children and their children and so on) as a result. If you have thousands of webs under a site collection (and if it’s production), you should care about performance issue.

Custom add/edit/display form for list in SharePoint

Sometimes we don’t want to use SharePoint’s custom add/edit/display form. We want our own custom form when user will try to view, edit or add an item. I’ll show you today how easily we can do so.

For this post I’ll consider I’ll have a list with three fields: Product Code, ProductName and ProductDescription. I’ll show how we can create a list with these two fields with custom add/edit/display form. The list’s fields are described in the table below:

Field name	Field Type	Comments
Product Code	Text	Title field will be used instead of creating a new one
Produce Name	Text
Product Description	Text

Table 1: Custom list template/Content Type’s fields

The first step of this approach is to create a content type with required fields associated with the content type. The noticeable point here is that In the content type declaration, we can define custom forms for add/edit/display.

Step 1: Create a content type for your list

To create content type right click on your project and click ‘add new item’ and then select content type as shown below:

Figure 1: Add content type

Next you will be prompted for the base content type as shown below: If you want to create a custom list, you can select Item as shown below:

Figure 2: ‘Item’ is the base content type for custom/generic list

Then you will have provided the content xml file. You need to modify the content type xml file as shown below. Please modify the Inherits=”False” from the content types.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <!--Defined fields-->
  <Field ID="{30C3D21A-A7C9-410E-A896-82875475F697}" Name="ProductName"
         DisplayName="Product Name" Type="Text" Required="FALSE" >
  </Field>
  <Field ID="{9621763e-3494-4a86-a3eb-fd2593f1a1f1}" Name="ProductDescription"
         DisplayName="Product Description" Type="Text" >
  </Field>
  <!-- Parent ContentType: Item (0x01) -->
  <ContentType ID="0x0100c5e54b7f62ad451a92f9235d43ec9082"
               Name="ProductContentType"
               Group="Custom Content Types"
               Description="My Content Type"
               Inherits="false"
               Version="0">
    <FieldRefs>
      <FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Name="Title" 
                DisplayName="Product Code" Sealed="TRUE"/>
      <FieldRef ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" Name="LinkTitle" 
                DisplayName="Product Code" Sealed="TRUE"/>
      <FieldRef ID="{BC91A437-52E7-49E1-8C4E-4698904B2B6D}" Name="LinkTitleNoMenu" 
                DisplayName="Product Code" Sealed="TRUE" />
      <FieldRef ID="{30C3D21A-A7C9-410E-A896-82875475F697}" Name="ProductName" 
                DisplayName="Product Name" Required="False" />
      <FieldRef ID="{9621763e-3494-4a86-a3eb-fd2593f1a1f1}" Name="ProductDescription" 
                DisplayName="Product Description" Required="False" />
    </FieldRefs>
    <XmlDocuments>
      <XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms/url">
        <FormUrls xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms/url">
          <Display>_layouts/blogtest/Product.aspx?mode=display</Display>
          <Edit>_layouts/blogtest/Product.aspx?mode=edit</Edit>
          <New >_layouts/blogtest/Product.aspx?mode=new</New>
        </FormUrls>
      </XmlDocument>
    </XmlDocuments>
  </ContentType>
</Elements>

Figure 3: Content Type xml file with fields and add/edit/display form declared

Now let’s explain what’s in the xml shown in figure 3.

• Firstly I’ve modified Inherits to false in ConentType tag.
• I’ve defined two fields inside the <Elements> tag that I’ve used later in content types
• Then used those fields in <FieldRefs> of <ContentType> tags. These fields will be available in Content type. I’ve also used three existing fields (for Title) from base Content Type (Item).
• Finally I’ve defined New, Edit and Display form for these content types in <XmlDocuments> section.

Step 2: Create a list Template based on Content type

Now you have defined content types with three fields. Next step is to define a list template based on the content type. To do so click add new item from visual studio context menu and select “List Definition From Content Type” as shown below:

Figure 4: Create list definition from content type in ‘Create new Item’ dialog.

Next you will be prompted for available  content types in the project as shown below. Remember to uncheck the button ‘Add a list instance for this list definition’ for this demo now.

Figure 5: Create list definition from Content Type

Now you will find two files Elements.xml and Schema.xml files are added. Our full focus will be now on Schema.xml.

Modify the content in <Fields> tag:

Ensure Title fields with display name ‘product code’ exists as shown below:

<Field ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Name="Title" DisplayName="Product Code" Sealed="TRUE" Type="Text" />

Figure 6: Add title field in the list template (if not exists)

Then find two fields LinkTitle and LinkTitleNoMenu. Then change their display name to ‘Product Code’ as shown below. These two fields are link to edit menu.

Figure 7: Rename the displayName for linkTitle and LinkTitleNoMenu field

Modify the content in <Views> tag

Open the views tag and add the fields you want to display in default view under <View> with Default value is true as shown below.

Figure 8: Define the fields to be shown in default view

 

 

Step 3: Create Custom add/edit/display form

Next step is to develop a custom application page to use for add/edit/display. As sown in figure 3, you can three different pages for add, edit and view. However for brevity I want to use a single page for all these three operations. You need to create an application page in appropriate location (in my case this is _layouts/blogtest folder). Rather than using three different files for add/edit/display, you can use a single page for all these three tasks as shown below:

<XmlDocuments>
  <XmlDocument NamespaceURI="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms/url">
    <FormUrls xmlns="http://schemas.microsoft.com/sharepoint/v3/contenttype/forms/url">
      <Display>_layouts/blogtest/Product.aspx?mode=display</Display>
      <Edit>_layouts/blogtest/Product.aspx?mode=edit</Edit>
      <New >_layouts/blogtest/Product.aspx?mode=new</New>
    </FormUrls>
  </XmlDocument>
</XmlDocuments>

By passing different parameter to a single page we can identity the page’s mode (add, edit or view). Also SharePoint by default add the list and item id at the end of the page. So your page’s url will look like for new item:

_layouts/blogtest/Product.aspx?mode=new&List=LISTGUID&ID=ITEMID

So from the page (Product.aspx) you can identity the list id and item id from querystring.

I’m not showing details of the product.aspx page here.

You can download the full source code from this skydrive link.

How to use the project attached with this post?

1. Download the code from here.
2. Deploy the solution to a SharePoint site.
3. Create a new list with “ProductListDefinition” template. This template will be installed in the site as you deploy the SharePoint solution.
4. Now try to add/edit/view items in the list. You will find the custom form product.aspx is used for add/edit/view.

SharePoint 2013: App Concept

SharePoint 2013 has added a bunch of new concepts for apps. You can think of a SharePoint app just like iPhone app or Android app for time being. If you have not already setup the on-premises development environment for SharePoint 2013 apps development, please follow the link Set up an on-premises development environment for apps for SharePoint to setup your development environment.

Install/Host an App

You can install the app in a SharePoint web (called host web for the app). When you install an app in the SharePoint web (called host site), the app needs a place to exist  where app’s css, javascripts, pages etc will be placed. The app resources (like pages, css, javascript etc) are not stored/kept inside host web. Where the app’s resources are stored/kept basically depends on app’s hosting type. The app can be hosted in any of the followings:

• inside SharePoint (called SharePoint hosted)
• You can host app in Cloud. You have two options for cloud-hosting apps
  • Windows Azure (called AutoHosted)
  • Third-party solution providers can provide setup for apps (called Provider-hosted)

You can get more details on this hosting options at MSD link.

The app can add some links/actions (like ribbon, ECB menu etc) in the host web. But the app itself doesn’t live inside host site.  When you use SharePoint hosted option for an app and as soon as you install the app in a host web another web (usually subsite to host site) is created (called app web) for the app components to be installed. The relation to host and app web for SharePoint hosted app, is shown below:

Figure 1: SharePoint hosted Apps are usually installed under subsite of Host web

For other options (like provider hosted and windows azure hosted app), app web is optional and the actual app web resources are stored in windows azure or third party servers.

Though app webs are installed under subsite of host web usually, for SharePoint hosted app, it doesn’t mean you can access the app web directly with url. Rather the apps are only accessible from different url. The App web is accessible from different url (not like host-web url). This is to keep the app webs isolated from host web. Usually these two types of webs urls (host and app web) belongs to two different domains. You can find more details on this host web url and app web url from this MSDN link.

 

App Types (From users’ points of view)

Now question comes what types of apps we can develop and how they will look like from user’s point of view. You can do the following types of things with apps:

UI Custom Actions

An app can add links like ribbon, custom actions or ECB menu to the host web. When user will click on the link, user will be redirected to the app web. Let’s consider a scenario which will explain this UI custom actions in details:

1. You installed an app (let’s call it SharePoint PDF Converter) in a SharePoint site http://mysite.mydomain.com/businessdocs (called host web). The app will add a ribbon button in the site to convert any word document to pdf. When you will install  the app ‘SharePoint PDF Converter’, a subsite will be created under host web (http://mysite.mydomain.com/businessdocs) and the app contents (like javascript, css, aspx pages etc) will be deployed in the subsite. As mentioned already app webs are not accessible by url (like http://mysite.mydomain.com/businessdocs/appwebname) directly, rather they have different url for isolation. The idea of adding ribbon button in host web shown below: Figure 2: An app can add ribbon to the host web. 
2. Now what will happen on user will click the ribbon button? Usually user will be redirected to the app web and app developers have the option to pass the current selected item details (like id, url etc) to the app web. The concept of redirecting from host web to app web and having the app web taking control of the full browser page is called ‘Immersive Full Page’ user experience.

You can get more details on custom action app types on MSDN link Create custom actions to deploy with apps for SharePoint.

 

App Part

Apps can also add web-part like stuffs in the host web called Part (or app part). You can think of an ‘app part’ as like web part but it’s provided by app web. You can think of it as just like web part but instead of Farm WSP solution this app part comes from app deployment to your host web. You can find more details on this app part on MSDN link Create app parts to deploy with apps for SharePoint. The following image shows an app part that is available to be added in the host site:

Figure 3: Add an app-part (just like adding webpart)

Once you add the app-part the page will look like below which kind of resembles the webpart concept:

Figure 4: App part added to the page

 

Immersive Full Page

All apps have a default page which might take the full page. Apps show custom action or app part in the host web. The app might take the full page by redirecting user from host web url to app web. For example, the host web url is http://www.hostweb.com and an app is installed in the host web which adds a custom action. When user clicks the custom action, the user will be navigated to a new url (say, http://www.appweb.com). So the app takes the full page (so it’s called Immersive Full page). However user will not notice the url changes as the new app site will have the same UI look and feel. The idea of having the app web to have similar look and feel like host web is achieve thorough a new concept in SharePoint 2013 – called Chrome Control. Basically Chrome control is kind of adding few components (js,div element etc) in App web so that when user redirect from host web to app web, the chrome control retrieves css, js from host web and apply it in the app web on the fly. Also the chrome control create a SharePoint 2013 ribbon bar in the app site, so that user can navigate back to the hot web.You can get clear idea of chrome control watching this video.

How to set PeopleEditor value using javascript in SharePoint

While developing SharePoint application, you may want to use PeopleEditor control or your own custom control derived from EntityEditorWithPicker. If you come across the problem with setting its value using Javascript, below is the code sample that may help.

<script type="text/javascript">

function SetPickerValue(pickerid, key, dispval)
{
    var xml = '<Entities Append="False" Error="" Separator=";" MaxHeight="3">';
    xml = xml + PreparePickerEntityXml(key, dispval);
    xml = xml + '</Entities>';

    EntityEditorCallback(xml, pickerid, true);
}

function PreparePickerEntityXml(key, dispval)
{
    return '<Entity Key="' + key + '" DisplayText="' + dispval + '" IsResolved="True" Description="' + key + '"><MultipleMatches /></Entity>';
}

</script>

The easiest way to set PeopleEditor’s value is to use the EntityEditorCallbak function. This function is provided with built-in SharePoint javascript functions (both WSS 3.0 and MOSS 2007). It is the same function that is used by the control to set its own value. The first two parameters of the function are important – the first one is XML containing entities definition and the second one is a client identifier of the control which value should be set. (The client identifier is the same which is available in the ClientID property on the server side).
The above code sample presents the SetPickerValue function. The function covers XML generation from a given key and display text, and calling of EntityEditorCallback function.

Example of SetPickerValue call:

SetPickerValue('ctl00_PlaceHolderMain_pplEdit', 'domain\\m.kapusta','Marcin Kapusta');

Generated XML (for the given call) is the following:

<Entities Append="False" Error="" Separator=";" MaxHeight="3">
  <Entity Key="domain\m.kapusta" DisplayText="Marcin Kapusta" IsResolved="True" Description="domain\m.kapusta">
    <MultipleMatches />
  </Entity>
</Entities>

Be careful when providing domain account name. Javascript treats \ (backslash) character as a special character. If you want to have it in the string, you have to use \\ instead. That’s why I had to provide ‘domain\\m.kapusta’ as a parameter to get domain\m.kapusta value in the XML.

If you want to set PeopleEditor value to have multiple entities, you can modify SetPickerValue function to generate multiple <Entity />nodes in the XML.

You can set IsResolved attribute to False to have unresolved entity in the control. When the entity is unresolved you are able to provide some suggestions (accessible in the popup menu) adding child nodes to the <MultipleMatches /> node. I don’t want to go into details about the multiple matches as it is the topic for another post.