Category Archives: Dynamics CRM

VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Theme Headers

New Screens in Office Azure Dark Theme

New Screens in Office Azure Dark Theme

Some sample screens with standard jQuery header formatting.

Headers, Footers and Toolbars

Here is a LightSwitch HTML client screen sporting the default light theme.

Menu

Auto-Tile Menu Default Light theme

Then here is a HTML client application with a theme called ‘Orchard’. Notice the correct rendering of the header after adjusting msls-light-2.0.0.css and msls-2.0.0.js for swatch support. The LightSwitch implementation does not use the JQuery Mobile header classes by default.

LightSwitch HTML Client drag and drop

LightSwitch HTML Client Orchard theme drag and drop list items

The default Microsoft LightSwitch msls-dark-2.0.0.css and msls-light-2.0.0.css style sheets have a definition to override the msls-header.ui-bar background style and set it to ‘inherit‘ from the body color.

msls-header.ui-bar background styles

msls-header.ui-bar background styles

To make the header bar styled as expected comment out the line:

background: inherit;

The header bar colour will then be set by your jQuery Mobile theme and swatch.

See this blog article for the menu template: LightSwitch HTML Screen Template – Auto-Tile Menu

See this blog article for sample themes: jQuery Mobile Themes suitable for LightSwitch Apps

Conclusions

We take you through all the shortcuts and tweaks to give style to your LightSwitch HTML applications and Cloud Business Apps! This article shows how to tweak the header bar style.

ooo

Failed upgrades, unloadable projects, old extensions, AIDE for LightSwitch will be there to help you through! Xpert360 consultants have real-world experience of reconstruction and resurrection of corrupt projects. Contact us if your need help troubleshooting your LightSwitch projects.

ooo

Company information: Xpert360 Ltd, founded in 2009, based upon three decades of IT experience, is an Independent Software Vendor and Custom Solution Provider based in the United Kingdom.

Xpert360 Lightning” and “AIDE for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2012 – 2013.

Guide to VS2013 LightSwitch HTML Themes

Guide to VS2013 LightSwitch HTML Client Themes

LightSwitch HTML Themes and Tools

LightSwitch HTML Themes, tweaks and Tools

Visual Studio 2013 was published on Friday 18th October 2013. This blog post is the anchor to a series of articles covering the A-Z of themes that we are editing and evolving over time.

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. Brought to you by the original and genuine Power Tools for Visual Studio LightSwitch!

The LightSwitch HTML Client in VS2013 targets the jQuery Mobile framework and the themes are implemented as Cascading Style Sheets (CSS).

Headers, Footers and Toolbars

Here is a HTML client application with a theme called ‘Orchard’. Notice the correct rendering of the header after adjusting msls-light-2.0.0.css and msls-2.0.0.js for swatch support. The LightSwitch implementation does not use the JQuery Mobile header classes by default. See this post:

VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Client drag and drop

LightSwitch HTML Client Orchard theme drag and drop list items

Selection List and Options

The HTML SELECT element is not easy to style and control through just CSS markup. For full control it is usual to use a custom control that mimics the SELECT element by using DIV’s and SPAN’s.

Styled LightSwitch HTML Choice List

Styled LightSwitch HTML Choice List

The SELECT element popup is implemented outside of the browser. The blue selection rectangle is not controllable in CSS and by default your themes will always be black, white and blue. We will extend the theme mark-up to do better styling in LightSwitch as in the above screen shot.

Rounded Corners

The use of rounded corners in themes can be aesthetically pleasing. The LightSwitch themes need extending to properly support them.

Clipped text and rounded corners

Clipped text and rounded corners

The screen shots above show the adjusted rounded corner support.

Previewing LightSwitch Themes

We have an easy implementation of theme swapping and view port selection for different form factors.

Swatches

What are they and how can they be used in LightSwitch HTML applications.

Cloud Business Apps and Site Chrome

Creating dynamic themes and features to integrate with SharePoint and site chrome.

Mega-Theme Pack

It would not be complete without a theme starter pack. The preview containing 19 themes was released soon after the VS2013 in December 2013 and is currently available in a bumper bundle offer of AIDE 2013 for Visual Studio which also include a preview of 4 new Advanced Screen Templates.

The themes target jQuery Mobile and are not specific to LightSwitch. They are integrated into the Visual Studio IDE as new JavaScript Item Templates with supporting short descriptions and preview images. This extension supports VS2012 and VS2013. The themes are widely used in our other blog articles.

See this blog article: LightSwitch HTML Screen Template – Auto-Tile Menu

See this blog article: jQuery Mobile Themes suitable for LightSwitch Apps

Conclusions

