Creating Cloud Hosted Line Of Business Applications with Apps for Office, O365, Azure, and WP8 Michael Sherman Todd Baginski Canviz Consulting, LLC.

Who is this

Who is this development

Set the stage How do Apps for Office, Office 365, and Azure make creating line of business apps in the cloud easy? Demo Architecture & Code Wrap up Agenda

Key Takeaways With the cloud app model for SharePoint, Apps for Office, and Azure you can create secure cloud hosted line of business applications for a mobile workforce.

Architecture Components Clients MS Word + Apps for Office MS Excel + Apps for Office Windows Phone 8 App Private O365 SharePoint Site Cloud Windows Azure Access Control Service Windows Azure SQL Database Windows Azure Cloud Services/ Web Sites Contest information Leaderboard Announcements My Ideas Qualify, Triage, Assess ideas Collaboration Send notifications Create SharePoint sites Provision SharePoint sites Implement Apps for Office Authentication Store idea, contest, and financial data Qualify ideas Triage, evaluate, display results View Announcements, submit ideas

Core Technologies O365 Private Web Sites Apps for Office Microsoft Office Windows Phone 8 Windows Azure Web Sites SQL Database Mobile Services

Fundamental Toolsets ASP.NET MVC 5 Entity Framework 6 Visual Studio 2013 HTML 5 CSS 3 JavaScript / JQuery / AJAX

Begin Innovation Management Demo Michael Sherman Todd Baginski

Employee

Submitting Ideas

View Announcements SharePoint List Data Submit Idea Windows Azure SQL Database Calling all mobile users

Data Sources SharePoint Announcements List Windows Azure SQL Database Data Access Model C# Code uses SP CSOM to read Announcements list C# Code calls ASP.NET Web API ASP.NET Web API uses Entity Framework to Query and Update Windows Azure SQL Database UI Model XAML Controls Notifications Azure Mobile Services Going Mobile

Custom Apps ECM Collaboration Search Workflow etc. Office 365 Web Sites can do a lot!

Data Source Windows Azure SQL Database Data Access Model ASP.NET Web API Web API uses Entity Framework to Query Windows Azure SQL Database UI Model Windows Azure Web Site HTML/ASP.NET MVC Presented on SharePoint Page Using Client Web Part Leaderboard Provider-hosted App

MVC Controller public ActionResult LeaderBoard() { Dictionary > retDic = new Dictionary >(); LeaderBoardModel leaderBoardModel = new LeaderBoardModel(); retDic = leaderBoardModel.GetLeaderModel(); … return View(retDic); }

Data Source Windows Azure SQL Database Data Access Model ASP.NET Web API Web API uses Entity Framework to Query Windows Azure SQL Database UI Model Windows Azure Web Site HTML/ASP.NET MVC Presented on SharePoint Page Using Client Web Part My Ideas Provider-hosted App

Data Source SharePoint Announcements List on O365 Private SharePoint site Data Access Model ASP.NET Web API [SharePointContextFilter] attribute passes SharePoint Context seamlessly Just decorate and code! Web API uses Managed CSOM to query Announcements List UI Model Windows Azure Web Site HTML/ASP.NET MVC Presented on SharePoint Page Using Client Web Part Announcements Provider-hosted App

Data Source Windows Azure SQL Database Data Access Model ASP.NET Web API JSONP Service Controller ASP.NET Web API uses Entity Framework to execute Stored Procedures in the Windows Azure SQL Database UI Model HTML/JQuery Part of the SharePoint Master Page Admin Links Provider-hosted App

