creating cloud hosted line of business applications with apps for office, o365, azure, and wp8...

Creating Cloud Hosted Line Of Business Applications with Apps for Office, O365, Azure, and WP8Michael ShermanTodd BaginskiCanviz Consulting, LLC.

DEV-B232

Who is this guy?Michael Sherman

Sr. SharePoint Architect, SharePoint & Web, CANVIZ Consulting

10-year SharePoint geek (dev, ops & arch.)20-year 12th Man (#gohawks)

@UWShermhttp://www.linkedin.com/in/uwsherm/http://www.canviz.com

Who is this guy?Todd Baginski

Vice President, Mobility & SharePoint Solutions, CANVIZ Consulting

Wannabe ski patroller & ski instructor, 8 Time SharePoint MVP, and SharePoint Top 25 Influencer

@toddbaginskihttp://www.canviz.comhttp://www.toddbaginski.com/bloghttp://sharepointpromag.com/blog/todd-baginski-sharepoint-development

Set the stageHow do Apps for Office, Office 365, and Azure make creating line of business apps in the cloud easy?

DemoArchitecture & CodeWrap up

Agenda

Key TakeawaysWith 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.

Innovation Management is one of the top 10 business processes identified in a recent MS survey.

• Shorten R&D time• Maximize productivity• Enable mobile workforce• Secure & reliable• Save IT Cost: use the cloud

Use the entire company’s creative efforts to introduce new ideas, processes or products.

Architecture ComponentsClients

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 SitesContest information

LeaderboardAnnouncementsMy IdeasQualify, Triage, Assess ideasCollaboration

Send notificationsCreate SharePoint sitesProvision SharePoint sitesImplement Apps for Office

Authentication Store idea, contest, and financial data

Qualify ideas

Triage, evaluate, display results

View Announcements, submit ideas

Core TechnologiesO365 Private Web SitesApps for OfficeMicrosoft OfficeWindows Phone 8Windows Azure• Web Sites• SQL Database• Mobile Services

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

Begin Innovation Management DemoMichael ShermanTodd Baginski

EmployeeKarin

Works in SalesUses her psychology degree to help in training the sales forceBusy, but wants the winning idea

Submitting Ideas

View AnnouncementsSharePoint List Data

Submit IdeaWindows Azure SQL Database

Calling all mobile users

Data SourcesSharePoint Announcements Listhttp://<tenancy>.sharepoint.com/innovation/lists/AnnouncementsWindows Azure SQL Database

Data Access ModelC# Code uses SP CSOM to read Announcements listC# Code calls ASP.NET Web APIASP.NET Web API uses Entity Framework to

Query and Update Windows Azure SQL Database

UI ModelXAML Controls

NotificationsAzure Mobile Services

Going Mobile

Communicating & Monitoring

Custom AppsECMCollaborationSearchWorkflowetc.

Office 365 Web Sites can do a lot!

Data SourceWindows Azure SQL Database

Data Access ModelASP.NET Web APIWeb API uses Entity Framework to

Query Windows Azure SQL Database

UI ModelWindows Azure Web SiteHTML/ASP.NET MVCPresented on SharePoint Page Using Client Web Part

Leaderboard Provider-hosted App

MVC Controller

public ActionResult LeaderBoard() { Dictionary<string, List<LeaderBoardModelDTO>> retDic = new Dictionary<string,

List<LeaderBoardModelDTO>>(); LeaderBoardModel leaderBoardModel = new LeaderBoardModel(); retDic = leaderBoardModel.GetLeaderModel();

… return View(retDic); }


Data Access ModelASP.NET Web APIWeb API uses Entity Framework to



My Ideas Provider-hosted App

Data SourceSharePoint Announcements List on O365 Private SharePoint site

Data Access ModelASP.NET Web API[SharePointContextFilter] attribute passes SharePoint Context seamlesslyJust decorate and code!Web API uses Managed CSOM to query Announcements List


Announcements Provider-hosted App


Data Access ModelASP.NET Web API

JSONP Service ControllerASP.NET Web API uses Entity Framework to execute Stored Procedures in the Windows Azure SQL Database

UI ModelHTML/JQueryPart 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?

It only took a day!

Remote provisioning branding patternWeb API uses Managed CSOM to

Provision root site and sub sitesProvision branding artifacts (Master Page, Images, CSS, JS, Page Layouts)Create Announcements list and add AnnouncementsCreate Tasks list and add TasksClear and set home page contentsAdd and install SP AppsAdd 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 DemoMichael ShermanTodd Baginski

EmployeeKarin

Works in SalesUses her psychology degree to help in training the sales forceBusy, but wants the winning idea

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 PatternsTemplates

Sounds pretty cool, how do I make one?


Data Access ModelJQuery invokes ASP.NET Web APIASP.NET Web API uses Entity Framework to


UI ModelOffice.js

Office.context.document.urlAvailable after document is savedPre-provisioning makes documents ready to go!Does not apply to Mail Apps for Office

Windows Azure Web SiteHTML / CSS / JQuery

Here’s the pattern we used

Multiple Task Pane AFOsFrom StoreCustom

Read/WriteDeploy

Provider-hostedSP App

Word App For Office – Qualify Idea

HTML Code <div class="holder"> <label>Interests / Hobbies</label> <div class="styled-select"> <select id="InterestsHobbies"> <option></option> <option>Automotive</option> <option>Clothing</option> <option>Electronics</option> <option>Garden</option> <option>Home</option> <option>Health and Beauty</option> <option>Sports</option> <option>Toys</option> </select> </div> </div>

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 Codefunction 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 AFOCustomTask PaneRead/Write

Data VisualizationVotingDeploy

App for Office 2013Upload to tenancy

Possible Compose App

Mail App for Office – Vote for Ideas

HTML Code<ul class="block" id="block1">

<li class="first"><label for="IDEA1"><span class="idea">IDEA 1</span><input id="IDEA1" name="group_1" type="radio" /></label><p class="dept">department of idea</p><p class="desc">description of idea...</p></li>

<li class="last"><label for="IDEA2"><span class="idea">IDEA 2</span><input id="IDEA2" name="group_1" type="radio" /></label><p class="dept">department of test</p><p class="desc">description of test...</p></li>

</ul>

Triage LeadLisa

Product Development SpecialistMarket and financial analysis expert“I live in Excel”

Single Custom AFORead/WriteData Visualization

Charting

DeployProvider-hosted SP App

Excel App for Office – Triage Idea

Executive ReviewRon

SVP, Consumer ProductsResponsible for financial performanceDemanding schedule“I don’t have time for half-baked ideas. Show me the bottom line!”

Multiple AFOsFrom StoreCustomTask PaneEmbedded

Read/WriteData Visualization

Mapping

DeployProvider-hosted SP App

Excel App for Office – Evaluate Results

Office.js CodeOffice.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 SitesASP.NET MVC Web SiteASP.NET Web APISharePointContextFilter

SQL DatabaseEntity FrameworkCreate Model From Cloud Database!

Mobile ServicesPush Notifications

You name it, I can do it!

Takeaways: Visual Studio

PublishingSharePoint AppsWindows Azure Web Sites

SQL Azure Database integrationRemote 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 2013

http://channel9.msdn.com/Events/SharePoint-Conference/2014?sort=sequential&direction=desc&term=283SPC351 - Office Power Hour - new developer APIs and features for Apps for Officehttp://channel9.msdn.com/Events/SharePoint-Conference/2014?sort=sequential&direction=desc&term=351

Related content

http://channel9.msdn.com/Events/SharePoint-Conference/2014?sort=sequential&direction=desc&term=283






SPC294 - Achieving better business productivity through Apps for Office

http://channel9.msdn.com/Events/SharePoint-Conference/2014?sort=sequential&direction=desc&term=294SPC391 - Deep dive into Mail Compose Apps APIshttp://channel9.msdn.com/Events/SharePoint-Conference/2014?sort=sequential&direction=desc&term=391

Related content







MSDN Apps for Office Developer Centerhttp://msdn.microsoft.com/en-US/office/aa905340

MSDN Apps for Office dev quick start guidehttp://msdn.microsoft.com/en-US/office/dn448457

Introducing MVC support for apps for SharePoint

http://blogs.msdn.com/b/officeapps/archive/2013/07/09/introducing-mvc-support-for-apps-for-sharepoint.aspx

Related content

http://msdn.microsoft.com/en-US/office/aa905340



http://msdn.microsoft.com/en-US/office/dn448457

http://msdn.microsoft.com/en-US/office/dn448457




Site Provisioning Techniques and remote provisioning

http://blogs.msdn.com/b/vesku/archive/2013/08/23/site-provisioning-techniques-and-remote-provisioning-in-sharepoint-2013.aspx

Self Service Site Provisioning Using Apps for SharePoint 2013

http://blogs.msdn.com/b/richard_dizeregas_blog/archive/2013/04/04/self-service-site-provisioning-using-apps-for-sharepoint-2013.aspx

Related content





SharePoint Online Solution Pack for branding and provisioning

http://blogs.msdn.com/b/vesku/archive/2014/03/02/sharepoint-online-solution-pack-for-branding-and-provisioning-released.aspx

Related content




Dev. .comOffice

One stop shop for Office Developer Platform

Explore our MSDN Libraryhttp://dev.office.com

Calls to action

Give Feedback Drive our roadmap http://aka.ms/OfficeDevFeedback

Get Answershttp://aka.ms/AskSharePointhttp://aka.ms/AskOffice

Play with our code sampleshttp://aka.ms/OfficeDevSamplesFollow our Patterns & Practiceshttp://aka.ms/OfficeDevPnP

Patterns and practicesProviding App Model Patterns for common Full Trust Code scenarios

30+ Visual Studio projectsCommon scenarios• Branding• Site provisioning• Remote event receivers • Large file support• Taxonomy driven navigation• And much more…

ContributeOpen source coming soon!

aka.ms/OfficeAMS

Related content – BreakoutsOFC-B254 Integrating Yammer and Microsoft SharePoint Using .NETMonday, May 12 1:15 PM - 2:30 PM Room: 350D

DEV-B230 Most Commonly Asked for On-Premises Customizations Reimagined as Applications for SharePointMonday, May 12 3:00 PM - 4:15 PM Room: 350D

DEV-B319 Get Started Developing Applications for Microsoft Office and SharePoint Server 2013 Monday, May 12 4:45 PM - 6:00 PM Room: 332A

DEV-B231 Office Power Hour: New Developer APIs and Features for Applications for Office Tuesday, May 13 8:30 AM - 9:45 AM Room: 381A

DEV-B227 Anyone Can Build a SharePoint Application with Microsoft AccessTuesday, May 13 8:30 AM - 9:45 AM Room: 332A

OFC-B274 Implementing Microsoft SharePoint 2013 Hybrid for Search, Business Connectivity Services, Microsoft OneDrive for Business and YammerTuesday, May 13 1:30 PM - 2:45 PM Room: 360A

DEV-B232 Creating Cloud Hosted Line-of-Business Applications with Apps for Office, Microsoft Office 365, Microsoft Azure, and Windows Phone 8 Wednesday, May 14 8:30 AM - 9:45 AM Room: 340

OFC-B311 A Practical Use of External Data SourcesWednesday, May 14 8:30 AM - 9:45 AM Room: 360A

DEV-B357 Developing Office 365 Cloud Business Applications Wednesday, May 14 5:00 PM - 6:15 PM Room: Hilton L2 Ballrm C

DEV-B387 Deep Dive into Mail Compose Applications APIs Wednesday, May 14 5:00 PM - 6:15 PM Room: 352D

DEV-B386 Setting Up Your On-Premises Environment for App Development Thursday, May 15 10:15 AM - 11:30 AM Room: 320A

DEV-B228 Build Connected Productivity Apps for SharePoint and Office Thursday, May 15 10:15 AM - 11:30 AM Room: Hilton L2 Ballrm C

DEV-B390 SharePoint Power Hour: New Developer APIs and Features for Apps for SharePoint Thursday, May 15 1:00 PM - 2:15 PM Room: 360A

DEV-B389 Who Are You and What Do You Want? Working with OAuth in Microsoft SharePoint 2013 Thursday, May 15 2:45 PM - 4:00 PM Room: 310A

Related content – LabsDEV-H207 Developing Applications for Microsoft SharePoint 2013 with Visual Studio 2013OFC-H308 Building Task Pane Applications for Microsoft Office 2013 OFC-H309 Building Visual Studio-Based Workflows in Microsoft SharePoint 2013 OFC-H310 Building Windows 8 Applications with Microsoft SharePoint 2013 OFC-H311 Business Connectivity Services (BCS) for Microsoft SharePoint 2013

Related content – Exam Prep EXM04 Exam Prep: 70-331 and 70-332 MCSE: SharePoint (Microsoft SharePoint Server 2013)Tuesday, May 13 8:30 AM - 9:45 AM Room: Hilton L2 Ballrm F

Resources

Learning

Microsoft Certification & Training Resources

www.microsoft.com/learning

msdn

Resources for Developers

http://microsoft.com/msdn

TechNet

Resources for IT Professionals

http://microsoft.com/technet

Sessions on Demand

http://channel9.msdn.com/Events/TechEd

http://www.microsoft.com/learning

http://microsoft.com/msdn

http://microsoft.com/technet



Complete an evaluation and enter to win!

Evaluate this session

Scan this QR code to evaluate this session.

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

creating cloud hosted line of business applications with apps for office, o365, azure, and wp8...

Documents

mobile slide

sharepoint development

employee slide

agenda slide

client web

sharepoint page

javascript jquery ajax

cloud app model