Rapidly building data-driven modern Office 365 Cloud Business add-ins with LightSwitch HTML

Marius Constantinescu
D03: Rapidly building data-driven
modern Office 365 Cloud Business
add-ins with LightSwitch HTML
28 mai 2016
#SPSParis @c_marius

Diamond
Platinum
Gold
Silver
Organizers
& Community
www.spsevents.org/city/Paris/
Paris2016
Keynote Speaker: Jeff Teper
Microsoft Corporate
Vice-President
SharePoint + OneDrive
Donation

Tombola / Raffle
After Jeff Teper’s Keynote Après la Keynote de Jeff Teper
2
4
2
1
4
4
3

 MVP Office Servers and Services
(previously on SharePoint & Office365)
 MC* > e.g. MCT, MCSE, MCITP, MCPD &
others I forgot
 Solutions Architect with a focus on ECM &
Collaboration, Enterprise Search,
integration solutions.
 Regional Leader of the Swiss SharePoint
Club (600+ members)
 Speaker at local/international events
(Swiss SPC, SPS-*, Tech-Days, Soft-Shake)
Ego me > Marius Constantinescu
Managing Consultant
blue-infinity
Geneva, Switzerland
@c_marius
c_marius@msn.com
ch.linkedin.com/mct365

What do we mean by “modern, cloud
business apps”?
BusinessUser
• Cross-devices –
on any device at
any time
• Responsive ,
adaptive Design,
touch ready
• “Cool”…
Architect
• Multi-tier
architecture
• Patterns & more
patterns (e.g.
MV*)
• Integration with
Line-Of -Business
• Infinite Scalability
• Modelling tools
for business
entities with rules
validation
UXSpecialist/Designer
• Fluent,
Ergonomic,
Minimalistic
design
• Clear interaction
flows, navigation
• Material Design
Developer
•Best IDE , syntax
highlighting,
intellisense
•Automatic
dependency
management, error
checking for
CSS/JavaScript,
•minification of
resources
•Complex Libraries/
Frameworks & more
(Knockout, Durango,
BreezeJS, AngularJS, )
•Databinding, Widgets,
Web Components, etc.

What is Visual Studio LightSwitch?
Development environment in Visual Studio (2013+)
to rapidly build data-driven business productivity
apps & services
1. Focus 1st on modelling business logic
 Powerful integrated designers (data modelling, entities, relationships, validation rules)
 Response web mobile-ready apps, essentially a SPA, cross-device compatible UX (Template
driven screens creation)
2. Same deployment model as regular SharePoint
Apps
 Publish On-Premises (IIS), Microsoft Azure (Web Sites / Cloud Services) or 3rd party
 Office 365 / SharePoint 2013

What is LightSwitch shining through ?
Desktop Business Apps (Silverlight)
 Optimized for heavy data entry, mouse & keyboard scenarios, with legacy app
integration (i.e. COM)
 Default screen templates provide no-code experiences for manipulating data in a
variety of ways
Mobile Web Business Apps (HTML SPA)
 Optimized for touch devices on multiple platforms (iOS, Android, WP8, WinRT)
 Default screen templates provide no-code experiences that can target multiple form
factors
Cloud Business Apps with Provider Hosting
 Leverage experiences and infrastructure for app access, organizational identity, and
lifecycle management
 Provider hosting (IIS, Azure) allows flexible operational infrastructure choices

LightSwitch (V3.1) Key Features
• Other
 MVVM pattern
 Ability to consume/expose custom business model
as REST Web Service
 Globalization - Localize HTML clients (using human
readable .resjon)
 LINQ queries enabled over DataWorkspace
 ServerApplicationContext for custom services (easy
onboard SP CSOM code, WebAPI, etc.)
 Automatic Row tracking (useful in reconciliation
scenarios)
• Performance
 App load: minification, static compression
 OData: reduced payload size (using JSON lite)
• HTML Client
 Responsive design supports multiple form factors
 Produces Single-Page-Applications (SPAs)
 jQueryMobile 1.9 support
 Streamlined screen creation & navigation
 Command bars
 Popups and Screens as dialogs
 Semantic types (Person, Phone, Email) for improved
validation
• SharePoint 2013/ Office 365
business apps
 Connect to SharePoint 2013 Lists as Entities
 Access SharePoint assets via CSOM
 Provider-hosted deployment
 SharePoint On-Prem or Office 365

