Steps to Create Apps in SharePoint 2013 and Understanding of Apps

Understanding about ‘Apps’ for office and SharePoint?

Apps for Office and SharePoint are based on a new application model which shares a common approach for extending Office and SharePoint. It brings the value of apps we know on devices to the productivity applications you use on a daily basis.

This new apps model is built on web technologies like HTML, CSS, JavaScript, REST, OData, and OAuth. If you’re a web developer, you can user your existing skills to build apps and take advantage of familiar tools, languages, and hosting services. You can deploy, update and maintain your apps faster in the cloud and finally publish and sell your apps on the Office Store, or distribute IT-approved apps within your organizations by using a corporate App catalog.

Apps for Office 2013

clip_image002

Apps for SharePoint 2013

clip_image004

Steps to Create Apps in SharePoint 2013

  1. Go to New VS and Create New Project
  2. Select below teplate for creating application,Image
  3. Choose Finish in the wizard. A lot of configuration is done when the solution opens. The following are some of the most important.
    • Two projects are created in the Visual Studio 2012 solution, one for the app for SharePoint and the other for the ASP.NET web application.
    • The Web Project property of the app for SharePoint project is set to the name of the web application project.
    • The values in the AppManifest.xml file are set appropriately for an autohosted app. The Start Page URL is set by default to ~remoteAppUrl/Default.aspx. The string ~remoteAppUrl is a token that resolves to the URL of the Windows Azure Web Site when your app is installed. (The manifest designer in Visual Studio 2012 may partially resolve the token rather than show it. To see the actual value of the StartPage element, open the shortcut menu for the AppManifest.xml file and choose View Code.) The Query String value is set to{StandardTokens}. This is also a token that resolves to a longer query string that includes an identification of the URL of the SharePoint website to which the remote web application communicates. Because neither the host web nor the app web URL is known until the app is installed, you need to use a token as the value of the query string.
      • The Target Framework of the web application is set to Microsoft ASP.NET 4.0 (not Microsoft ASP.NET 4.5).
      • The SSL Enabled property of the web application is set to True.
      • References are added to the web application project for the SharePoint client object model assemblies as well as assemblies for the Microsoft identity model infrastructure.
      • A source file named TokenHelper.cs or TokenHelper.vb is added to the web application project
  4. Open the AppManifest.xml file in the manifest designer. The Title element has the project name as its default value. Replace it with something more friendly because this is the name of the app that users see in the UI.
  5. Specify a Name for the app. This is an internal name that must contain only ASCII characters and must contain no spaces; for example, SimpleAutohostedSPApp.
  6. If the value of Query String was not set to {StandardTokens} when the project was created, give it that value now.
  7. Open the Web.config file and add the element <customErrors mode=”Off”/> to the system.web element.

