Transcript Souping Up CRM 4 with Microsoft Silverlight

Chris J.T. Auld – Director, Intergen
[email protected] (@cauld)
www.syringe.net.nz
Notes Before We Start
Assumptions
Some prior CRM experience
No prior Silverlight experience
Like demos where we build stuff
Learning Goals
Practical and Pragmatic techniques
Currently shipping bits: CRM 4, SL3
Contact me
Chris Auld ([email protected])
Agenda
Overview
What is Microsoft Silverlight? What is XAML?
Where to use Silverlight?
Tooling for Silverlight: Expression Blend and Visual Studio
Calling into MSCRM from Silverlight
Hosting Silverlight inside the MSCRM UI
A Teaser
A Quick Lap Around What We’ll Be Building Today
What is Microsoft Silverlight?
A tool from Microsoft for building rich user interfaces that are
browser hosted
Cross-browser (IE, Firefox, Safari)
Cross-platform (PC, Mac, Linux*)
Does NOT require the.NET Framework installed
4 MB download, 4-10 seconds to install
Includes Core .NET Framework
Use any .NET languages – VB, C#, JavaScript, IronPython,
IronRuby
Rich presentation support – Animation, Inking, Video, Audio etc
*Community built Moonlight project offers Linux support
Why use Silverlight with MSCRM?
Allows rich LoB UI via a Web Browser
Faster UI – Rich UI elements of rapid data I/O
Richer UI – Rich graphics for visualization of data
Allows Media unsupported by CRM UI
E.g. No support for video or audio in out of box UI
Proprietary client side IP
Silverlight binaries can be obfuscated
Local ‘Isolated Storage’ provides semi-offline experience
Use desktop development practices on the web
Call WCF services, etc…
Silverlight vs WPF
Silverlight implements a subset of WPF
It uses the same XAML notation
Different hosting model
WPF is Microsoft Windows Only, Silverlight is Cross Platform
WPF Requires .NET Framework 3.0 or above
Key things missing from Silverlight:
No hardware access (Webcams, Microphones, Etc…)
Rich text features and flow documents
Style features simplified – no inheritance
Triggers - not on styles, data or control templates
Data binding more limited – no triggers, simplified Binding
object
No dynamic resource support
Still possible to write portable code for WPF + Silverlight
See for more details: http://tinyurl.com/cshosn
XAML: Declarative Programming for
Windows
Markup for Windows
Build applications in simple declarative statements
Serialization of an object tree
Code and content are separate
Streamline collaboration between designers and developers
Easy for tools to consume and generate
OK
<Button Width="100">OK
<Button.Background>
LightBlue
</Button.Background>
</Button>
Button b1 = new Button();
b1.Content = "OK";
b1.Background = new
SolidColorBrush
(Colors.LightBlue);
b1.Width = 100;
Dim b1 As New Button
b1.Content = "OK"
b1.Background = New _
SolidColorBrush _
(Colors.LightBlue)
b1.Width = 100
Hosting Silverlight Applications
Silverlight applications are hosted via a Web Browser plug-in using an HTML
object tag
Can specify HTML displayed if plug-in is missing
Silverlight.js helper file allows creation via code
Silverlight uses the Hosts network stack and default credentials
Can use ASP.NET Server Control
<div id="silverlightControlHost">
<script type="text/javascript">
Silverlight.createObject(
"ClientBin/SilverlightApplication1.xap",
silverlightControlHost, // parent DHTML element
"slPlugin", // id for generated object element
{}, {},
"param1=value1,param2=value2", //Parameters
"context”);
</script>
</div>
Silverlight + MSCRM Scenarios
Use Silverlight in a Web Portal
Build Silverlight application
Connect Silverlight application to Microsoft CRM via a WCF Proxy
Host Silverlight application in a new or existing web site
Use Silverlight inside the CRM UI
Build Silverlight application
Connect Silverlight application to Microsoft CRM
Host Silverlight application in an ASP.NET page in the ‘ISV’ folder
Surface in the CRM UI
Use sitemap.xml to create a link to load it into the main pane
Use ISV.config to launch new window
Load into an iFrame on an entity form
Building out the Silverlight application
Connecting Silverlight to CRM Data
• Use WCF and Add Service Reference
• Connect via a WCF Proxy on the Server
• Lightweight client proxy using HttpWebRequest
Connecting Silverlight to CRM Data
• Use WCF and Add Service Reference
–
–
–
–
–
–
Fast and familiar to CRM developers
Full access to data
Must use Dynamic Entities to work with data
Requires additional headers for CRM Authentication
Requires client to possess clear text credentials
See http://tinyurl.com/c5copm for helper code
Silverlight
Application
SOAP
1.2
CRM Web
Services
We’ll be taking this approach in the demo
Connecting Silverlight to CRM Data
• Connect via a WCF Proxy on the Server
– Familiar to most .NET developers
– Must write code for every type of data you need to access
– Can ‘hide’ credentials on the server – suitable for public web
sites
Silverlight
Application
WCF
Custom
WCF Service
WCF
CRM Web
Services
Connecting Silverlight to CRM Data
• Lightweight client proxy using HttpWebRequest
Smaller *.xap file loads faster
Full access to data
Requires client to possess clear text credentials
Requires purchase of the XRM Book to get library code
See http://www.thecrmbook.com
Silverlight
Application
Helper
–
–
–
–
–
RAW SOAP
CRM Web
Services
Cross Domain Calls
crm.hosting.fabrikam.com
www.contoso.com
*.XAP
Cross Domain Calls
Silverlight client calls a server’s service
Service is on different domain than that serving
the *.xap file
Silverlight rejects call
Must download a valid clientaccesspolicy.xml
file
Cross Domain Policy Files
Silverlight looks for both
ClientAccessPolicy.xml (Silverlight)
CrossDomain.xml (Flash format)
File must be in the web root
http://crm.contoso.com/clientaccesspolicy.xml
http://api.flickr.com/crossdomain.xml
Connecting the Silverlight app to CRM
Working with XAML in Expression Blend
Hosting Silverlight in CRM UI
• Linked from Main Navigation using SiteMap.xml
• Opened in a new window using ISV.config
• Hosted in an iFrame on an entity form
Hosting– Link from Main Nav
• Linked from Main Navigation using SiteMap.xml
–
–
–
Suitable for Dashboards and applications that do not relate to a
particular entity. Elements that should appear to be ‘part of CRM’
Use ‘Dynamics CRM Demonstration Tools’ to edit SiteMap.xml
See http://tinyurl.com/4drvz2 by @ceibner for a good How-To
Link displayed here
HTML Page and hosted Silverlight
application displayed here
Hosting – Open new Window
• Linked from Main Navigation using SiteMap.xml
–
–
–
Suitable for Applications that should appear to be separate to CRM
Edit ISV.config –use code to merge with existing config data
See http://tinyurl.com/4drvz2 for a good How-To
Link displayed here
Hosting – IFrame in Entity Form
• Hosted in a specific entity form
–
–
–
Suitable for Applications that require their context of a given entity e.g.
for a given Contact or Account
Use CRM Customization to create an iFrame on the Entity Form
This is what we’ll be doing in the demo
iFrame hosts HTML Page
HTML Page hosts Silverlight Control
Passing Context to Silverlight
Silverlight supports initialization parameters passed in as a string
When using iFrame hosting need to pass through parameters
<div id="silverlightControlHost">
<script type="text/javascript">
Silverlight.createObject(
"ClientBin/SilverlightApplication1.xap",
silverlightControlHost, // parent DHTML element
"slPlugin", // id for generated object element
{}, {},
"param1=value1,param2=value2", //Parameters
"context”);
</script>
</div>
Passing iFrame Parameters
Configure iFrame to pass parameters
IFrame will pass through parameters for
type, typename and id when loading
the hosted page
http://yoursite/SLHost.aspx?type=1&typename=account&id={GUID}
Pass Parameters to Silverlight
Need to take URL with parameters and pass these into Silverlight
http://yoursite/SLHost.aspx?type=1&typename=account&id={GUID}
public
: Application
public partial
partial class
class App
_Default
: System.Web.UI.Page
{{
<asp:Silverlight
public
App()
protected
void Page_Load(object sender, EventArgs e)
{{ID="Xaml1"
runat="server"
this.Startup += this.Application_Startup;
Xaml1.InitParameters
+= ",id=" + Request["id"];
}}Source="~/ISV/ClientBin/myExample.xap"
MinimumVersion="2.0.30523"
>
void Application_Startup(object
sender,
} private
StartupEventArgs e)
</asp:Silverlight>
{
this.RootVisual = new Page();
string id = e.InitParams["id"];
Hosting Silverlight in an iFrame with
Context
Summary
What is Microsoft Silverlight?
Where to use Silverlight?
Intro to XAML
Calling into MSCRM from Silverlight
Hosting Silverlight inside the MSCRM UI
Code on my blog later today
http://www.syringe.net.nz
© 2008 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.