Master Page / Azure Code $("#Admin-link-go").click( function () { var adminText = $("#agave_admintext").html(); var azureSiteUrl = $("#AzureSiteHostname").val(); var turl; if (adminText == "0 - Seed first round ideas") { turl = azureSiteUrl + "/JsonpService/SeedFirstRoundIdeas"; } $.ajax({ async: true, url: turl, type: 'GET', dataType: 'jsonp', success: function (data) { if (data.status.toLocaleLowerCase() == "ok") { alert("Success."); } }) return false; });

How did you make it so pretty?

Remote provisioning branding pattern Web API uses Managed CSOM to Provision root site and sub sites Provision branding artifacts (Master Page, Images, CSS, JS, Page Layouts) Create Announcements list and add Announcements Create Tasks list and add Tasks Clear and set home page contents Add and install SP Apps Add documents to document libraries in SP Apps via App Installed event MSDN Code Samples Now Available! SharePoint Online Solution Pack for branding and provisioning A new way to brand your sites!

Resume Innovation Management Demo Michael Sherman Todd Baginski

Employee

Apps for Office

What is an App for Office? What can it do? Mix and match There’s an App for that, even Office! Office Client Toolbar Office Document Body Task Pane App for Office App for Office

Architectural Patterns Templates Sounds pretty cool, how do I make one?

Data Source Windows Azure SQL Database Data Access Model JQuery invokes ASP.NET Web API ASP.NET Web API uses Entity Framework to Query Windows Azure SQL Database UI Model Office.js Office.context.document.url Available after document is saved Pre-provisioning makes documents ready to go! Does not apply to Mail Apps for Office Windows Azure Web Site HTML / CSS / JQuery Here’s the pattern we used

Multiple Task Pane AFOs From Store Custom Read/Write Deploy Provider-hosted SP App Word App For Office – Qualify Idea

HTML Code Interests / Hobbies Automotive Clothing Electronics Garden Home Health and Beauty Sports Toys

Azure Code [ActionName("GetIdea")] [HttpGet] public IdeaDTO GetIdea(string IdeaName) { IdeaDTO ideaDTO = new IdeaDTO(); ideaDTO = (from i in db.Ideas where i.Name == IdeaName select new IdeaDTO { Id = i.Id, Name = i.Name, Description = i.Description, DepartmentName = i.Department.Name, Submitter = i.Submitter, TeamSiteURL = i.TeamSiteURL, Qualified = i.Qualified }).FirstOrDefault();... return ideaDTO; }

Office.js Code function bindContentControls() { updateStatus("Bind Content Control."); Office.context.document.bindings.addFromNamedItemAsync('ccProductName', Office.BindingType.Text, { id: 'ccProductName' }, function () { }); … } function getIdeaDataFromAzure() {... $.ajax({ async: false, url: fullUrl, type: 'GET', dataType: 'json', success: function (data) { Office.select("bindings#ccProductName").setDataAsync(data.Name, function () { });... }

Single AFO Custom Task Pane Read/Write Data Visualization Voting Deploy App for Office 2013 Upload to tenancy Possible Compose App Mail App for Office – Vote for Ideas

HTML Code IDEA 1 department of idea description of idea... IDEA 2 department of test description of test...

Resume Innovation Management Demo Michael Sherman Todd Baginski

Triage Lead

Single Custom AFO Read/Write Data Visualization Charting Deploy Provider-hosted SP App Excel App for Office – Triage Idea

Resume Innovation Management Demo Michael Sherman Todd Baginski

Executive Review

Multiple AFOs From Store Custom Task Pane Embedded Read/Write Data Visualization Mapping Deploy Provider-hosted SP App Excel App for Office – Evaluate Results

Office.js Code Office.context.document.bindings.addFromNamedItemAsync(sheetname + "!F5:F23", "matrix", { id: sheetid + "ccProduct" }, function (asyncResult) { var array = new Array(new Array(azuredata.Name), new Array(""), new Array(azuredata.Description), new Array(""), new Array(azuredata.DepartmentName), new Array(""), new Array(azuredata.IntendedCustomer.Age), new Array(""), new Array(azuredata.IntendedCustomer.Sex), new Array(""), new Array(azuredata.IntendedCustomer.Income), new Array(""), new Array(azuredata.IntendedCustomer.Occupation), new Array(""), new Array(azuredata.IntendedCustomer.Interests)); Office.select("bindings#" + asyncResult.value.id).setDataAsync(array, { coercionType: "matrix" }, function () {}); } });

Takeaways: Windows Azure

Web Sites ASP.NET MVC Web Site ASP.NET Web API SharePointContextFilter SQL Database Entity Framework Create Model From Cloud Database! Mobile Services Push Notifications You name it, I can do it!

Takeaways: Visual Studio

Publishing SharePoint Apps Windows Azure Web Sites SQL Azure Database integration Remote Debugging Visual Studio has a crush on Azure

Wrap Up

With the cloud app model for SharePoint, Apps for Office, and Azure you can create cloud hosted line of business applications for a mobile workforce. Apps for Office include a rich set of integration points with Office client applications. Azure is the glue! Plumbing SharePoint and OAuth with MVC Web Sites is a piece of cake. Visual Studio enables high developer productivity with templates and tooling. Did you drink enough coffee to get all that?

SPC283 - Get started developing Apps for Office & SharePoint Conference/2014?sort=sequential&direction=desc&term=283 SPC351 - Office Power Hour - new developer APIs and features for Apps for Office Conference/2014?sort=sequential&direction=desc&term=351 Related content

SPC294 - Achieving better business productivity through Apps for Office Conference/2014?sort=sequential&direction=desc&term=294 SPC391 - Deep dive into Mail Compose Apps APIs Conference/2014?sort=sequential&direction=desc&term=391 Related content

Site Provisioning Techniques and remote provisioning techniques-and-remote-provisioning-in-sharepoint-2013.aspx Self Service Site Provisioning Using Apps for SharePoint service-site-provisioning-using-apps-for-sharepoint-2013.aspx Related content

SharePoint Online Solution Pack for branding and provisioning pack-for-branding-and-provisioning-released.aspx Related content