The Visual Studio 2013 RTM was released in late 2013 and Xpert360 joined the party upgrading samples, themes, extensions and tools to support VS2013. We will take you through all the shortcuts and tweaks to give style to your LightSwitch HTML applications and Cloud Business Apps!

ooo

Failed upgrades, unloadable projects, old extensions, AIDE for LightSwitch will be there to help you through! Xpert360 consultants have real-world experience of reconstruction and resurrection of corrupt projects. Contact us if your need help troubleshooting your LightSwitch projects.

ooo

Company information: Xpert360 Ltd, founded in 2009, based upon three decades of IT experience, is an Independent Software Vendor and Custom Solution Provider based in the United Kingdom.

Xpert360 Lightning” and “AIDE for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2012 – 2013.

News on Software Previews for Visual Studio 2013 LightSwitch

Preparations for the Launch of VS2013

When Visual Studio 2013 RTW is published (scheduled for Friday 18th October 2013), it will trigger a round of regression testing and final adjustments for third-party Visual Studio tool vendors.

Somasegar’s blog article announcing Visual Studio 2013 RC contains a good overview of key features if you are playing catch-up. At the end he mentions the official VS2013 Launch Party is scheduled for Wednesday 13th November 2013. You can see the countdown to launch ticking down there.

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. Brought to you by the original and genuine Power Tools for Visual Studio LightSwitch!

Our product team is making steady progress towards releasing all our LightSwitch tools and extensions in the same timeframe as VS2013.

We needed to try some new VS2013 features and work through implementing some new features in AIDE for LightSwitch and the Xpert360 Lightning Dynamics CRM and Salesforce data adapters. We also needed to upgrade samples, themes and other extensions.

Working with multiple versions of Visual Studio side-by-side has gotten a lot easier over the years. We have machines with VS2012, VS2012 and VS2013 RC.

In this instance we needed to debug VS2012 VSIX extensions in the VS2013 RC experimental instance while testing LightSwitch VS2013  applications. Fortunately this works after a few adjustments to debug and VSIX settings.

VS2012 VS2013 LightSwitch family photo

VS2012 VS2013 LightSwitch family photo!

So here we have AIDE for LightSwitch running in debug in VS2012 Update 3 launching the VS2013 RC experimental instance then running a LightSwitch desktop application. We thought it was quite cool anyway.

Our LightSwitch Silverlight themes worked nicely with VS2013 Preview but not so with VS2013 RC. Our HTML CSS themes needed some work as the leap from VS2012 to VS2013 RC involved big changes in the LightSwitch HTML Client.

LightSwitch Mobile Salesforce app in Office 365

LightSwitch HTML Mobile Salesforce app in Office 365

We can see that not surprising some of the styling changed but here is a VS22013 RC LightSwitch HTML Client application deployed in Office 365 SharePoint on-line. The JQuery Mobile CSS theme was inspired by VS2012 IDE and sports rounded corners (no big deal really). The other interesting item here is the preview version of the soon to be released LightSwitch salesforce data adapter running in the Cloud.

Here is another HTML client application with a theme called ‘Orchard’. Notice the correct rendering of the header after adjusting msls-light-2.0.0.css and msls-2.0.0.js for swatch support.

LightSwitch HTML Client drag and drop

LightSwitch HTML Client Orchard theme drag and drop list items

We are adding final touches to the first release of AIDE for LightSwitch for VS2013.

AIDE for LightSwitch Exchange Hub

AIDE for LightSwitch Exchange Hub in VS2013 RC

There was more work to do for the Exchange Hub and Clone Screen due to the LightSwitch LSML structural changes. The LightSwitch Explorer is working well here:

AIDE for LightSwitch Explorer in VS2013 RC

AIDE for LightSwitch Explorer in VS2013 RC

The LightSwitch Screen Workbench and Entity Workbench windows are complete too.

AIDE for LightSwitch Entity Workbench

AIDE for LightSwitch Entity Workbench – Related items/screens

Xpert360 are providing a free upgrade to the new version of AIDE for LightSwitch for all existing customers.

The facility to exchange screens between LightSwitch projects (V1, V2, V3 and V4 projects with a few restrictions) is predicted to be a great help for those users upgrading LightSwitch 2010 and LightSwitch 2012 projects to VS2013.

When upgrades fail, projects become unloadable, extensions are outdated, AIDE for LightSwitch will be there to help you through! Our consultants and support staff have real-world experience of tricky LightSwitch project upgrades, including reconstruction and resurrection of corrupt projects. Contact us if your need help troubleshooting.

The next Vs2013 update on the blog will be for the VS2013 RTW release next week. We will have final news of all the upgrades and confirmation of release dates shortly afterwards.

