Transcript Creating Cloud Hosted Line Of Business Applications with Apps for

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 guy?
Michael Sherman
Sr. SharePoint Architect, SharePoint & Web,
CANVIZ Consulting
10-year SharePoint geek (dev, ops & arch.)
20-year 12th Man (#gohawks)
@UWSherm
http://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
@toddbaginski
http://www.canviz.com
http://www.toddbaginski.com/blog
http://sharepointpromag.com/blog/todd-baginski-sharepointdevelopment
Agenda
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
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
Qualify ideas
MS Excel +
Apps for Office
Triage, evaluate, display
results
Windows
Phone 8 App
View Announcements,
submit ideas
Cloud
Private O365
SharePoint Site
Contest information
Leaderboard
Announcements
My Ideas
Qualify, Triage, Assess ideas
Collaboration
Windows Azure Access
Control Service
Authentication
Windows Azure Cloud
Services/ Web Sites
Send notifications
Create SharePoint sites
Provision SharePoint sites
Implement Apps for Office
Windows Azure SQL
Database
Store idea, contest, and
financial data
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
Calling all mobile users
View Announcements
SharePoint List Data
Submit Idea
Windows Azure SQL Database
Going Mobile
Data Sources
SharePoint Announcements List
http://<tenancy>.sharepoint.com/innovation/lists/Announcements
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
Office 365 Web Sites can do a lot!
Custom Apps
ECM
Collaboration
Search
Workflow
etc.
Leaderboard Provider-hosted App
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
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);
}
My Ideas Provider-hosted App
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
Announcements 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
Admin Links 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
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?
A new way to brand your sites!
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
Resume Innovation
Management Demo
Michael Sherman
Todd Baginski
Employee
Apps for Office
There’s an App for that, even Office!
What is an App for
Office?
What can it do?
Mix and match
Office Client Toolbar
Office Document Body
Task Pane
App for
Office
App for
Office
Sounds pretty
cool, how do I
make one?
Architectural
Patterns
Templates
Here’s the pattern we used
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
Word App For Office – Qualify Idea
Multiple Task Pane AFOs
From Store
Custom
Read/Write
Deploy
Provider-hosted
SP App
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 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 () { });
...
}
Mail App for Office – Vote for Ideas
Single AFO
Custom
Task Pane
Read/Write
Data Visualization
Voting
Deploy
App for Office 2013
Upload to tenancy
Possible Compose App
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>
Resume Innovation
Management Demo
Michael Sherman
Todd Baginski
Triage Lead
Excel App for Office – Triage Idea
Single Custom AFO
Read/Write
Data Visualization
Charting
Deploy
Provider-hosted SP App
Resume Innovation
Management Demo
Michael Sherman
Todd Baginski
Executive Review
Excel App for Office – Evaluate Results
Multiple AFOs
From Store
Custom
Task Pane
Embedded
Read/Write
Data Visualization
Mapping
Deploy
Provider-hosted SP App
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
You name it, I can do it!
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
Takeaways: Visual Studio
Visual Studio has a crush on Azure
Publishing
SharePoint Apps
Windows Azure Web Sites
SQL Azure Database integration
Remote Debugging
Wrap Up
Did you drink enough coffee to get all that?
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.
Related content
SPC283 - Get started developing Apps for Office &
SharePoint 2013
http://channel9.msdn.com/Events/SharePointConference/2014?sort=sequential&direction=desc&term=283
SPC351 - Office Power Hour - new developer APIs and features for Apps for
Office
http://channel9.msdn.com/Events/SharePointConference/2014?sort=sequential&direction=desc&term=351
Related content
SPC294 - Achieving better business productivity
through Apps for Office
http://channel9.msdn.com/Events/SharePointConference/2014?sort=sequential&direction=desc&term=294
SPC391 - Deep dive into Mail Compose Apps APIs
http://channel9.msdn.com/Events/SharePointConference/2014?sort=sequential&direction=desc&term=391
Related content
MSDN Apps for Office Developer Center
http://msdn.microsoft.com/en-US/office/aa905340
MSDN Apps for Office dev quick start guide
http://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-mvcsupport-for-apps-for-sharepoint.aspx
Related content
Site Provisioning Techniques and remote
provisioning
http://blogs.msdn.com/b/vesku/archive/2013/08/23/site-provisioningtechniques-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/selfservice-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-solutionpack-for-branding-and-provisioning-released.aspx
Explore
Play
Follow
Get Answers
Give Feedback
Patterns and practices
30+ Visual Studio projects
Common scenarios
Contribute
OFC-B254 Integrating Yammer and Microsoft SharePoint Using .NET
DEV-B230 Most Commonly Asked for On-Premises Customizations Reimagined as
Applications for SharePoint
DEV-B319 Get Started Developing Applications for Microsoft Office and
SharePoint Server 2013
DEV-B231 Office Power Hour: New Developer APIs and Features for
Applications for Office
DEV-B227 Anyone Can Build a SharePoint Application with Microsoft Access
OFC-B274 Implementing Microsoft SharePoint 2013 Hybrid for Search, Business
Connectivity Services, Microsoft OneDrive for Business and Yammer
DEV-B232 Creating Cloud Hosted Line-of-Business Applications with Apps for Office,
Microsoft Office 365, Microsoft Azure, and Windows Phone 8
OFC-B311 A Practical Use of External Data Sources
DEV-B357 Developing Office 365 Cloud Business Applications
DEV-B387 Deep Dive into Mail Compose Applications APIs
DEV-B386 Setting Up Your On-Premises Environment for App Development
DEV-B228 Build Connected Productivity Apps for SharePoint and Office
DEV-B390 SharePoint Power Hour: New Developer APIs and Features for Apps for
SharePoint
DEV-B389 Who Are You and What Do You Want? Working with OAuth in Microsoft
SharePoint 2013
EXM04 Exam Prep: 70-331 and 70-332
http://channel9.msdn.com/Events/TechEd
www.microsoft.com/learning
http://microsoft.com/technet
http://microsoft.com/msdn