Category Archives: Silverlight

Adding a Bing Map to your CRM HTML5 LightSwitch Application

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications.

Use a Bing Map to view your CRM contacts

Utilising some existing resources you can quickly and easily create an HTML5 LightSwitch application  accessing your CRM data and displaying your contacts on a map.

1. Accessing your CRM data and creating an HTML5 Application

Follow the steps outlined in the  ‘Visual Studio Lightswitch – HTML5 Dynamics CRM Contacts Browser’  video created by Xpert360 to great a simple CRM contacts browser using the Xpert360 Dynamics CRM adapter.

CRM contact List

CRM contact List

You will need to have downloaded the Xpert360 Lightning Data Adapter for Dynamics CRM Online and on-Premise.  You can do this from the Visual Studio Gallery. Follow the steps detailed on this page to get your license and install the extension.

Extensions

Lightswitch Extensions


Adding the Bing map

Using the steps described in the ‘Visualizing List Data using a Map Control’ blog by Heinrich Wendel add a Bing map to a new tab in the browser screen.

CRM contacts on a Bing Map

CRM contacts on a Bing Map

 

Getting it to work with CRM data

To get the map working with your CRM data you only need to make a few simple changes to the  ShowItems function in the Browser screen code – Add the relevant references to CRM Data.

ShowItems Function changes

ShowItems Function changes

I also removed the popup option so clicking the pushpin on the map will open the view contact screen.

View Contact Screen

View Contact Screen

That’s it – easy.

LightSwitch Data Freedom – Part 2

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications.

Walkthrough Shaping your Data

Connecting to disparate data sources is one of the key strengths of Visual Studio LightSwitch and with so much data and so many data sources to consume the possibilities seem endless.

In real-world scenarios it does come with a few limitations which will be addressed by this technique. Do you suffer from:

  • My database is complex and has got hundreds of tables
  • The database schema design does not conform to standards
  • My tables have hundreds of columns
  • Performance in LightSwitch design and runtime is awful
  • It is no use as I am not allowed to change the database
  • I only want a few bits of data
  • LightSwitch will not import our database metadata

Design custom logical schemas for use by LightSwitch

The premise behind this is that we present to LightSwitch and Entity Framework our custom database schema which is to be used at design-time.

The custom schema needs to be compatible at runtime with the existing database schema as far as Entity Framework is concerned because at runtime we connect to the real database. For read-only access this is highly compatible but there are some caveats for updates, inserts and deletes. These caveats are the same as you would face designing a WCF RIA Service if you chose that route. If you try to break rules enforced in the database you will get errors, simple.

So it begins…

We start by matching our business requirements to the data entities in the target legacy database.

  • Restrict the tables to only those we need in [SalesForce] schema:
    • Contact, Lead, Account
  • Restrict the columns to only those required:
    • Done!
  • Implement views to add business logic:
    • Only show active leads

With this LightSwitch friendly database schema we have a better experience consuming it within our applications. This technique is not restricted to LightSwitch applications per se as it really applies to the use of Entity Framework wherever it is used.

Script and Cut example

You can use Visual Studio SQL Server Object Explorer for this part but we chose to use SSMS (SQL Server Management Studio). We script the existing objects as we don’t like typing, besides deleting is easier.

Generate script in SSMS

Generate T-SQL database script in SSMS

We edit the generated script to change the database name from ‘CRM’ to ‘CRM_View’. We execute this and now have an empty database. At this point our security is all setup by default in our development environment.

Generate T-SQL script for Contact table

Generate T-SQL script for Contact table in SSMS

We edit this generated script to change the database name and delete the columns that are not necessary for our LightSwitch application requirements. We execute this script and now our ‘CRM_View’ database has an empty ‘SalesForce.Contact’ table.

Then we repeat this to create the ‘SalesForce.Lead’ and ‘SalesForce.Account’ tables in the ‘CRM_View’ database.

That is the hardest part over.

Boot LightSwitch, Wire-up and Go