Conclusions

The Visual Studio 2013 RTW date and official virtual launch day are fast approaching. Xpert360 have been busy upgrading samples, themes, extensions and tools ready for VS2013. It is going really well and we eagerly await the launch!

ooo

Company information: Xpert360 Ltd, founded in 2009, based upon three decades of IT experience, is an Independent Software Vendor and Custom Solution Provider based in the United Kingdom.

Xpert360 Lightning” and “AIDE for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2012 – 2013.

Something you should know about LightSwitch Screens – Part 2

Hidden secrets of LightSwitch Screens continued!

Is this something you should be concerned with? Let us re-phrase that, do you have a rich-client LightSwitch application? Then in all likelihood the answer is yes (unless you have not progressed past some one screen wonder bit of demoware). Thought so, you had better read on…

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. Brought to you by the original and genuine Power Tools for Visual Studio LightSwitch!

You may be asking yourself “Can this happen to me?”. Continuing with the previous blog article’s Contoso application (Part #1), let us create a new screen.

LightSwitch Contoso Add Screen

LightSwitch Contoso Add List and Details Screen

So here I create a standard List and Details Screen for the Appointments entity. That is it, we now have some optimisation work to do. Was that too easy to reproduce?

Appointments List Detail screen hidden items

Appointments List Detail screen hidden items

Using the LightSwitch Screen Workbench we can see the hidden screen content items. These screen content items can be viewed using the standard LightSwitch Screen Designer, it is just that the metadata is not so obvious and accessible as in the AIDE for LightSwitch views.

Appointments List Detail hidden items

Appointments List Detail hidden items

This is where your powers of observation come into play. It is obvious is it not? The hidden items are listed in the properties window there on the right. Surely you noticed this before. You select a hidden item and the designer… selects and displays its parent node.

Anyone for editing the Client.lsml or the AppointmentsListDetails.lsml in VS2013? In this case you don’t need to.

Using the Contoso Home screen example from earlier here is how to delete the items. First switch the parent screen item from Summary to Columns Layout.

Contoso Home List Summary to Column Layout

Contoso Home List Summary

Then select the exposed items and delete them (click then shift-click to select multiple items). Press delete and they are gone.

Contoso Home List Columns

Contoso Home List Columns

Then switch the view back from Columns Layout to Summary. Done!

These are just simple examples, extra screen items can be littered across your screens. If you switch an item’s view from Summary to a grouping then back again, the mere act of doing this will create the extra items but will not remove them.

When we move to more complex, larger real-world application this can get to be a serious problem. This next example shows an entity with wide rows from the Dynamics CRM data adapter. Take Contacts or Accounts, they have many properties and screens can suffer from severe performance degradation both at design-time and run-time.

Dynamics CRM Contact List Detail in LightSwitch

Dynamics CRM Contact List Detail in LightSwitch

Here you can see that the Contacts entity has 153 properties. The simple Contacts List Detail screen has more than 300 screen content items due to the hidden items doubling-up. If you deleted most of the visible Contact properties, perhaps leaving 10 visible, you would quite likely expect the screen metadata to be small. Unfortunately with the hidden 150 items it will not be. That is, unless you take action.

When optimising existing screens you will have to ensure that you did not access the extra items in custom code-behind. It is unlikely.

If you can use the standard LightSwitch Screen Designer to make these optimisations then the process must be legitimate, is it not?

Conclusions

This particular feature only affects the Rich Client Silverlight screens, not the HTML Mobile Client variety. It affects LightSwitch in VS2010, VS2012 and VS2013 varieties. This mostly affects List Detail screens and the default Summary property of the main entity. However it can afflict any screen with Summary items, it depends on what you did in the screen designer!

You need to use AIDE for LightSwitch views to more easily see the extra hidden screen items. You can struggle through with the property window list of screen items, but with complex screens this is difficult [in the standard LightSwitch Screen Designer].

If you use AIDE for LightSwitch Explorer or Screen Workbench you can obtain a list of the screen contents and export them to Excel. Then you can use Excel’s data table auto-filtering feature for further analysis.

Stay safe and may your LightSwitch applications perform better, until next time…

Oh, and the answer was No, I did edit the Client.lsml metadata, perish the thought.

Experiencing screen designer freezes and hangs? look HERE and HERE cast your votes and register your interest. It looks like more pressure is needed before this will be taken seriously. Visual Studio 2012 Update 2 onwards and VS2013 RC when your project supports globalization/localization.

ooo

Try them and support your LightSwitch tooling ISVs.

Also, do participate in forums and vote on your desired AIDE features. Help us to help you by prioritising the features in the product roadmap. VS2013, check! Export/Import entities and settings, check! Do you want to shape data to exclude columns? How about a localization workbench? Optimization workbench? Update metadata in bulk? That is a flavour of a few forthcoming features and ideas, we always keep a few things secret to surprise you!

ooo

Company information: Xpert360 Ltd, founded in 2009, is an Independent Software Vendor and Custom Solution Provider based in the United Kingdom.

Xpert360 Lightning” and “AIDE for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2013.

AIDE for LightSwitch General Release

Today saw the full commercial release of the long awaited AIDE for LightSwitch, a suite of power tools designed to assist LightSwitch developers.

AIDE for LightSwitch is a Visual Studio extension that advances the LightSwitch design experience. It surfaces hard-to-access metadata which complements working with the standard LightSwitch designer. Metadata is collected and presented in intuitive views to assist your development.

Designed and developed by our LightSwitch Experts and fully integrated into Visual Studio for a seamless user experience.

With Version 1.1 features such as Import and Export of screens, Entity Workbench and Project Optimisation already in final stages of development, we have released version 1.0 which includes a free upgrade to Version 1.1 for those who take advantage of the introductory offer available for a limited time.

Features

CLONE Screen 

Ever wanted to copy a LightSwitch screen? AIDE provides a simple copy screen process from the Screen Workbench. No more starting over on each screen in your project.

Clone Screen

LightSwitch Explorer 

Getting the big picture can be difficult especially on medium to large LightSwitch Solutions. AIDE provides the following ‘must have’ functionality to make searching for properties a thing of the past.

LightSwitch Explorer

With the AIDE LightSwitch Explorer you can :

  • Examine your screen, entity, project and solution metadata in one window.
  • Sort, resize and re-order the output columns
  • Double-click  to launch the file, screen or entity in the design window
  • Export the data to the clipboard for further analysis in  Excel or paste into Word for documenting your application.

Screen Workbench

Bring together all your screen metadata in one location with drill-down links to related assets, design windows and code behind.

Screen Workbench

  • Examine all  your screen metadata in one location.
  • Compare the properties of your screens properties side-by-side.
  • Double-click to Launch standard edit and design windows and the code-behind.
  • Create copies or backups of screens.

Visual Studio IntegratION

Designed to run natively within Visual Studio 2012 with dockable windows and standard styling. Supports multiple projects in solutions and multiple instances of Visual Studio.

drag window

Coming Soon in Version 1.1

IMPORT / EXPORT 
PROJECT OPTIMISATION
ENTITY WORKBENCH

View the full product roadmap…

Find Out More

For more information or to download the Trial or Buy AIDE, visit the Xpert360 website and Product Forums or view the Visual Studio Gallery Product Page.

For a limited period AIDE is on a reduced introductory sale price which includes a free upgrade to Version 1.1 features when available. See website for details.

Xpert360 Lightning” and “AIDE for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2013. 

Second Look at LightSwitch in VS2013 Preview

More Impressions OF LightSwitch

And Visual Studio 2013 Preview

This week has been very busy for most people involved with Microsoft technologies as the BUILD 2013 ( #BLDWIN ) and TechEd 2013 draw to a close.

Our teams have been busy evaluating and testing. As most activities have been successful and gratifyingly trouble free, some more feedback is available for LightSwitch V4 Preview and Visual Studio Extensions.

Xpert360 Lightning Series in VS2013 Preview

Xpert360 Lightning Series in VS2013 Preview

Above is a screen of a preview of the AIDE power tool running in Visual Studio 2013, an upgraded LightSwitch Rich-Client (V2 > V4) application, our LightSwitch Theme Generator tool, and four of our LightSwitch extensions migrated to VS2013.

For extensions the targeted version range in the manifest needed to include the internal version number ‘12.0’. So now the range is ‘[11.0, 12.0]’ in the manifests. The Dynamics adapter is slightly different as it is built in VS2010 so targets ‘VSLS’ and ‘10.0’ as well.

The LightSwitch theme packs worked straight away but the other extensions required some additional changes and testing.

Xpert360 Office Theme Pack Install for LightSwitch

Xpert360 Office Theme Pack Install for LightSwitch

The ThemeGen application is what we use internally to edit and validate LightSwitch themes for Rich-Client/Desktop/Silverlight clients. When dealing with the 600+ colors in the Cosmopolitan styles it is a big time saver.

In an unusual take on ‘eat-your-own-dog-food’ style, the upgraded ThemeGen is sporting themes from our VS2013 preview of Office Theme Pack, that was created using its self. For anyone new to LightSwitch, yes these are real screens of a real LightSwitch app delivered in true RAD-fashion.

VS2013 LightSwitch in Dark Blue Theme

VS2013 LightSwitch app in VS2012 Color Theme

VS2013 LightSwitch app in Dark Blue theme

VS2013 LightSwitch app in Dark Blue theme

The theme pack contains a total of eight themes.

Office Themes in VS2013 LightSwitch

Office Themes in VS2013 LightSwitch

Our remaining themes, theme packs, extensions and samples are in the queue to be upgraded and should be available over the coming weeks.

Conclusions

We have successfully upgraded some LightSwitch applications (Rich-Client and Mobile-Client) from V2 to V4 and V3 to V4.

Apart from the issues already noted by bloggers and the LightSwitch team, the process has been relatively smooth to-date.

We are running VS2012 Update 3 and VS2013 Preview side-by-side on Windows 7 and Windows 8 OS platforms.

We are in the process of upgrading Visual Studio extensions to VS2013 Preview and this process is also going well.

Good job all around!

Xpert360 Lightning FUSION CE for VS2012 RC Released

[UPDATE: 20-JULY-2013] Xpert360 Lightning AIDE for LightSwitch

The community addition has been discontinued for the foreseeable future. The complexities involved in the rapid releases of Visual Studio and LightSwitch versions have taken their toll. It became unfeasible for us to maintain it for free. Unfortunate, but almost inevitable with the new release cadence.

The LightSwitch Clone Screen feature is available now in the paid for AIDE for LightSwitch product. AIDE supports LightSwitch V2, V3 and soon V4 flavours of LightSwitch projects, in Visual Studio 2012 versions to Update 3. This includes rich client and html client support (Silverlight and HTML5). V4 support will be in the AIDE version targeting VS2013 RTM later in the year.

ooo

The VS2012 RC version was packaged and uploaded for preview to the Visual Studio Gallery today. The LightSwitch 2011 version needs some final integration tests running tomorrow. We tried out the extension on the LightSwitch HTML Client VHD preview and we will build a version for that too.

Here in our Xpert360 development labs we have been busy prototyping, designing, building and testing companion products for Visual Studio LightSwitch 2011 and 2012 RC. This is the first in the FUSION range that augment the LightSwitch designer capabilities. In time, we hope that similar features will be added to standard product. Meanwhile, we will support and enhance these extensions.

We have dedicated the LightSwitch Screen and Query Clone features to the Microsoft LightSwitch Team who are continuing to enhance and deliver arguably the most awesome RAD platform. Just look at that HTML Client preview!

Download from VS Gallery

Xpert360 Lightning Fusion CE in the VS Gallery

Xpert360 Lightning Fusion CE in the VS Gallery

Lightning Series FUSION - Entity List Details

Lightning Series FUSION – Contact entity in the prototype companion designer.

Lightning Series Fusion - Clone Screen Menu Item

Lightning Series Fusion – Clone Screen Menu Item

Clone LightSwitch Screens and Queries

Clone LightSwitch Screens and Queries

Click to reload the LightSwitch LSML files, reload the designer to access the cloned screen or query.

Do make sure you take backups and report back on your successful cloning. Any problems then get back to us and we will try to diagnose and fix.

Some points of note

  1. The new menu commands are available in the context menus for LightSwitch screens and queries in the solution explorer window.
  2. The name of the cloned entity is taken from the original entity name with a version number appended.
  3. Always make sure you take backups of your project.
  4. The clone functions manipulate the Client.lsml file.
  5. After cloning you will be prompted to reload the Client.lsml file, then the designer, this is normal behaviour.
  6. After the project reopens you can access the cloned screen or query.
  7. This extension works with VS2012 RC, not the HTML Client preview and not LightSwitch 2011.

Testing

Whilst every effort has been taken to ensure the clone functions operate correctly in a wide variety of LightSwitch projects it is up to you to test and verify that it works in your environment, with your custom LightSwitch extensions, service packs, patch levels and complexity of screens.

The Xpert360 development team have performed extensive testing against all standard LightSwitch types, custom controls and custom business types including the Pixata controls.

We are now adept at running tools to diagnose and fix corrupt Lsml files, even manual Xml edits: so you don’t have to hopefully!

What it does not do

We have not tested against custom shells and all possible custom controls from third-parties. You can help yourselves and the community by providing feedback for third-party controls that work with FUSION CE and reporting any bugs to warn others and so that we can investigate and supply fixes.

The clone functions do not clone or copy custom C# or VB code associated with a screen or query.

We are in the final stages of packaging a version that works with LightSwitch 2011.

We are working on a preview version to work with the HTML Client VHD version of VS2012 RC.