CONFIGURE AN ENVIRONMENT FOR APPS FOR SHAREPOINT 2013

One of the new features of SharePoint 2013 is the SharePoint Store. Similar to the Windows Phone Marketplace and Google Play Store, this new feature gives site owners the ability to discover and download apps for SharePoint from the store and install them on their SharePoint Sites. Furthermore, if you are a developer for your company, you will need to setup your environment to host apps if you want to test them.

The following are examples of apps for SharePoint that site owners could add to their sites:

• An app that provides event planning tools.
• An app that provides a shopping cart experience for a site.
• An app that sends a note of recognition for good work (kudos) to someone in the organization.

When you install SharePoint 2013, by default this functionality is not supported and users will get the following error when they try to install an application.
Sorry, apps are turned off. If you know who runs the server, tell them to enable apps.

This article will provide IT Professionals and Developers a step by step guide with screenshots on how to make your SharePoint 2013 environment capable of using SharePoint Store applications.

This is what you need before you start

• Have a Farm Administrator account with the DBCreator and SecurityAdmin roles on the SQL Server.
• Have a Domain Admin account.

Here is a an overview of what we will do

• Create a forward lookup zone for apps
• Link the App Domain to the SharePoint Server
• Start the required Services
• Create the Subscription Settings and App Management Service Applications
• Configure The App URL’s in SharePoint
• Fix the “Out of the Box” errors
• Test our environment

1. Create a forward lookup zone for apps

SharePoint 2013 Apps have their own, isolated URLs, which are separate from the URLs of the sites where the app is being deployed to and where the app is being used. In order to provide isolation apps should run in their own domain, instead of in the same domain name as your farm. Using a different domain name for apps helps prevent cross-site scripting between apps and SharePoint sites.

Microsoft recommends that the new domain name should NOT be a subdomain of the domain that hosts the SharePoint Sites. For example, if the SharePoint sites are at matrinescu.com, consider mcatrinescuApps.com instead of app.mcatrinescu.com as the domain name.

The DNS management tools are an optional component, and can be installed without installing the DNS Server components.

Server Manager | Features | Add Feature | Remote Server Administration Tools | Role Administration Tools

and select DNS Server.

1. Verify that the user account that performs this procedure is a local administrator on the domain controller.
2. Click Start, point to Administrative Tools, and then click DNS.
3. In DNS Manager, right-click Forward Lookup Zones, and then click New Zone….

4. In the New Zone Wizard, click Next.

5. In the Zone Type page, accept the default of Primary zone, and then click Next.

6. In the Active Directory Zone Replication Scope page, select the appropriate replication method for your environment (the default is to all DNS servers in this domain), and then click Next.

7. In the Zone Name page, in the Zone name box type the name for your new app domain name (for example, mcatrinescuApps.com), and then click Next.

8. On the Dynamic Update page, select the appropriate type of dynamic updates for your environment (the default is Do not allow dynamic updates), and then click Next.

9. On the Completing the New Zone Wizard page, review the settings, and then click Finish.

Don’t Forget: If you plan to use apps on an internet-facing website, you have to buy this domain name! Furthermore, even if you only use it internally, it’s always better to buy it before someone else buys it and registers it in the public DNS.

2. Link the App Domain to the SharePoint Server

We now need to instruct our DNS to forward all the requests from mcatrinescuapps.com to the SharePoint Server hosting the apps

1. Verify you are logged in as a Domain Admin

2. In DNS Manager, under Forward Lookup Zones, right-click the new app domain name, and then click New Alias (CNAME).

3. In the New Resource Record dialog box, in the Alias name (uses parent domain if left blank) box, type *.

4. Next to the Fully qualified domain name (FQDN) for target host box, click Browse and navigate to the Forward Lookup Zone for the domain that hosts the SharePoint sites and then navigate to the record that points to the server that hosts the SharePoint site.

5. Click OK.

To verify the new domain name

This is just a little step to make sure everything we did until now is right.

1. Click Start, and then click Command Prompt.

2. At the command prompt, type ping followed by a subdomain of the domain that you created, and then press ENTER. (EX: ping vlad.mcatrinescuapps.com) where vlad is a random word and mcatrinescuapps.com is your newly created domain.

If the ping command returns the correct IP address, then your wildcard for the domain name was configured successfully.

3. Starting the required services

