Business applications require often modern web interfaces, device-agnostic, cloud ready apps, while integrating data from multiple data sources (databases, web services, etc.). Join me in this session to see how we can leverage the power of LightSwitch HTML to build complex business models, rapidly build data-driven Single-page applications exploiting the rich backend model.

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

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

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

5.  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

6. 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.

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

8. 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

9. 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

10. 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

11. 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

12. 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

13. Model data, create relationships, queries

14. Create screens, pop-ups and themes

15. MVVM in LightSwitch

16. 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

17. 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)

18. 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

19. 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

20. 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

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