LightSwitch Architectural Overview
Data Workspace
Data Workspace
WCF Data Service
Silverlight HTML 5Desktop Mobile
ASP.NET 4.0+
IIS 7+
Data Workspace
Screens | Methods | Controls
SQLServer
Azure
SharePoint
ODataServices
Custom
Data Workspace
WCF Data ServiceOData Service
Submit Pipeline | Queries

LightSwitch Developer roadmap
Describe
Build data model
(data sources,
entities,
relationship)
Create Screens
(Tabs, Command
Bars, Dialogs,
Navigation
boundaries)
Refine
Enhance data
model
• Custom business logic
(include code based)
• Validation rules
• Filters, Queries (e.g.
Parameterized)
Refine screens and
dialogs
• Theme/Brand the App
• Perform layout
adaptations
• Code-based
customizations
Setup Security
(Server-side and/or
client-side)
Extend
Custom business
types (e.g. SSN,
AVS etc.)
Extend Services
(e.g. WebAPI)
Enhance with
custom UI
components
Add support for
custom Data
Sources
Publish
Decide hosting
strategy
Collect required
keys/certificates
Establish database
deployment

LightSwitch 101 – a lap around an
HTML Single Page App
Showcasing some of the great features of LightSwitch
HTML client, via an mobile-ready app for Events
Using the FREE edition of Visual Studio 2013/2015
Community Edition
 Review VS LightSwitch Project templates
 Explore designers – Data, Query & Screen
 Review Code writing capabilities (Client vs. Server)
 Enhance app with a bit more complex validation rules
(e.g. ensure color codes use Hex format)
DEMO

Model data, create relationships, queries

Create screens, pop-ups and themes

JavaScript library files
 jquery/ jquery.mobile
JavaScript libraries that provide cross
browser functionality
 Msls
The primary LightSwitch framework library
that provides the application functionality
 Winjs
A helper library for things such as Promise
objects that handle asynchronous calls
 Datajs
Used to provide OData communication an
contains a representation of all the data
objects in the LightSwitch application
 viewModel.js
Defines the JavaScript representation of the
screens and allows programmatic access to
the screens

Anatomy of a Cloud Business App
 Office Store
 SharePoint
app catalog
Manifest
OData (JSON lite)
 LightSwitch Web Site
 Service layer
Configured
Data
sources
• Cloud business app is SharePoint App with
added middle-tier hosted elsewhere ,
connected to data sources
• Clients talk to SharePoint via cross-domain
calls
• Ability to use Newsfeed, and associate
Documents to business entities
REST / CSOM
 SharePoint 2013
 Office 365 OAuth
• The provider-hosted middle-tier is
authenticated with SharePoint via
OAuth
• Middle-tier service layer can model
SharePoint
and potentially connect to other
external data sourcesModernbrowser client
(HTML5 SPA)

Cloud Business App Project
 Dedicated project template in the “Office/SharePoint”
 Just like with a “SharePoint App” allows deployment
additional SharePoint assets (lists, content types, etc.)
 CSOM references are added to Server project
automatically so you can access SharePoint host web
Enable/Disable SharePoint
Migrate existing apps
Hybrid Authentication Code
Server 2 Server or ACS (soon no longer) with no changes to
code
SharePoint List Attach uses user’s
identity (not app pool)
 Get access to
Application.SharePoint &
Application.User
 Automatically add references and
CSOM
 Publishing to corporate store

Event Companion app
A data-driven mobile-ready business app using
LightSwitch HTML client
Enhancing the LightSwitch web project for Events with
some more goodness
 Expanded the LightSwitch Server project
 Exploit LightSwitch server APIs
 More on Code writing capabilities
DEMO

Hosting Options for LightSwitch Apps
Microsoft Azure
SharePoint 2013 Add-Ins (option)
Cloud
On-Prem
Desktop Client
 Silverlight 5 in-browser
(Windows, Mac)
 Out-of-browser
(Windows only)
Browsers
 HTML client optimized
for iOS 5/6, Android 4,
WinRT, Win Phone 8.
SQL Azure
SQL Server
(for the Intrinsic Database)
SharePoint 2013

Thank you!
Online evaluation form
Evaluations en ligne
http://bit.ly/SPSParis2016Eval
Merci !

Rapidly building data-driven modern Office 365 Cloud Business add-ins with LightSwitch HTML

More Related Content

What's hot (20)

Similar to Rapidly building data-driven modern Office 365 Cloud Business add-ins with LightSwitch HTML (20)

More from Marius Constantinescu [MVP] (8)

Recently uploaded (20)

Rapidly building data-driven modern Office 365 Cloud Business add-ins with LightSwitch HTML