Apps rely on the App Management and Microsoft SharePoint Foundation Subscription Settings service applications. These service applications use the multi-tenancy features to provide app permissions and create the subdomains for apps. Therefore, even if you are not hosting multiple tenants, you must still establish a name for the default tenant for your environment (any SharePoint site that is not associated with a tenant will be in the default tenant). In this step we will start the two required services!

1. Verify that you are a member of the farm administrators group in Central Administration.
2. In SharePoint 2013 Central Administration, click System Settings.
3. On the System Settings page, under Servers, click Manage services on server.
4. On the Services on Server page, next to App Management Service, click Start.
5. On the Services on Server page, next to Microsoft SharePoint Foundation Subscription Settings Service, click Start.

6. Verify that the App Management and Microsoft SharePoint Foundation Subscription Settings services are running.

4. Creating the Subscription Settings and App Management Service Applications

In this step we will create the two Service Applications we talked about in the previous step. As you know, Microsoft is strongly promoting PowerShell to the SharePoint Administrators, and to make sure you start using it, they made it the only way to configure the Subscription Settings Service Application. Since we will be doing PowerShell for the first one, we will both in PowerShell.

Verify that you have the following memberships:

• securityadmin fixed server role on the SQL Server instance.
• db_owner fixed database role on all databases that are to be updated.
• Administrators group on the server on which you are running the Windows PowerShell cmdlets.

1. In the configureSubscriptioSettingservice.ps1 script, change the values that are in blue in the following script. You download the script from http://sdrv.ms/TvjLOS

2. In the configureAppManagementServiceApp.ps1 script, change the values that are in blue in the following script. You download the script from http://sdrv.ms/TvjLOS

3. Open SharePoint 2013 Management Shell as an Administrator and run the scripts.

5. To configure app URLs

1. In Central Administration, click Apps.

2. On the Apps page, click Configure App URLs.

3. In the App domain box, type the isolated domain that you created for hosting apps.

4. In the App prefix box, type a name to use for the URL prefix for apps.

Original picture by Chris Whitehead and Sam Hassani

Here is how your URL will look like depending on the settings!

5. Click OK.

5.5 To configure Internet-facing endpoints for apps (Optional)

The SharePoint Store contains apps for SharePoint intended for use with sites that require Internet-facing endpoints. By default, these apps are not available (greyed out and cannot be purchased) because they are incompatible with most sites. However, if your farm is configured to allow internet-facing end points, you can turn on the Internet-facing endpoints feature to show these apps in the SharePoint Store. You turn this feature on in Central Administration.

1. In Central Administration, click Application Management.
2. On the Application Management page, click Manage Web applications.
3. On the Manage Web Applications page, select the web application that you want to change.
4. On the ribbon, click Manage Features.

5. In the feature list, next to Apps that require accessible internet facing endpoints, click Activate.

6. Click OK.

6. Fix the “Out of the Box” errors.

Our environment is now fully setup, however there is a little problem. Back in step 1, we created a new domain that will host our apps. When a user is browsing the site www.mcatrinescu.com and clicks an app, he will be forwarded to www.apps-00000(ID).mcatcatrinescuapps.com. We told our DC to forward those requests to our Front End, however SharePoint and IIS don’t understand it yet! How do we usually fix two URL’s going at the same site? AAM (Alternate access Mapping), but do you imagine doing this for every App? Luckily, there is a simpler way to fix this. We will create an empty-host header Web Application.

Since a picture is worth 1000 words, we are trying to get from here:

Original picture by Chris Whitehead and Sam Hassani

To here:

Original picture by Chris Whitehead and Sam Hassani

In case you are wondering, here is the 404 error you get if you try an app without applying the fix

Now, Let’s Fix it.

1. Go into Central Administration and click Application Management
2. Go into Manage Web Applications and create a new Web Application
3. Click on New, set the Port to 80 and do not enter anything in the Host Header

4. After that, you create a Site Collection using the Team Site

Now, we have to delete the Default Web Site from IIS!

1. Go into IIS Manager as an administrator, and expand your Sites.
2. Right click on the Default Website, and select Remove

7. Testing our Environment

Now that everything is set up we can finally test if we can run a simple application on our environment.

1. Go on a Site Collection on which you are a Site Collection Administrator, click on the Settings “wheel” and “Add an app”

2. In the Menu on the left side, choose “SharePoint Store”

