DatePicker Range in LightSwitch HTML Client

DatePicker Ranges in Visual Studio 2012 LightSwitch

The HTML Client has a DatePicker control by default that displays a touch sensitive control with a range of dates from 1930 to 2030.

Default DatePicker Range

This does seem to be fine as a start but what if you want to alter this behaviour. LightSwitch entity designer allows you to set minimum and maximum values for validation purposes. When you set these bounds the DatePicker looks like this:

DatePicker Range with Min/Max

For this DateTime field the minimum and maximum values have been set to restrict the date to between 1990 and 2020. The DatePicker dropdown accordingly is then only populated with the valid years.

If you have an application that has dates outside of the default range of 1930 to 2030 what happens? Perhaps your application has geneology, historic or forecast data with dates outside.

DatePicker with Year out of range

In this example we have a date outside of the default range, the year 2040, with no minimum and maximum range set. The date comes through from the OData service and is correctly formatted for displayed. For data entry the Year dropdown has the year 2040 added as an extra option so that the existing year can be set and selected. Unfortunately it cannot be changed to a year outside of 1930 to 2030, or 2040 though.

If you want to display a range of years outside of the default range of 1930 to 2030 is there a problem? Are you going to have to resign yourself to some javascript coding, perhaps in a post render event or possibly use another custom DatePicker control of which there are many.

But then take a look inside the generated model.JSON file.

DatePicker control in model.JSON

The custom controls are there and that is where the LightSwitch ‘intrinsic’ Year range settings are defined.

This is a bit of a LightSwitch Hack but if you edit the model.JSON file and set the ‘MinimumYear’ and ‘MaximumYear’ property values to for example 2000 and 2050 then we can get this effect:

Now we can change the year from 2040 to any range between 2000 and 2050. Also, if we combine this with minimum and maximum dates in the LightSwitch entity designer we can control the years displayed in all DatePicker Year dropdowns in our mobile application.

It turns out that in the LightSwitch screen designer for a MobileClient DatePicker control, there are two additional properties: MinimumYear and MaximumYear. These are the values that make there way into the model.JSON file.

HTML DatePicker Properties

So the default date range of 1930 to 2030 is hard-wired in to HTML client apps todate unless you change them. I would prefer an option for a rolling display of years along the lines of from -20 to +15 years (user specified) as this would future-proof our apps which will be looking a bit old come the mid-2020′s.

So if you are reading this in 2028 you may have to hack your model.JSON file after all!

If you need more than I implore you to seek other custom DatePicker controls and, failing that, just set the control type to a good old “text box“!

Conclusion

You can get the LightSwitch HTML Client DatePicker control to display custom ranges in the year dropdown. You can do so without writing a line of javascript code, without hacking the model.JSON file.

Be aware that the DatePicker behaviour is different from that of the RichClient so do take this into account when building your HTML client apps.

We did look into altering the base control properties at runtime without success and ran out of time for now.

We will update this blog post with alternative solutions as appropriate.

If you know better, please let us know!

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

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.

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

 

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

I also removed the popup option so clicking the pushpin on the map will open the 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 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 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

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

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

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

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

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

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

LightSwitch: Unable to find root project file at this location: {0}

Unable to find root project file at this location: {0}

• Are you searching for a solution to this error encountered whilst building a Visual Studio 2012 Update 2 LightSwitch project?
• Does it contain ‘HTML Client’ Mobile Web client sub-project?

Error trace goes like this:

The “LSResourceGeneratorsTask” task failed unexpectedly.
System.IO.FileNotFoundException:
Unable to find root project file at this location: {0}
File name: ‘D:\Fusion\SharePoint\SurveyApplication\SurveyApplication’
at Microsoft.LightSwitch.BuildTasks.Common…GetRootProjectFile(…

Answer

In my case all that I did was take a backup copy of the “SurveyApplication.ls3proj” file. When there are two or more “ls3proj” files in the parent project folder, it causes the build to fail.

So move or delete any additional “ls3proj” files that you have lying around.

Multiple HTML Clients for Modular LightSwitch Development

LightSwitch Research and Experimentation

Lots and lots of this going on at the moment, especially since the Visual Studio 2012 Update 2 release that includes the LightSwitch Mobile HTML client functionality.

LightSwitch Next Version Two Gossip Tidbits

#1 Live from VSLive 14th May 2013 – Q and A with Microsoft’s Jay Schmelzer, director of program management for Visual Studio at Microsoft.

Q: So do you expect more hands to go up next time you ask a Visual Studio Live! crowd about their awareness of LightSwitch?

JS: “I definitely do. I think we’ve got a number of things coming out that we aren’t ready to talk about yet, but probably in the BUILD time [June 2013], that will get some folks more excited and really understand where we are going with this. I’m hoping next year we come back and I see at least 50 percent of the hands in the air. I think the question for next year will actually be how many people are using it, and we will see probably 50 percent of this kind of audience saying they are using it for something.”  [50% of VS users using LightSwitch by 2014!]

#2 LightSwitch Forum 20^th May 2013 - Beth Massi: We also know that it’s painful for team development and so we are working on making that much easier in the next release — stay tuned for more info.

So there is more to come and we will be hearing about it real soon…

Multi-Client Sample – Vote for it in UserVoice!

Recipe: 1 x Silverlight client, 3 x HTML clients in 1 x LightSwitch project.

Q: Does it work?

A: Yes in designer, build and runtime.

Q: Can I have multiple Silverlight clients?

A: Yes, though not fully working. The designer throws errors because of the implementation of the singular client properties and navigation structure associated with the Silverlight client. But with caution it builds and runs with multiple Silverlight clients too.

OK, I want to download a code sample as I am not convinced…

Then head over to the Visual Studio Gallery as we have uploaded a sample for ‘experimental’ purpose:

Experiment with Multiple HTML Clients in LightSwitch

“This sample demonstrates how to bypass the problem of the LightSwitch V3 designer only allowing a maximum of two clients in a project: 1 x SilverLight, 1 x HTML. The LightSwitch V3 designer works with multiple HTML clients in one project though it is not officially supported. It is one of the UserVoice requests for the next version. This sample shows how to experiment with multiple HTML clients now to add an extra option to investigating modular LightSwitch development.”

Conclusion

One small step on the road to modular development of large projects using Visual Studio LightSwitch.

For more information just go see the LightSwitch HTML client articles and posts here:

• Beth Massi Blog – sharing the goodness – [open in new window]
• Visual Studio LightSwitch Team Blog – [open in new windows]
• Deep Linking … – DotNetLore – [open in new window]
• Forum: Modular development … – [open in window]
• Forum: What can you do with LS … – [open in new window]

Hello, Colors and more

MSDN Magazine > Issues and Downloads > 2013 > May 2013 Issue

Leading LightSwitch – Hello, Colors

Jan Van der Haegen

o

If you have not taken the time to read through and try the above sample written by Jan in his MSDN Magazine column then you should do so. As Jan says, if you are new to VisualStudio LightSwitch then visit the LightSwitch development center. LightSwitch has shallow learning curve, so you should be following through the ‘Hello, Colors’ article in no time.

o

For some reason MSDN Magazine web site refuses to let me post feedback so I decided to publish this blog post. Well done Jan, great article!

Following on, here are my attempts to implement colour-coding inside a sample LightSwitch HTML Client:

Picture 1: Sample form with colour picker

o

Picture 2: Sample popup dialog with colour picker

o

Picture 3: Colour-coded tiles

o

I think that is not too bad at all, however it was not all straightforward. I arrived at this point expecting success provided there were no typo’s:

Picture 4: Colour picker style at odds with the theme

o

So that did not work as expected. The input textbox gets focus and nothing shows. Jan’s examples usually work so I figured I must be missing some tweaks to the UI elements. Firstly, lets style the input textbox to match my JQuery Mobile ThemeRoller theme:

Picture 6: HTML element does not expand

o

To fix the problem I had to adjust the minimum width and height settings in the LightSwitch designer for the colorpicker custom control. I wonder if Jan did that or is there a problem with changes with the latest release of the software?

Picture 7: Setting minimum width and height

o

For those wishing to alter the style of the input textbox, here is the JavaScript code:

myapp.AddEditProduct.Color_render = function (element, contentItem) { setTimeout(function () { var colorPicker = $("<input class="id-element ui-input-text ui-body-a ui-corner-all ui-shadow-inset ui-mini"" + " id="cpFocus" type="text" maxlength="255"" + " value="" + contentItem.value + "" data-mini="true" />"); colorPicker.appendTo($(element)); colorPicker.colorpicker({ showOn: 'focus' }) .on('change.color', function (evt, color) { contentItem.value = color; }); contentItem.dataBind("value", function () { colorPicker.colorpicker("val", contentItem.value); }); }, 0); };

Code 1: The class tag for picking up the JQuery mobile styling

o
That is all for now! Many thanks to Jan Van der Haegen and the Visual Studio LightSwitch team.

o

Theme rolled courtesy of and at JQuery Mobile ThemeRoller – get rolling!

o

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.

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.

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 Theme

Mint Choc Chip Validation error

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.

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!