To Code, Test and Debug the Project

  1. Open the AppManifest.xml file in the manifest designer and add a Permission Request for each permission to SharePoint that the web application is going to need. In the continuing example, the app is given Read access to all the lists on the host website with these steps.
    1. In the Scope cell, choose Web from the drop down list.
    2. In the Permission cell, choose Read from the drop down list.
    3. Save the file. For more information on the possible values for the Scope and Permission values, see App permissions in SharePoint 2013
  2. Develop the web application as you would any other ASP.NET web application: Add markup to the Default.aspx page, add code-behind as needed, add JavaScript as needed, add other files as needed, and so on. For the continuing example in this article, take the following steps.
    1. Open the Default.aspx file and replace the contents of the body element with the following markup and save the file.
      NoteNote
      Your version of Visual Studio 2012 may have named this file “Home.aspx.” If so, either use the shortcut menu to rename it, or in the remainder of this article replace “Default” with “Home.”
      <body bgcolor="#000000">
          <form id="form1" runat="server">
          <div>
          <h2 style="font-family: Segoe UI; font-size: xx-large; font-weight: 100; font-style:normal; 
              color: White">composed looks on the SharePoint host website</h2>
          </div>
          <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" 
              Text="GET THE COMPOSED LOOKS" BackColor="#00FFFF" ForeColor="Black" Font-Size="Large" 
              Style="font-family: 'Segoe UI'; border-style: none; text-wrap: normal; font-weight: normal" 
              Height="210px" Width="239px" />
          <asp:Literal ID="Literal1" runat="server"><br /><br /></asp:Literal>
          <asp:GridView ID="GridView1" runat="server" BackColor="#808080" ForeColor="White"
              BorderColor="#0033CC" BorderStyle="None" Caption="THE COMPOSED LOOKS" 
              CaptionAlign="Left" CellPadding="5" Style="font-family: 'Segoe UI'" GridLines="None" 
              HorizontalAlign="Left">
              <AlternatingRowStyle BackColor="White" ForeColor="Black" />
          </asp:GridView>
          </form>
      </body>
    2. Open the Default.aspx.cs file and add the following using statements to it.
      using Microsoft.SharePoint.Client;
      using Microsoft.IdentityModel.S2S.Tokens;
      using System.Net;
      using System.IO;
      using System.Xml;
      using System.Data;
      using System.Xml.Linq;
      using System.Xml.XPath;
      using Microsoft.SharePoint.Samples;
      NoteNote
      You do not need the last of these if your edition of Visual Studio 2012 uses the same namespace in the TokenHelper.cs file that it creates as is used in Default.aspx.cs.
    3. Add the following fields to the Default class.
      SharePointContextToken contextToken;
      string accessToken;
      Uri sharepointUrl;
    4. Replace the Page_Load method with the following code that uses the TokenHelper class to obtain tokens from the OAuth-compliant secure token server. During development, this is the token server of your development environment. After your app is converted to an autohosted app and installed, the token server is supplied by the Windows Azure Web Site hosting environment. The access token is stored in the CommandArgument property of the button for later retrieval by the button’s click event handler.
      protected void Page_Load(object sender, EventArgs e)
      {
          TokenHelper.TrustAllCertificates();
          string contextTokenString = TokenHelper.GetContextTokenFromRequest(Request);
      
          if (contextTokenString != null)
          {
              // Get context token
              contextToken = TokenHelper.ReadAndValidateContextToken(contextTokenString, Request.Url.Authority);
      
              // Get access token
              sharepointUrl = new Uri(Request.QueryString["SPHostUrl"]);
              accessToken = TokenHelper.GetAccessToken(contextToken, sharepointUrl.Authority).AccessToken;
      
              // Pass the access token to the button event handler.
              Button1.CommandArgument = accessToken;
          }
      }
    5. Add the following event handler to the Default class. Note the following about this code.
      • It uses the SharePoint 2013 REST/OData endpoints to obtain list data. In this example, the code reads theComposed Looks list that is on every SharePoint 2013 website and already has items in it. The APIs for this service make it easy, in a single line of code, to select a list and specify three fields from the list to return. For more information about the REST/OData endpoints, see Programming using the SharePoint 2013 REST service.
      • It uses the classes of the System.Xml.Linq namespace to parse the data that is returned and construct aList<T> object that can be bound to the grid control on the page.
      protected void Button1_Click(object sender, EventArgs e)
      {
          string accessToken = ((Button)sender).CommandArgument;
      
          if (IsPostBack)
          {
              sharepointUrl = new Uri(Request.QueryString["SPHostUrl"]);
          }
      
          // REST/OData section.
          string oDataUrl = "/_api/Web/lists/getbytitle('Composed Looks')/items?$select=Title,AuthorId,Name";
      
          HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(sharepointUrl.ToString() + oDataUrl);
          request.Method = "GET";
          request.Accept = "application/atom+xml";
          request.ContentType = "application/atom+xml;type=entry";
          request.Headers.Add("Authorization", "Bearer " + accessToken);
          HttpWebResponse response = (HttpWebResponse)request.GetResponse();
      
          // Response markup parsing section.
          XDocument oDataXML = XDocument.Load(response.GetResponseStream(), LoadOptions.None);
          XNamespace atom = "http://www.w3.org/2005/Atom";
          XNamespace d = "http://schemas.microsoft.com/ado/2007/08/dataservices";
          XNamespace m = "http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"; 
      
          List<XElement> entries = oDataXML.Descendants(atom + "entry")
                                   .Elements(atom + "content")
                                   .Elements(m + "properties")
                                   .ToList();
      
          var entryFieldValues = from entry in entries
                                 select new { Title=entry.Element(d + "Title").Value, 
                                              AuthorId=entry.Element(d + "AuthorId").Value, 
                                              Name=entry.Element(d + "Name").Value };
      
          // Bind data to the grid on the page.
          GridView1.DataSource = entryFieldValues;
          GridView1.DataBind();
      }
  3. To test the app for SharePoint and its remote web application, choose the F5 key in Visual Studio 2012. The web application is deployed to IIS Express at localhost. The app for SharePoint is installed to the target SharePoint website. The first time that you use F5, you are prompted by SharePoint to grant the permissions that the app for SharePoint requests. The Site Contents page of your target SharePoint website opens, and you see the new app listed there.
  4. Choose the app for SharePoint, and the remote web application opens to the page you specified for the Start Page in the AppManifest.xml file. Use the web application as needed to verify that it is working. In the continuing example of this topic there is a single button to choose. Doing so creates a grid and populates it with the Composed Looks list of the host web. Only three fields from the list are used.When the components are working correctly, you need to make changes to the two projects to configure the app and its remote web application to be an autohosted app. See the next section.