3. Select the language at the top right, and choose an application! For my test I took the myFAQ application.

4. Click the big “ADD IT” button, and then sign in with your LiveID and password.

5. After than, you will get the message “You Just got this app for everyone in your organization”. Now, leave the checbox “Add this app to [SiteName] Checked, and click the Return to Site button.

6. In the next screen, click the “Trust It” button.

7. Now, we give it a minute and we should be able to access your newly installed app. The MyFAQ looks like this

I hope this tutorial has been informative and clear enough to guide you through each step of the way. If you get any errors, or something is not clear, please leave a comment and I will answer as soon as possible!

Create A SharePoint 2013 App Using Visual Studio 2013 And Deploy Office 365 Site

Here are the steps:

Step 1: Go to Start, then All Programs and click Visual studio 2013.



Step 2: Click File, then New and add Project.



Step 3: Click Apps under Office/SharePoint and select App for SharePoint 2013. Enter the name of the app and click OK.



Step 4: Enter SharePoint office 365 site URL and select SharePoint-hosted and click Finish.



Step 5: The following screen will appear.



Here I have changed the message in div tag.



Step 6: Open Solution Explorer.



Step 7: Right click the solution, then Build and Deploy the App.



Step 8: Go to your SharePoint Office 365 site.



Go to Site Contents and you can see your App here:



Click the App, then your app will be like the following screenshot:



Summary
In this article we saw how to create a SharePoint app using Visual Studio 2013 and deploy Microsoft SharePoint Office 365 site.

How to Create Web API in ASP.Net MVC

Let's start with a definition first.

Web API

The ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices.

The ASP.NET Web API is an ideal platform for building Restful applications on the .NET Framework. Referred from “Microsoft.com”.

Why to use the Web API

Currently most mobile devices, browsers and tablets are the medium for accessing most of the internet and in this also people are using mobile apps the most and to provide data to apps we are now going to use the Microsoft new technology called Web API.

When to use it

If you want to expose the data/information of your application to your clients and other people then that other people can use your data and interact with the data/information you expose to them.

For example, a mobile application requires a service.

HTML 5 requires a service.

Desktop PC and tablets require services.

Currently most device apps require Web API services. 

The ASP.Net Framework leverages both web standards such as HTTP, JSON and XML and it provides a simple way to build and expose REST based data services.

Some core concepts of ASP.Net MVC are similar to the ASP.Net Web API such as routing and controllers.

Requirements

We are using Visual Studio 2012 for a demo application.

Building a Web API

Let's start with creating a Web API project.

Start Visual Studio and select New project from the Start page or from the File menu select "File" -> "New" -> "Project...".

In the template pane select Installed Templates and expand the Visual C# menu. Inside that Visual C# select Web. In the list of projects select ASP.Net MVC 4 Web Application.

And name the project WebAPI_Basic.

For reference see the following snapshot.



After adding, a new dialog will pop-up.



Inside the project template select Web API and in the view engine select Razor.

A new project is created now.

Let's begin with adding Web API Controller

Now let's begin with adding a Web API Controller. It is nearly similar to adding a Controller in ASP.NET MVC.

Right-click on the Controller folder and add a new Web API Controller with the name CarDetailsController and in the template select API Controller with an empty read / write action.



After adding the Controller you will see the code as in the following snapshot.



You can keep this Web API controller anywhere in the application.

If you want to follow the convention then create the new folder in the root your of application with the name API.

Inside that you can add a Web API controller.

You have successfully added a Web API controller to your application.

Now you can run the application and test it.

For testing I am passing http://localhost:32359/api/cardetails/1 for calling the method get.

Wow, it's working!



It's easy to configure it as a Web API.

The ASP.Net MVC  and ASP.Net Web API makes heavy use of convention for configuration to lighten the work load for creating the services.

For example, add a decorating method with attributes to make it easy to do CRUD operations.

Else it will make it difficult to understand and code.

