Wednesday 19 March 2014

My First Sharepoint-Hosted App in 2013

My First Sharepoint-Hosted App in 2013

 Reference

I would recommend to read Apps in SharePoint 2013 post before going through this one.
I want to create a SharePoint-Hosted App in 2013 using Visual Studio.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtKnbkLyX0GdhrW-M-JZ6TpV9Pn1LPc3T3zqyCrWjgObh1BQge-3ZxPPcGl0Hn_3sLTJF6FXCkgaQ4e9HR-LLdw_QJKdyS2LHYdRX6co2gj0hSNto2A1E1xDmo6NespJA0A_1CYsXsAOg/s400/1.png
I have created a SharePoint 2013 machine with all required software.
Just as a best practice, even if you are creating a standalone server, enable Active Directory Domain Services.
SharePoint 2013 works better when the system is in a Domain, rather than in a workgroup.

So, I have installed Windows server 2012, enabled all required features. Installed Office 2013, SharePoint 2013, Visual Studio 2012 and Developer tools for SharePoint 2013.

We will create an "App for SharePoint" and try to understand the scaffold code and try to deploy it and see what can happen.

Step 1: Open Visual studio and select "App for SharePoint".
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ZXBH3MVprcVvO_uvvUPdjcHs6LooDo9vEygFhpUWIXsyAgrb9g4LeHfEMm7VaOiJuoIT1tZM1NnnOOFus7DCjiP42fsbX2x37Iv7wR-K5h8ZgmJmHRM1ls0nTWuEWToJMqXRH92NJA0/s640/2.png

Provide required data. While selecting the hosting option, remember to select the hosting option as "SharePoint-Hosted". You can select Auto-Hosted if you want to deploy your App to Windows Azure. Provider-Hosted if you want to deploy the App to any other hosting Providers.

Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmZp12-owBIVjJJ9dpHfqIiwPtxuascE-OI2-4JDaGUN3bhKLLcl_YePRwEGbpMlaY9tvBgRhwG1xtYPXtx6y2rQ3RPV2u-JWtT3rWWIMLwZulbOmtWghLSl6-iIfvfEEci5oTcFE8Lsk/s640/3.png

Step 2: Default "App" code is created and lets have a look at its content.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ7AUgB6tz6uCcpKKJ4Yih9IzvuGzSW1St2c4dmnZDJzsVVvK0GetSJG8GsgnCEvl8RpgLOgsayyCn0RCtkIrHGnkI8nHGJjRf75kDodqN1qYbev2ng2MbQap6DiDb2-JqqLOhYbkWdHM/s320/4.png
Project is created with a Default.aspx page and few script files and configuration files. First thing we need to know is about "Default.aspx" page. We already read that every SP-Hosted App we Install/Deploy will be created as a Subweb under SP Web application. That Subweb will be defaulted to this specific page. When user click on the App, he will be navigated to this page first. So better not to mess with the name of the file.
Lets see the content of the file now.

Step 3: I have attached the snapshot of the "Default.aspx" file and see what is the significance of each part.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi0MoJNH0yn6wWA_XaRZ0QI9cEYmSOI8OUM7O4p-0-3guAo-1-o-75oL_BeHL2UH0zwJcLCERdnMMMQDU4jmq94nhuEnsXNHe4umVJGUQJiwHPRftOcW0mKJaG7Q4d2q-n6nMnOosXabs/s640/5.png

The first highlighted box refers to the Framework provided JavaScript libraries. As we will be using Client Side Object Model(CSOM), these Jscript libraries will provide the necessary support while execution of our custom code.

Second highlighted box refers to the local script file pertaining to this specific app. We will see in detail about this in next step.

Third one is the sample code I added. We will not be doing extensive coding right now. The objective is to see if there are any hurdles in deploying an App.

Step 4: Open App.js file under scripts. This file content is responsible for Loading the Context and Web information in which the App is running. Look at the code and its almost self explanatory.

Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirBrRpIXdiFeOI_tEf7FVA8RZCkV1ZZA3tQ9bfXJXk5ewJlBdnpaOntBNgS1elPFGWdb3-77ynXAlOVLMkTa5p6HD9WARqMgygruzo87C1haHG6GpC73Tu9w3hgd3kjTw8j7MKbeLYRPk/s640/6.png

Step 5: Now I tried to deploy the App. 
Oops, got an error.

" Error occurred in deployment step 'Install app for SharePoint': Failed to install app for SharePoint. Please see the output window for details."

Ok, looked at Output window found another reason.

 " ErrorDetail: Apps are disabled on this site. "

Now we need to remember what we learned in prior post.  Any SharePoint-Hosted App will try to create a Subweb which will be executed in a separate AppDomain apart from SharePoint Farm.
Currently SharePoint dint have any clue on where to Host this app code and what to do with it.

Step 6: We need to create a new App Domain, and register it with SharePoint. So next time when you deploy an App, it know where to host it.
I created my machine on a Domain "Sharepoint13.com". So I would like to create an App Domain "Sharepoint13Apps.com" for hosting purpose. For that go to 
Administrative Tools > DNS > following window will b opened showing the Machine Name and the current App Domain in which SharePoint farm is executing.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM3iE6A1hRmG2T1cR6EsofKxkTFsP8PQHuBu02fFAqM09afcDWkJ2ks1inNTv7MVgTAj4HLWEu6zjpb-6Hhsq-87gyFfg4NRaPycG7z2JrURfwwMIsHnjOehf67tr1u1qUUMJVnprx8qY/s320/7.png