To Configure the App To be autohosted

  1. In Solution Explorer, open the References node of the web application. For each of the following assemblies, highlight the assembly and set the Copy Local property to True, if it was not already set to True by Microsoft Visual Studio 2012. This ensures that all five assemblies will be installed on the virtual machine that hosts the web application in a Windows Azure Web Site.
    • Microsoft.SharePoint.Client.dll
    • Microsoft.SharePoint.Client.Runtime.dll
    • Microsoft.IdentityModel.dll
    • System.IdentityModel.dll
    • Microsoft.IdentityModel.Extensions.dll
  2. In Solution Explorer open the shortcut menu of the app for SharePoint project and choose Publish.
  3. In the Publish dialog box, choose Publish. The resulting app package file (which has the Windows Azure Web Site package inside) has an .app extension and is saved in the app.publish subfolder of either the bin\Debug orbin\Release folder of your Microsoft Visual Studio 2012 project.

Install the autohosted app


The app for SharePoint can now be uploaded to the app catalog of a SharePoint Online tenancy. For further debugging, you can deploy the app directly from Visual Studio 2012 to a SharePoint Online website, if it was created with the Developer Sitesite definition. To do this, open the shortcut menu of the app project in Solution Explorer and choose Deploy. Tenant administrators can install the app on their SharePoint Online tenancy by using the following procedure.

To install the autohosted app

  1. Log in to Microsoft SharePoint Online as a tenant administrator.
  2. On the Admin drop-down menu at the top of the page, choose SharePoint.
  3. On the SharePoint Administration Center page, choose apps, Corporate Catalog.
  4. On the App Catalog page, choose the upload link, browse to your app for SharePoint package on the Add a documentform, and choose OK. An item property form opens.
  5. Fill out the form as needed and choose Save. The app for SharePoint is saved in the catalog.
  6. Navigate to any website in the tenancy and choose Site Contents to open the Site Contents page.
  7. Choose Add an App, and on the Add an App page, find the app. If there are too many to scroll through, you can enter any part of the app title (that you entered for Title in the AppManifest.xml file) into the search box.
  8. When you find the app, choose the Details link beneath it, and then on the app details page that opens, choose Add It.
  9. You are prompted grant it permissions. Choose Trust It in the dialog box.
  10. The Site Contents page opens, and the app is listed. For a short time a message below the title indicates that it is being added. When this message disappears, you can choose the app title to launch the app. (You may need to refresh the page before the message disappears.) In the continuing example of this article, because the Start Page was set to the URL of the remote web application’s Default.aspx page, that page opens.