Create a new LightSwitch project, in our example a HTML (Visual C#) template variety. Then run the attach data source wizard and point it at our empty ‘CRM_View’ database.

Connect to our empty database

Connect to our empty database

The whole process to achieve this and create a LightSwitch HTML application took less than 5 minutes as I type fast. So now we have some  T-SQL scripts, an empty ‘CRM_View’ database with three tables and a LightSwitch HTML application in need of a screen.

Create screens to consume the data

Not much to see here, if you know LightSwitch, click-click-clickety-click and five minutes later our first application version with Tabs, Tile Views and detail screens looks like this:

VS2012 Solution Explorer

VS2012 Solution Explorer

Robert is your mother’s brother, that F5 moment arrives, but not before switching databases. Locate the server project ’Web.config’ file and edit the connection string to point at the real database with the data.

Switch database in Web.config

Switch databases in Web.config

It works! It performs well at design-time with our light-weight database schema. It performs well at runtime as we only transfer a subset of the contact list data that we need.

LightSwitch HTML Home Page

LightSwitch HTML Home Page

Even more smashing!

NEXT UP:

LightSwitch Data Freedom – Part 3: Pre-filter the data

PREVIOUS:

LightSwitch Data Freedom – Part 1: The chains of legacy databases

LightSwitch Data Freedom – Part 1

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications.

Freedom from the chains of legacy databases

Connecting to disparate data sources is one of the key strengths of Visual Studio LightSwitch. With so much data and so many data sources to consume the possibilities seem endless.

Attach Data Source Wizard

Attach Data Source Wizard

LightSwitch’s attach data source wizard has built-in connectivity to four main types of providers: Database, SharePoint, OData Service, WCF RIA Service.

It does come with a few real and perceived limitations as far as implementation and consumption of data are concerned, but are these limitations just self-imposed? Perhaps they are not as real as they seem.

Big Database, Big Data, Big Problems

By definition if a database exists then it is a legacy database. Yes, even that shiny new one you created yesterday. They come in all sizes, all shapes and comply to various degrees with established design patterns (or not!).

Some real and perceived difficulties:

  • My database is complex and has got hundreds of tables
  • The database schema design does not conform to standards
  • My tables have hundreds of columns
  • Performance in LightSwitch design and runtime is awful
  • It is no use as I am not allowed to change the database
  • I only want a few bits of data
  • LightSwitch will not import our database metadata

You can create your own WCF RIA data service to address some of these concerns but there is another approach that you can try without the need to write any code.

Design custom logical schemas for use by LightSwitch

You can use this technique to great effect with surprisingly fast results, true to the principles of LightSwitch RAD. It does not answer all concerns and problems, in particular, poorly designed databases, but it is a technique well worth considering and adding to your LightSwitch tool bag.

You (or a colleague) will need some basic T-SQL skills to successfully use this technique so you can rule yourself in or out. If you are out then it really is the time to get some basic T-SQL skills.

If you shape your data source and data in a way that is more LightSwitch friendly then you will have a better experience consuming it within your LightSwitch applications.

To cut a long story short let us see an example

Here is a simple but often real scenario

  • Legacy CRM database
  • 200+ tables
  • 10,000+ columns
  • We just need a list of contacts with a subset of the columns

Conceptually we need to map the data across to our data view for LightSwitch.

Map the existing database schema across to a subset

Map the existing database schema across to a subset

The whole process to achieve this and create a LightSwitch HTML application to consume it took less than 5 minutes. So now we have:

Simple home page showing contact list

Simple home page showing contact list

We did some T-SQL script generation, we made some simple name changes, but we did not write a line of code in LightSwitch!

It works! The legacy database contained unsupported data types that caused LightSwitch to fail to import the metadata at all before.

It performs well at design-time as the big, nasty database schema is no more.

It performs well at runtime as we only transfer a subset of the contact list data that we need.

Smashing!

NEXT UP:

LightSwitch Data Freedom – Part 2: Walkthrough shaping the data

LightSwitch Data Freedom – Part 3: Pre-filter the data

Xpert360 Lightning Emerald Theme Pack Released

Lightning Series - Emerald Theme Pack

Another new pack of 8 Lightswitch Themes has been released!

Simple, elegant and unique  themes inspired by shades of green are compatible with all Standard Shells. These 8 Themes add a professional, business flavour to your Lightswitch application.

The theme pack contains the following 8 themes

  • Emerald Dark
  • Emerald Dark Lite
  • Apricot
  • Watermelon
  • Avocado
  • Shamrock
  • Light Green
  • Grape

For more screen shots please go to the Xpert360 Theme Pack Gallery.

It is the third Theme Pack to be released by Xpert360 and can be downloaded here.

The themes in the pack target the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. They have been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

Preview Emerald

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

The theme pack can be obtained from the XPert360 Product page. This is the gallery posting – Xpert360 Lightning - Emerald Theme Pack[V2,V3,SL]

Xpert360 Lightning Office Theme Pack Released

Lightning Series - Office Theme Pack

Another new pack of 8 Lightswitch Themes has been released!

Simple, elegant and unique Office inspired themes which are compatible with all Standard Shells. These 8 Themes add a professional, business flavour to your Lightswitch application.

The theme pack contains the following 8 themes

  • Office Blue
  • Office Silver
  • Light Blue
  • Light Blue (Lite)
  • Office Black
  • Visual Studio 2012
  • Dark Blue
  • Dark Blue (Lite)

For more screen shots please go to the Xpert360 Theme Pack Gallery.

It is the second Theme Pack to be released by Xpert360 and can be downloaded here.

The themes in the pack target the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. They have been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

Office Theme in Gallery

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

The theme pack can be obtained from the Xpert360 Product Page. This is the gallery posting – Xpert360 Lightning - Office Theme Pack[V2,V3,SL]

Chocolate Theme Pack Sample – Mint Choc Chip

Lightning Series - Mint Choc Chip Theme

To celebrate the release of the  Xpert360 Chocolate theme pack Xpert360 have released this free theme based around mint choc chip and shades of green and chocolate with an added chocolate image. It is the third free chocolate theme and the fifth in a collection of free holiday and festive themes to be released by Xpert360 and can be downloaded from here.

Mint Choc Chip

Mint Choc Chip Theme

Mint Choc Chip Validation error

Mint Choc Chip Validation error

Mint Choc Chip Calendar

Mint Choc Chip Calendar

The theme targets the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. It has been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

install

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch. The theme is free and can be obtained from the Visual Studio Extensions gallery. This is the gallery posting – Xpert360Lightning -Mint Choc Chip Theme[V2,V3,SL] We hope you like it!

Xpert360 Lightning Chocolate Theme Pack Released

Lightning Series - Chocolate Theme Pack

A pack of 8 Lightswitch Themes has been released!

Simple, elegant and unique Shades of Chocolate and compatible with all Standard Shells. These 8 Themes  add a professional, business flavour to your application.

The theme pack contains the following 8 themes

  • Easter Egg
  • Dark Chocolate
  • Chocolate Orange
  • Mint Chocolate
  • Milk Chocolate
  • Chilli Chocolate
  • Chocolate Lite
  • Dark Chocolate Lite
Easter Egg Theme

Easter Egg Theme

Dark Chocolate Theme

Dark Chocolate Theme

Chocolate Orange Theme

Chocolate Orange Theme

Mint chocolate theme

Mint chocolate theme

Milk Chocolate Theme

Milk Chocolate Theme

Chilli Chocolate Theme

Chilli Chocolate Theme

Chocolate Lite Theme

Chocolate Lite Theme

Dark Chocolate Lite theme

Dark Chocolate Lite theme

For more screen shots please go to the Xpert360 Theme Pack Gallery.

It is the first Theme Pack to be released by Xpert360 and can be downloaded from here.

The themes in the pack target the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. They have been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

theme Installation

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

The theme pack can be obtained from the Xpert360 Product Page. This is the gallery posting – Xpert360Lightning – Chocolate Theme Pack[V2,V3,SL]

Spring Time Flowers Theme

Lightning Series - Spring Time Theme

This theme is based around  spring time flowers with vibrant shades of spring. It is the fifth in a collection of free holiday and festive themes to be released by Xpert360 and can be downloaded from here.

spring flowers theme

Spring Flowers Theme

Sprint flowers date picker

spring flowers validation

Validation error

The theme targets the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. It has been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

preview

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch. The theme is free and can be obtained from the Visual Studio Extensions gallery. This is the gallery posting – Xpert360Lightning – Spring Flowers Theme [V2,V3,SL] We hope you like it!

Chocolate Theme ready for Easter

Lightning Series - Easter Theme

This theme is based around Easter eggs and shades of chocolate, ready for Easter. It is the first of two Easter themes and the second in a collection of free holiday and festive themes to be released by Xpert360 and can be downloaded from here.

Easter Theme

Easter Theme Validation

Easter Theme with Validation error

Easter Theme Calendar

Easter Theme calendar

The theme targets the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. It has been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

Easter Theme Extension

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

The theme is free and can be obtained from the Visual Studio Extensions gallery. This is the gallery posting – Xpert360Lightning – Easter Theme[V2,V3,SL]

We hope you like it!

Shamrock Theme ready for St Patrick’s Day

Lightning Series – Shamrock Theme

This theme is based around shamrocks and shades of green, ready for St  Patrick’s day. It is the first of a collection of free holiday and festive themes to be released by Xpert360 and can be downloaded from here.

Shamrock Theme

Shamrock theme

The theme targets the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. It has been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

Shamrock Theme Extension

Shamrock Theme Extension

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

LightSwitch Theme Generator

LightSwitch Theme Generator

The theme is free and can be obtained from the Visual Studio Extensions gallery. This is the gallery posting – Xpert360Lightning – Shamrock Theme [V2,V3,SL]

We hope you like it!