Saturday, March 30, 2013

Convert App For Office Project to Asp.net MVC Project Type


When you create a new office app project Microsoft visual studio automatically creates two projects for you- one is a web project and the other one is the manifest project which essentially contains all the information about your app required by Microsoft office. The web project created for you is a simple web form project. As microsoft already stated that office app can be built on top of any server side language, or it may not have any server side language at all, provided that you have a manifest uploaded in any app catalog and your web is hosted in a valid http url.
However sometimes you may want to convert your office web project to a full blown Asp.net Mvc project and benefit from some server side technology. Here I provide you with some basic steps and tweakings required to convert your office app web project to Asp.net Mvc Project.

If you are looking for converting an existing MVC project to office app then you can follow this link



  1. Unload the project
    1. Right click the project and click on Unload Project Menu
  2. Now Right click the project again and click on Edit {Project Name}.


Now we will be doing few changes in project xml to get the project up as a MVC project type.


  1. Locate the <ProjectTypeGuids> within <PropertyGroup> xml element and replace the whole field with this

{E3E379DF-F4C6-4180-9B81-6769533ABE47};{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}


  1. Add <MvcBuildViews>false</MvcBuildViews> inside <PropertyGroup> xml element.
  2. Add the following reference along with other references. Please note that we will be resolving these assemblies using Nuget later on. For now just include them in project file. Also remember that these are the standard references which come along when you create a new Mvc 4 project. Some of the assemblies here may not be required at all such as EntityFramework unless you decide to use EntityFramework as your ORM.



      ..\packages\EntityFramework.5.0.0\lib\net45\EntityFramework.dll
    
    
      True
      ..\packages\Microsoft.Web.Infrastructure.1.0.0.0\lib\net40\Microsoft.Web.Infrastructure.dll
    
    
      ..\packages\Newtonsoft.Json.4.5.6\lib\net40\Newtonsoft.Json.dll
    
    
    
    
      ..\packages\Microsoft.AspNet.WebApi.Client.4.0.20710.0\lib\net40\System.Net.Http.Formatting.dll
    
    
    
    
      True
      ..\packages\Microsoft.AspNet.WebPages.2.0.20710.0\lib\net40\System.Web.Helpers.dll
    
    
      ..\packages\Microsoft.AspNet.WebApi.Core.4.0.20710.0\lib\net40\System.Web.Http.dll
    
    
      ..\packages\Microsoft.AspNet.WebApi.WebHost.4.0.20710.0\lib\net40\System.Web.Http.WebHost.dll
    
    
      True
      ..\packages\Microsoft.AspNet.Mvc.4.0.20710.0\lib\net40\System.Web.Mvc.dll
    
    
      ..\packages\Microsoft.AspNet.Web.Optimization.1.0.0\lib\net40\System.Web.Optimization.dll
    
    
      True
      ..\packages\Microsoft.AspNet.Razor.2.0.20710.0\lib\net40\System.Web.Razor.dll
    
    
      True
      ..\packages\Microsoft.AspNet.WebPages.2.0.20710.0\lib\net40\System.Web.WebPages.dll
    
    
      True
      ..\packages\Microsoft.AspNet.WebPages.2.0.20710.0\lib\net40\System.Web.WebPages.Deployment.dll
    
    
      True
      ..\packages\Microsoft.AspNet.WebPages.2.0.20710.0\lib\net40\System.Web.WebPages.Razor.dll
    
    
      True
      ..\packages\WebGrease.1.1.0\lib\WebGrease.dll
    
    
      True
      ..\packages\WebGrease.1.1.0\lib\Antlr3.Runtime.dll
    



  1. Add the following Target above ProjectExtensions. Order is not mandatory. However make sure this element is at the same element as <ProjectExtensions> element is.



    
  



  1. Right click the project file and click on Reload menu.


Now your project file is ready so that visual studio can recognize it as an MVC project with all the contextual features specific to MVC.


  1. Remember the assemblies that we included in our project file’s xml? It’s time to resolve them using nuget. Some of the assemblies might not be resolved. In my case some assemblies such as Antlr3.Runtime, EntityFramework, Newtonsoft.Json, System.Web.Optimization and WebGrease assemblies are not resolved.
  2. Right click the references and Click on Manage Nuget Packages.
  3. Under Online tab search for Microsoft.AspNet.Web.Optimization for System.Web.Optimization and click on Install Remember while installing this assembly other assemblies such as WebGrease, Antlr3.Runtime are automatically resolve due to it’s dependencies.
    1. Similarly resolve Newtonsoft.Json and EntityFramework. Remember Newtonsoft.Json is actually displayed as Json.net in Nuget Package manager.



  1. Now let’s structure our project similar to what a typical MVC 4 project looks like. Remember I won’t be going into details on this as this might take me ages to do so. Just grab or create a new mvc4 project and copy them into this project.
    1. Add Controllers, View Folders.
    2. Add BundleConfig.cs, FilterConfig.cs, RouteConfig.cs and WebApiConfig.cs(if required).
    3. Add Global.asax file and call Register functions on the above classess.
    4. Change your root web.config file to include these configuration elements



    
    
    
    
    
  

    
    
    
    
    
      
        
        
        
        
        
        
        
      
    
  
 
    
    
      
      
      
      
      
      
    
  

    
      
        
        
      
      
        
        
      
      
        
        
      
    
  



  1. Also make sure you are not missing anything from the below configuration elements in your web.config file inside views folder. If you don’t have web.config inside views folder, then add one.


    
      


  1. Now start adding your controllers, views and necessary js files and all to get working
  2. Last but not the least, go to your office app manifest and change the Source location to an appropriate route to your application. After everythings is complete don’t forget to close the project and reopen it again.

Hope this helped you to understand how flexible and easy it is to get started with building Apps for Office. Apps for Office for now have very few features/apis, however I am really hoping that Microsoft is working on extending Microsoft office web apps and adding new functionalities that developers can leverage to create stunning and powerful apps.


I am really excited to try out this new technology and hopefully will be able to continue further with my journey exploring and digging deep into Office App apis.

Saturday, March 9, 2013

Convert existing web project to office app using Visual Studio 2012


Converting an existing web project to office app in Visual Studio 2012 is as simple as a piece of cake. Simply follow the instructions below to get started and see it for yourself.


  1. Right click on your web project.


  1. Click on “Add App for Office Project”. After this you will be given a dialog asking you for few options which are similar to the ones when you create a new “App for Office” Project.
  2. After this you can see that a new project {YourProjectName}.office is added into your solution. This project holds the manifest file used by Microsoft Office to determine the app’s information.
  3. After that don’t forget to check the Source Location under manifest settings.
  4. Now save your solution and then fire up your application clicking on the start tool bar button.