Advertisements

Cross-site publishing in SharePoint 2013

Cross-site publishing

Cross-site publishing lets you store and maintain content in one or more authoring site collections, and display this content in one or more publishing site collections. When you change the content in an authoring site collection, those changes are displayed on all site collections that are reusing this content.

Cross-site publishing uses search technology to retrieve content. On a site collection where the Cross-Site Collection Publishing feature is enabled, libraries and lists have to be enabled as catalogs before the content can be reused in other site collections. The content of the library or list catalogs must be crawled and added to the search index. The content can then be displayed in a publishing site collection by using one or more Content Search Web Parts. The following illustration shows how content is stored in libraries and lists in an authoring site collection, and then reused across three separate publishing site collections by using Content Search Web Parts.

Cross-site publishing

Catalog-enabled libraries and lists

SharePoint Server 2013 has added the ability to designate any library or list as a catalog. After the Cross-Site Collection Publishing feature is enabled for a site collection, you can designate any library or list within that site collection as a catalog so that content can be reused on publishing site collections.

You can use catalog-enabled libraries or lists for scenarios such as an article library, knowledge base library, or product catalog. For example, in an Internet business scenario where a company is selling electronic products such as TVs and radios, the company can use one or more lists that are enabled as catalogs to share product information such as brand, color, and size as it applies to each product. By using cross-site publishing, this information can then be displayed in one or more publishing site collections.

Another example is an intranet scenario, where all knowledge base articles created in an organization can be written and stored in one or more libraries that are enabled as catalogs in a content site collection. By using cross-site publishing, different combinations of these knowledge base articles can be displayed on one or more publishing site collections — for example, based on how relevant the articles are for the different departments in the organization.

SharePoint Server 2013 includes a new publishing site collection template, the Product Catalog Site Collection, designed to author, store and maintain data that is used in a catalog scenario. By default, the Cross-Site Collection Publishing feature is automatically enabled in the Product Catalog Site Collection. However, you must still configure the catalog settings to share content with other site collections, just as you would with any other library or list.

When you connect a library or list that is enabled as a catalog to a publishing site collection, a result source is automatically created for this library or list. A result source narrows the scope from which the search results can be retrieved. That is, the result source created for a library or list is limited to content within this library or list. For example, you can use the automatically generated result source to limit a query in a Content Search Web Part. You can also copy a result source or change it to specify an even narrower search result scope.

Content Search Web Part

SharePoint Server 2013 has added a new Content Search Web Part that displays content that was crawled and added to the search index. To display content in the Content Search Web Part, you specify a query in the Web Part. This query is automatically issued, and it returns results from the search index when users browse to a page that contains the Content Search Web Part. The Content Search Web Part is especially powerful when it is used in combination with managed navigation and category pages. For example, in an Internet business scenario where a product catalog is displayed, a term within the term set specified for managed navigation is associated with a specific category page, as described earlier in Category pages. You can specify that a query in a Content Search Web Part on a category page use the current navigation category as part of the query. For example, when users browse to a category, such as Computers, a query is issued from the Content Search Web Part to return all items from the search index that are specified as Computers. Similarly, when users browse to the category Audio, the same Content Search Web Part on the same category page will display items in the search index that are specified as Audio.

Category pages

Category pages are page layouts that are used for displaying structured content such as catalog data. You can use category pages when you want to aggregate content that meets certain criteria or parameters. For example, in an intranet scenario, all company events are maintained in a list that is shared as a catalog. You want the information about each event to appear in the same manner — for example, with a title in bold, followed by information about when and where the event occurs. To avoid having to create one page for each event, you can create some category pages that can be used to display all events in the same manner.

Category pages are closely tied to managed navigation. This is because you can associate a category page with a specific term within the term set that is used for managed navigation. For example, in the company events scenario that was described earlier, you can have a term set in which the different departments are used for managed navigation. You can use two separate category page templates to display the different events. Category page 1 can be used to display all events related to the Marketing department, and Category page 2 can be used to display all events related to the Human Resources department.