1. [HttpPut]  
2.         public void Put(int id, [FromBody]string value)  
3.         {  
4.   
5.             }  
6.  [HttpPost]  
7.         public void Post([FromBody]string value)  
8.         {  
9.   
10.              }  
11. [HttpDelete]  
12.         public void Delete(int id)  
13.         {  

The HTTP actions and their corresponding CRUD operations are:

• GET (Read)
  
  Retrieves the representation of the resource.
  
• PUT(Update)
  
  Update an existing resource.
  
• POST (Create)
  
  Create new resource.
  
• DELETE (Delete)
  
  Delete an existing resource.

Now let's begin with how to create a CRUD operation with the WEB API.

Let's start by adding a Model.

To add the model right-click on the model folder and add a class with the name CarsStock.



After adding the Model CarsStock.cs now let's start with adding properties to the class.



After adding the model properties now I will consume the HTTP service developed using the ASP.NET Web API in a simple cshtml page with jQuery and Ajax.

For that in the View folder I will add a folder named Car and inside that folder will add a CarStock named view. To add it just right-click on the View folder and select View.

The following snapshot shows how I had added the view.



After adding the view you will get a blank view because we are not using any tightly coupled model here.

Then add a Controller with the name CarController. Call this view Carstock for the demo of consuming the Web API.

In this I called the view CarStock.



After adding the Controller and View now let us move back towards the Web API and make some changes that we have already created with the name “CarDetailsController”.

Let's get to the first method in CarDetailsController.

1. GET IEnumerable 
   
   1. [HttpGet]  
   2.   public IEnumerable<CarsStock> GetAllcarDetails()  
   3.   {  
   4.       CarsStock ST = new CarsStock();  
   5.       CarsStock ST1 = new CarsStock();  
   6.       List<CarsStock> li = new List<CarsStock>();  
   7.   
   8.       ST.CarName = "Maruti Waganor";  
   9.       ST.CarPrice = "4 Lakh";  
   10.       ST.CarModel = "VXI";  
   11.       ST.CarColor = "Brown";  
   12.   
   13.       ST1.CarName = "Maruti Swift";  
   14.       ST1.CarPrice = "5 Lakh";  
   15.       ST1.CarModel = "VXI";  
   16.       ST1.CarColor = "RED";  
   17.   
   18.       li.Add(ST);  
   19.       li.Add(ST1);  
   20.       return li;  
   21.   }  
   This method is used to get a list of data.
   
   In this method I have used the Model CarsStock and created a list of CarsStock “List<CarsStock>“. 
   
   And returning it.
   
2. GET by id
   1. public IEnumerable<CarsStock> Get(int id)  
   2. {  
   3.     CarsStock ST = new CarsStock();  
   4.     CarsStock ST1 = new CarsStock();  
   5.     List<CarsStock> li = new List<CarsStock>();  
   6.     if (id == 1)  
   7.     {  
   8.         ST.CarName = "Maruti Waganor";  
   9.         ST.CarPrice = "4 Lakh";  
   10.         ST.CarModel = "VXI";  
   11.         ST.CarColor = "Brown";  
   12.         li.Add(ST);  
   13.     }  
   14.     else  
   15.     {  
   16.         ST1.CarName = "Maruti Swift";  
   17.         ST1.CarPrice = "5 Lakh";  
   18.         ST1.CarModel = "VXI";  
   19.         ST1.CarColor = "RED";  
   20.         li.Add(ST1);  
   21.     }  
   22.     return li;  
   23. }  
   In this GET method you can retrieve records for the database by passing an id.
   
3. POST
   
   1. [HttpPost]  
   2.  public void PostCar([FromBody] CarsStock cs)  
   3.  {  
   4.   
   5.  }  
   In this POST method you can post data (CREATE) to the database. In this I am using the Carstock model to post the data.
   
4. PUT
   
   1.  [HttpPut]  
   2. public void Putcar(int id, [FromBody]CarsStock cs)   
   3. {  
   4.                
   5.     }  
   In this PUT method you can UPDATE the data (UPDATE) to the database. I am using the Carstock model to update the data.
   
5. DELETE
   
   1. [HttpDelete]  
   2.     public void Deletecar(int id)  
   3.      {  
   4.   
   5.      }  

In this DELETE method you can delete data (DELETE) from the database. I am using an id to delete the data.

Here is a snapshot of all the methods and models after adding the attributes to it.



Now let's move to the view and do CRUD operations from there.

For getting a list of data I have created a function in jQuery.

1. Calling GET IEnumerable List from Ajax and getting data from the Web API.
   
   1. <script lang="ja" type="text/javascript">  
   2.   
   3.     function AllcarDetails() {  
   4.         $.ajax({  
   5.             type: "GET",  
   6.             url: "http://localhost:32359/api/Cardetails", //URI  
   7.   
   8.             dataType: "json",  
   9.             success: function (data) {  
   10.                 debugger;  
   11.                 var datadatavalue = data;  
   12.                 var myJsonObject = datavalue;  
   13.                 contentType: "application/json";  
   14.                 $.each(myJsonObject, function (i, mobj) {  
   15.                     $("#Cartbl").append('<tr><td width="50px">' + mobj.CarName +  
   16.                      '</td><td width="50px">' + mobj.CarModel +  
   17.                     '</td><td width="50px">' + mobj.CarPrice +  
   18.                     '</td>' + '</td><td width="50px">'  
   19.                     + mobj.CarColor + '</td></tr>');  
   20.   
   21.                 });  
   22.   
   23.             },  
   24.             error: function (xhr) {  
   25.                 alert(xhr.responseText);  
   26.             }  
   27.         });  
   28.   
   29.     }  
2. Calling PostCar Method using Ajax and posting data to the Web API.
   
   1. function PostData()  
   2.  {  
   3.   
   4.  var cardetails =   
   5. {  
   6. CarName: "Ertiga",   
   7. CarModel: "LXI",   
   8. CarPrice: "5000000",   
   9. CarColor: "blue"   
   10. };  
   11.   
   12.         $.ajax({  
   13.             type: "POST",  
   14.             data: JSON.stringify(cardetails),  
   15.             url: "http://localhost:32359/api/Cardetails",  
   16.             dataType: "json",  
   17.             contentType: "application/json",  
   18.         });  
   19.   
   20.      }  
3. Calling the PUTcar method using Ajax and updating the data of the Web API.
   
   1. function PutData() {  
   2.           
   3. var cardetails =  
   4.  {  
   5.   
   6.  CarName: "Ertiga",  
   7.  CarModel: "LXI",   
   8.  CarPrice: "5000000",  
   9.  CarColor: "blue"   
   10.   
   11.   };  
   12.   
   13.         var t = JSON.stringify(cardetails);  
   14.         var id = "0";  
   15.         $.ajax({  
   16.             url: 'http://localhost:32359/api/Cardetails/' + id,  
   17.             type: "put",  
   18.             contentType: "application/json; charset=utf-8",  
   19.             data: t,  
   20.             dataType: "json",  
   21.   
   22.         });  
   23.     }  
4. Calling the Delete car method using Ajax and to delete data of the Web API.
   
   1. function deleteData1()   
   2.     {  
   3.             var id = 0;  
   4.             $.ajax({  
   5.                 url: 'http://localhost:32359/api/CarDetails/' + id,  
   6.                 type: 'DELETE',  
   7.                 success: function (data) {  
   8.   
   9.                 },  
   10.                 error: function (data) {  
   11.                     alert('Problem in deleting car:' + data.responseText);  
   12.                 }  
   13.             });     
   14.  }  
5. Calling GET by ID from Ajax and getting data from the Web API by id.
   
   1. function GetCarById() {  
   2.         var id = 1;  
   3.         $.ajax({  
   4.             url: 'http://localhost:32359/api/CarDetails/' + id,  
   5.             type: 'GET',  
   6.             dataType: "json",  
   7.             success: function (data) {  
   8.   
   9.                 var datavalue = data;  
   10.                 var myJsonObject = datavalue;  
   11.   
   12.                 var CarModel = myJsonObject[0].CarModel;  
   13.                 var CarName = myJsonObject[0].CarName;  
   14.                 var CarColor = myJsonObject[0].CarColor;  
   15.                 var CarPrice = myJsonObject[0].CarPrice;  
   16.                   
   17.                 $('<tr><td>' + CarModel + '</td><td>' + CarName +  
   18.                 '</td><td>' + CarColor + '</td>' + '</td><td>' + CarPrice + '</td></tr>').appendTo('#Cartbl');  
   19.             },  
   20.             error: function (xhr) {  
   21.                 alert(xhr.responseText);  
   22.             }  
   23.         });  
   24.     }  

After completing all the functions of Ajax I am now displaying the view “CarStock”.



In the carstock view I have just added 5 buttons and on the click event of every button a different function of the Web API is called.

The following snippet is debugged in Firebug.



Final Output

Here in this view I have consumed a Web API for Demo.