Right click on Forward Lookup Zone and Click on
"New Zone" > "Next" > "Next" > "Next" > following window will open.

Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ4IhXtcHt6rU0lu6andRSgQa-Awdsurv8Roh6-4mwnq1Qe3aWXZ8TcKZblLOTfGQxxi30a4pHrpHLzbJPmuy0uLADmXNb9pQyhL-NjBjgwExHHxIL9g5SjTebt9X4LCbz1VqyGX3q_p8/s400/8.png
Now the new AppDomain is created, Now we will create a wildcard Alias (CNAME) record to allow apps to create unique domain names within our app domain, Sharepoint13Apps.com. Right-click Sharepoint13Apps.com and select Refresh. Then right-click Sharepoint13Apps.com and select New Alias (CNAME)…
Give the values as I have shown and Click OK.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPTnZ__-Y-hfx-jFsxAjrxNRDf_FyVvt4HPek4Vv1nr3LTFvL6MtA8msJF0k2nqaK_QWDOrF9jYACkwKx5n5gi0f5SbnajKrlCXzI8RABZqmUf1yBH7S0fJi17X3keqlR8yI5F37ELx6A/s400/9.png

Now App Domain is created, lets test it now. Open CMD window and try pinging to "abc.Sharepoint13Apps.com". . . Successfully done.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBs7N6Jq-hd0rn96Vbgt5cjcNq3KzcAwE9VPbBtP0Lb2DeGQ0jlVUZeXehIVyLpQ1OoJEgwwvf5zuX4g92qbxK-aFrkjd2M457rO1F5jvpNyOHTZu3pJPU3rGkQYi4_0qwtYvGn-qh-Q/s640/1.png

Step 7: We need to register this newly created app domain with SharePoint. Go to Central admin, click on Apps on right menu.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIMi2nXKpDS4uDa54o-cWtB5Rik1ONEVEJHvtJhINjOAFZhy_26OQVqrSZ_qlXzM1zGHr3-_7MkvjX5rRbcw1mJOYR5WeM9vD6XjF-ks4un0B1HnN5lkb3RXfMcsDOwZ5QFcFEA9AEtLg/s400/2.png
it will give you a message saying

"The Subscription Settings service and corresponding application and proxy needs to be running in order to make changes to these settings. "

This means a new service application running in its own app pool needs to be created and up and running.
Lets create a Managed account with Machine admin credentials. Mine is 
"Sharepoint13\Administrator".
Open the PowerShell window and execute below script.

Description: http://www.codeproject.com/images/minus.gif Collapse | Copy Code
add-pssnapin "Microsoft.Sharepoint.Powershell"
 
$account = Get-SPManagedAccount sharepoint13\administrator
 
Remove-SPServiceApplicationPool -Identity SettingsServiceAppPool
 
$appPoolSubSvc = New-SPServiceApplicationPool -Name SettingsServiceAppPool -Account $account
 
$appSubSvc = New-SPSubscriptionSettingsServiceApplication -ApplicationPool $appPoolSubSvc -Name SettingsServiceApp -DatabaseName SettingsServiceDB
 
$proxySubSvc = New-SPSubscriptionSettingsServiceApplicationProxy -ServiceApplication $appSubSvc
 

It may prompt you once, say Yes.
Some times the above script may give error

"Access denied. Only machine administrators are allowed to create administration service job definitions" 
Go to "C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\CONFIG\POWERSHELL\Registration" and execute SharePoint.ps1 as Administrator.
Issue will be resolved.

Once this script is successfully executed. We have created a new service Application, and its proxy which will run under its own Service App Pool. To verify this go to 
Central Admin > Service Applications > Manage Service Applications > you can see below Svc application created , up and running.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc2o0H13yd9_mKqEZMEDtaGzyLtRiJ31k-kNkPhxssYDwi3LXzYqFgxZglV4ZvvtVoFJxmGF1zVMbDUFdw0CzJ64mNJ2oDWYSQRCS7MZNSWvdwubLZXRZG9XdnrQXQIz763SOLKWr2DL4/s640/3.png
Step 8: Now go to Central Admin > Apps > Configure App URLs
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1xpVY0EvB2WjJDVr6MzHBZlCREpq-DNILSLnrLsOhgJIOD1OlzsASqWG68G2LBuh2uveqeCnAc7ZgC3s4FkryTwWPCCvrfp4WnkjzcId-J7_-95WhBdW3P4YohktynsFfzN5YvAbDgcQ/s640/4.png

You can see that the new App Domain we created automatically populated here, just mention app prefix as "Apps" and say OK.

We are all set to deploy our SharePoint-Hosted App. Right click on Solution and say "Deploy" 

Once App is deployed successfully, go to SharePoint Application and click on "Site Actions" the little gear symbol on top right and click on Site Content. You can see your App there.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCHc4zFOdjqlI9u5kQKVDHgES0Y3g9LzjVI6UVF86M-7hikr-1k8HrBdCSrNstY2v1m-DqEZCaiCbB6f1D6rChdm-qxfYgqSpjtMJT_M3UqwHkuK9g4SGIsGJPhevvj8BUJ2sUPDMyvac/s640/5.png

Lastly we have to observe one more thing before closing this topic. Observe the url of site and the url of the App after loading.
Description: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioph1PosWk05dE6Gz6iXeRX9XjJDROFBVZJBwWzoOoc2LtTbLupGAVFFM_gpbIX9NRgZVDDdxyFnxOFZcG0PMzz-te2GJmFBQyH6atobBop1jIcz8oYPP18msox6z63ubpsP-kXMkHd98/s640/6.png
We can see SharePoint-Hosted App loaded in different App Domain thus causing no harm to Actual SharePoint Farm in any circumstances. 
 






No comments:

Post a Comment