jQuery Mobile Themes suitable for LightSwitch HTML Apps

Xpert360Lightning.HTMLThemes

This is a Visual Studio extension that provides a collection of jQuery Mobile CSS templates designed and tested for Visual Studio LightSwitch HTML Client and Cloud Business Apps (see below).

Sample of jQuery Mobile HTML Themes for LightSwitch

The Xpert360Lightning.HTMLThemes extension is bundled with AIDE 2013 for Visual Studio for now and is not available separately though this may change (see below for more information).

See the new Screen Templates and Themes in action >

New JavaScript Item Templates

The purpose of these CSS themes is to provide a starting point for selecting jQuery Mobile themes within Visual Studio 2012 and 2013. The themes are suitable for any jQuery Mobile web application and can be inspected and changed with the jQuery Mobile Theme Roller.

To use in your LightSwitch HTML apps it is usually to select ‘Add New Item‘ for the client project’s ‘Content‘ folder and choose a theme from ‘/JavaScript/Themes/’. Then edit the client project’s ‘default.htm’ file and change the theme reference to use the new theme. The theme name prefix indicates whether it works best with the ‘msls-dark…’ or ‘msls-light..’ style sheet.

Design-Time

The themes are accessible from the ‘Add New Item’ dialog.

Add New Item – JavaScript Themes for jQuery Mobile

Most of the themes contain two swatches. You can browse through the themes in Visual Studio. You are welcome to modify the themes for your own use. If you have any suggestions for more themes then please contact us.

Run-Time

You may have to adjust the supplied ‘msls’ style sheets if you want to implement correct rendering of the header. see this article: Vs2013 LightSwitch HTML Themes – Headers

If you want to use other swatches other than ‘A’ then the ‘msls’ script needs a simple change to expose the setting.

Here are some of the themes in use:

Office Brown Themed Auto-Tile Menu

Office Azure Dark Theme

Orchard Theme

Orange Pastel Greens theme

VS2012C Theme

Blue Purple Dark Theme – Swatch-B

Office Blue Theme – Swatch-B

There are currently 19 themes and some 40 or so swatches to choose from. Go style you LightSwitch HTML Apps!

Plans

There are plans to add some themes for use with Office 365 and SharePoint on-line. We will fill out the pack of themes with a wider palette range and introduce some themes with background imagery (not strictly for low-power mobile devices). We will also release a theme previewer LightSwitch HTML application that is able to dynamical switch themes and allow you to browse theme preview images.

We will review the themes based on any feedback from users.

Screen Templates

We are open to the idea of providing advanced screen templates for all LightSwitch client types though the initial focus is on the MobileWeb client. We are currently working on new screen templates to expand this collection.

HTML Screen Templates

The screen shots that accompany the screen template blog posts make use of many of the themes contained in the Xpert360Lightning.HTMLThemes Visual Studio extension.

The LightSwitch client only has 3 basic default screen templates. This collection of templates is intended to provide screens with more functionality that require less manual changes to turn them into end product. The collection consists of:

Auto-Tile Menu Template

Browse Data Tabs Template

Tablet List and Details Template

Mobile List and Details Template

Cloud Business Apps in VS2013

Visual Studio 2013 introduces a new application type called a Cloud Business App. This brings together LightSwitch RAD platform and Office 365.

LightSwitch, launched in 2010, simplifies the creation of line of business forms over data apps using a visual designer to manage app metadata. The original version created Silverlight clients, but it now supports responsive HTML clients. You can extend with code, using JavaScript/C#/VB on the client or C#/VB in the service layer. For more advanced extension and integration, LightSwitch projects easily integrate with other technologies and frameworks (ASP.NET Web API, MVC 5, Angular.js ...).

The Cloud Business App template adds SharePoint and Office 365 into the mix. The ease of use is improving as better integration arrives as other components such as the Windows Azure SDK catch up.

Will 2014 be a big year for Cloud Business Apps? Building LOB applications on Microsoft’s platform is in some respects harder and more complex today than it was a decade ago, and looking ahead, Office 365 and Azure are a strategic platform for Microsoft. Simplifying LOB app development and deployment to support diverse devices is surely a winner.

AIDE 2013 for Visual Studio

AIDE 2013 is the market leading set of productivity power tools for Cloud Business and LightSwitch applications. The only supported way to clone, import/export, local backup/restore screens and code. Visualize hard-to-access metadata to complement working with the standard LightSwitch designers.

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“, “AIDE for LightSwitch“, “AIDE 2013 for Visual Studio” are trademarks of Xpert360 Ltd, copyright 2012 – 2014.

Advertisement

LightSwitch Screen Template – Mobile List and Details

Xpert360Lightning.WebExtensions

The Mobile List and Details screen template is part of a collection of advanced screen templates for Visual Studio LightSwitch HTML Client and Cloud Business Apps (see below).

Mobile List and Details generated from the template

The Xpert360Lightning,WebExtensions extension is bundled with AIDE 2013 for Visual Studio for now and is not available separately though this may change (see below for more information).

See the new Screen Templates in action >

Mobile List and Details Template

Design-Time

The template is accessible from the ‘Add New Screen’ dialog.

Add New Screen – Mobile List and Details

The default screen name is ‘ListDetails’ and the primary collection name is prepended. You select screen data as usual in the main dialog including the primary collection.

Design-Time Mobile List and Details screen

A useful list-based master and details screen template for mobile devices. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates independently scrolling list-view side-by-side with selected single-column entity details data. Extended touch and keyboard support.

Does not support child collections. Limits the number of master detail properties displayed for easier customization. As with all LightSwitch screens you are free to customize content and layout once generated.

Run-Time

The master details are displayed in one column and this works well provided not too much detail data is displayed.

Mobile List and Details in dark-green theme

If the detail data contains many properties you will notice that a manageable subset of is added to the screen contents. This will save time when dealing with entity-types with many tens or even hundreds of properties. Trying to display too many properties often makes little sense, is not a good user experience and slows down the LightSwitch screen designer.

We find this really helpful when connecting to data such as that in Dynamics CRM where tables are wide and complex. You will need to customize the subset of properties displayed but the overall experience is preferable to that provided by the standard templates.

Mobile List and Details in office-brown light theme

If you choose a parameter-driven custom query then the list will be a simple filterable collection. With appropriately designed custom queries this makes for easy generation of a searchable list view as your screen starting point.

Plans

There are no imminent plans to improve this template. We explored the idea of using more of the screen metadata and adding a template wizard. We will review this template later based on any feedback.

Screen Templates

We are open to the idea of providing advanced screen templates for all LightSwitch client types though the initial focus is on the MobileWeb client. We are currently working on new screen templates to expand this collection.

HTML Screen Templates

The LightSwitch client only has 3 basic default screen templates. This collection of templates is intended to provide screens with more functionality that require less manual changes to turn them into end product. The collection consists of:

Auto-Tile Menu Template

The screen generated from this template dynamically discovers all screens and creates a navigable menu. Functionality indicated by color-coding and icons. Ideal time-saver when used as your start screen during development or prototyping.

Browse Data Tabs Template

Similar to the in-built simple browse screen template but generating tabs based on multiple independent collections. Supports parameter-based queries to generate search pages. Choice of default collection views from tile view, list view and grid view. Implements tap-through navigation to entity type default screens or discovered view or maintenance screens.

Tablet List and Details Template

An essential list-based master and details screen template. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected dual-column entity details data. Extended keyboard support. Generates child collections in detail grids.  Implements tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Mobile List and Details Template

Must have list-based master and details screen template for mobile devices. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected single-column entity details data. Extended touch and keyboard support. Generates child collections in tabs. Implements tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Cloud Business Apps in VS2013

Visual Studio 2013 introduces a new application type called a Cloud Business App. This brings together LightSwitch RAD platform and Office 365.

LightSwitch, launched in 2010, simplifies the creation of line of business forms over data apps using a visual designer to manage app metadata. The original version created Silverlight clients, but it now supports responsive HTML clients. You can extend with code, using JavaScript/C#/VB on the client or C#/VB in the service layer. For more advanced extension and integration, LightSwitch projects easily integrate with other technologies and frameworks (ASP.NET Web API, MVC 5, Angular.js ...).

The Cloud Business App template adds SharePoint and Office 365 into the mix. The ease of use is improving as better integration arrives as other components such as the Windows Azure SDK catch up.

Will 2014 be a big year for Cloud Business Apps? Building LOB applications on Microsoft’s platform is in some respects harder and more complex today than it was a decade ago, and looking ahead, Office 365 and Azure are a strategic platform for Microsoft. Simplifying LOB app development and deployment to support diverse devices is surely a winner.

AIDE 2013 for Visual Studio

AIDE 2013 is the market leading set of productivity power tools for Cloud Business and LightSwitch applications. The only supported way to clone, import/export, local backup/restore screens and code. Visualize hard-to-access metadata to complement working with the standard LightSwitch designers.

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“, “AIDE for LightSwitch“, “AIDE 2013 for Visual Studio” are trademarks of Xpert360 Ltd, copyright 2012 – 2014.

LightSwitch Screen Template – Tablet List and Details

Xpert360Lightning.WebExtensions

The Tablet List and Details HTML screen template is part of a collection of advanced screen templates for Visual Studio LightSwitch HTML Client and Cloud Business Apps (see below).

New Screens in VS2012C Theme

The Xpert360Lightning,WebExtensions extension is bundled with AIDE 2013 for Visual Studio for now and is not available separately though this may change (see below for more information).

See the new Screen Templates in action >

Tablet List and Details Template

The purpose of this template is to provide a means of generating a List and Details screen for larger form factor devices such as tablets or desktops. The generated screens are similar to those created using the Rich-Client List and Details template (Silverlight client).

You can create screens like this manually starting with the simple default Browse Data template however this new template will save you a considerable amount of time and provide consistent results.

Design-Time

The template is accessible from the ‘Add New Screen’ dialog like below:

Add New Screen – Tablet List and Details

The default screen name is ‘ListDetails’ and the primary collection name is prepended. You select screen data as usual in the main dialog including the primary collection and optionally the primary entity-type details and related child collections.

Design-Time Tablet List Details Generated Screen

This screen style is useful for generating a list of master records and displaying them side-by-side with the selected master detail record and a collection of related child data.

The screen is generated with one tab. If you choose more than one child collection then you may wish to customize the screen and move some collections to additional screen tabs especially if they contain lots of data.

Run-Time

The child collections are generated as grid views but as with all LightSwitch screens you are free to customize it once generated. The master details are displayed in two columns to make better use of space.

Tablet List and Details Screen in Orchard Theme

If any details data contains many properties you will notice that a manageable subset of is added to the screen contents. This will save time when dealing with entity-types with many tens or even hundreds of properties. Trying to display too many properties often makes little sense, is not a good user experience and slows down the LightSwitch screen designer.

We find this really helpful when connecting to data such as that in Dynamics CRM where tables are wide and complex. You will need to customize the subset of properties displayed but the overall experience is preferable to that provided by the standard templates.

Tablet List Details with enterable Custom Query Filters

If you choose a parameter-driven custom query then the list will be a simple filterable collection. With appropriately designed custom queries this makes for easy generation of a searchable list view as your screen starting point.

You can switch the master data list-view to a tile-view if you prefer, as shown here:

Tablet List and Details switched to Tile View

The template will automatically configure item-tap navigation if you have pre-selected any default screens for a child entity-types. The drill-through navigation to details screens is wired-up and displays modal-dialogs or launches the SPA detail screens.

The template looks after the screen content metadata to configure scrolling regions. So when you scroll through the master data list the selected details stay in view.

Tablet List Details Independent Scrollable Regions

There you have it, a ubiquitous List and Details HTML screen template that gives you a better starting point. A nice productivity boost that we like lots!

Plans

There are plans to improve this template. We explored the idea of using a template wizard as in an advanced configuration mode to choose the view types (list, tile, table) and placement (main tab, child tab, pop-up dialog). We have experimented with generating more code to display child collection record counts.

We will take into consideration all feedback along with these ideas.

Screen Templates

We are open to the idea of providing advanced screen templates for all existing and future LightSwitch client types though the initial focus is on the Mobile-Web client. We are currently working on new screen templates to expand this collection.

HTML Screen Templates

The LightSwitch client only has 3 basic default screen templates. This collection of templates is intended to provide screens with more functionality that require less manual changes to turn them into end product. The collection consists of:

Auto-Tile Menu Template

The screen generated from this template dynamically discovers all screens and creates a navigable menu. Functionality indicated by color-coding and icons. Ideal time-saver when used as your start screen during development or prototyping.

Browse Tabs Template

Similar to the in-built simple browse screen template but generating tabs based on multiple independent collections. Supports parameter-based queries to generate search pages. Choice of default collection views from tile view, list view and grid view. Implements tap-through navigation to entity type default screens or discovered view or maintenance screens.

Tablet List and Details Template

An essential list-based master and details screen template. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected dual-column entity details data. Extended keyboard support. Generates child collections in detail grids.  Implements tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Mobile List and Details Template

Useful list-based master and details screen template. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected single-column entity details data. Extended touch and keyboard support. Generates child collections in tabs. Implements tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Cloud Business Apps in VS2013

Visual Studio 2013 introduces a new application type called a Cloud Business App. This brings together LightSwitch RAD platform and Office 365.

LightSwitch, launched in 2010, simplifies the creation of line of business forms over data apps using a visual designer to manage app metadata. The original version created Silverlight clients, but it now supports responsive HTML clients. You can extend with code, using JavaScript/C#/VB on the client or C#/VB in the service layer. For more advanced extension and integration, LightSwitch projects easily integrate with other technologies and frameworks (ASP.NET Web API, MVC 5, Angular.js ...).

The Cloud Business App template adds SharePoint and Office 365 into the mix. The ease of use is improving as better integration arrives as other components such as the Windows Azure SDK catch up.

Will 2014 be a big year for Cloud Business Apps? Building LOB applications on Microsoft’s platform is in some respects harder and more complex today than it was a decade ago, and looking ahead, Office 365 and Azure are a strategic platform for Microsoft. Simplifying LOB app development and deployment to support diverse devices is surely a winner.

AIDE 2013 for Visual Studio

AIDE 2013 is the market leading set of productivity power tools for Cloud Business and LightSwitch applications. The only supported way to clone, import/export, local backup/restore screens and code. Visualize hard-to-access metadata to complement working with the standard LightSwitch designers.

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“, “AIDE for LightSwitch“, “AIDE 2013 for Visual Studio” are trademarks of Xpert360 Ltd, copyright 2012 – 2014.

LightSwitch Screen Template – Browse Data Tabs

Xpert360Lightning.WebExtensions

The HTML Browse Tabs screen template is part of a collection of advanced screen templates for Visual Studio LightSwitch HTML Client and Cloud Business Apps (see below).

New Screens in Office Azure Dark Theme

The Xpert360Lightning,WebExtensions extension is bundled with AIDE 2013 for Visual Studio for now and is not available separately though this may change (see below for more information).

See the new Screen Templates in action >

Browse Data Tabs Screen Template

The purpose of this template is to provide a means of generating a browse screen showing multiple collections of data in separate tabs. This style of screen is useful as a hub screen for navigation. During development, especially when prototyping, this screen allows you to build hubs with automatically configured tap-through navigation links. Whether used in prototyping or the final app using screens generated from this template will save you substantial time over using the standard templates.

Design-Time

The template is accessible from the ‘Add New Screen’ dialog.

Design-Time Screen generated from BrowseDataTabs
Template

The default screen name is ‘BrowseDataTabs’. There is no need to select screen data in the main dialog as the template has its own template wizard dialog to choose data collections and configure the screen options.

Select data in Browse Data Tabs template wizard

Generate screens as navigation hubs with automatically configured item-tap handlers to default screens or auto-discovered view or maintenance screens.

Add New Screen – BrowseDataTabs

The screen is generated with one tab for each selected entity-set collection. If you choose a parameter-driven custom query then the tab will be a simple filterable collection. With appropriately designed custom queries this makes for easy generation of searchable list, tile and grid views that are working straight after generation. Screens generated using the standard Browse Data template require manual customization before working.

If you choose any option for item-tap navigation then the navigation through to other screens will be pre-configured for you. This works best if the ‘View’ and ‘AddAndEdit’ style screens are created beforehand. You can pre-select a default screen for any entity-type to pre-determine the navigation links when there is more than one possible screen to display an entity-type.

Your choice of collection views is generated so if you prefer to generally use a tile-view or grid-view then choose that. The standard template is only a list-view. As with all LightSwitch screens you are free to customize it once generated.

The supporting JavaScript code is generated for you where appropriate.

Run-Time

The screen displays the browsable data tabs with query filters where appropriate. A typical screen will look like this:

Sample Browse Data Tabs Screen with grid-view

The drill-through navigation to details screens is automatically wired-up and works be they modal-dialogs or SPA window-based screens.

Browse Data Tabs with Navigation

The collection views can be easily adjusted to list, tile or grid after the screen is generated.

Browse Data Tabs grid-view sporting Office Blue theme

Any tabs for filterable custom queries will be generated with enterable filter parameters to start you off with a simple working search/filterable collection.

Browse Data Tab with Filterable Query

There you have it, a Browse Data Tabs screen template that generates useful hub-style navigation screens, saving you oodles of time.

Plans

There are plans to improve this template. We explored the idea of using an advanced configuration mode to choose the view type per data tab/collection. We are considering introducing more views to the existing three.

We will review this template taking into account any feedback.

Screen Templates

We are open to the idea of providing advanced screen templates for all LightSwitch client types though the initial focus is on the MobileWeb client. We are currently working on new screen templates to expand this collection.

HTML Screen Templates

The LightSwitch client only has 3 basic default screen templates. This collection of templates is intended to provide screens with more functionality that require less manual changes to turn them into end product. The collection consists of:

Auto-Tile Menu Template

The screen generated from this template dynamically discovers all screens and creates a navigable menu. Functionality indicated by color-coding and icons. Ideal time-saver when used as your start screen during development or prototyping.

Browse Tabs Template

Similar to the in-built simple browse screen template but generating tabs based on multiple independent collections. Supports parameter-based queries to generate search pages. Choice of default collection views from tile view, list view and grid view. Implements tap-through navigation to entity type default screens or discovered view or maintenance screens.

Tablet List and Details Template

An essential a list-based master and details screen template to boost productivity. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected dual-column entity details data. Extended touch and keyboard support. Child collections in detail grids.  Automatic tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Mobile List and Details Template

Useful list-based master and details screen template for mobile devices. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected single-column entity details data. Extended touch and keyboard support. Generates child collections in tabs. Automatically configures tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Cloud Business Apps in VS2013

Visual Studio 2013 introduces a new application type called a Cloud Business App. This brings together LightSwitch RAD platform and Office 365.

LightSwitch, launched in 2010, simplifies the creation of line of business forms over data apps using a visual designer to manage app metadata. The original version created Silverlight clients, but it now supports responsive HTML clients. You can extend with code, using JavaScript/C#/VB on the client or C#/VB in the service layer. For more advanced extension and integration, LightSwitch projects easily integrate with other technologies and frameworks (ASP.NET Web API, MVC 5, Angular.js ...).

The Cloud Business App template adds SharePoint and Office 365 into the mix. The ease of use is improving as better integration arrives as other components such as the Windows Azure SDK catch up.

Will 2014 be a big year for Cloud Business Apps? Building LOB applications on Microsoft’s platform is in some respects harder and more complex today than it was a decade ago, and looking ahead, Office 365 and Azure are a strategic platform for Microsoft. Simplifying LOB app development and deployment to support diverse devices is surely a winner.

AIDE 2013 for Visual Studio

AIDE 2013 is the market leading set of productivity power tools for Cloud Business and LightSwitch applications. The only supported way to clone, import/export, local backup/restore screens and code. Visualize hard-to-access metadata to complement working with the standard LightSwitch designers.

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“, “AIDE for LightSwitch“, “AIDE 2013 for Visual Studio” are trademarks of Xpert360 Ltd, copyright 2012 – 2014.

LightSwitch Screen Template – Auto-Tile Menu

Xpert360Lightning.WebExtensions

The Auto-Tile Menu screen template is part of a collection of advanced screen templates for Visual Studio LightSwitch HTML Client and Cloud Business Apps (see below).

Auto-Tile Menu Screen in Orange Pastel theme

The Xpert360Lightning,WebExtensions extension is bundled with AIDE 2013 for Visual Studio for now and is not available separately though this may change (see below for more information).

See the new Screen Templates in action >

Auto-Tile Menu Screen Template

The purpose of this template is to provide a dynamic start menu for project development time. During development, especially when prototyping, this screen allows you to navigate to all screens in the app without continually having to manually configure navigation for browse-type screens. It may surprise you how much time you can save using this temporary starting page.

Design-Time

The template is accessible from the ‘Add New Screen’ dialog.

Add New Screen: Auto-Tile Menu

The default screen name is ‘AutoTileMenu’. There is no need to select screen data as this screen is generic. Add one instance per HTML client project and set your new menu screen as the start-up screen whenever you need it.

Design-Time Auto-Tile Menu Screen in LightSwitch

The screen is very simple and really only contains a custom control as the heavy-lifting is performed in the control’s render event. The supporting JavaScript code is generated for you. You are welcome to view the code and derive other screens from it if you wish. If you have any suggestions for more general improvement then please contact us.

Run-Time

The screen discovers all the screens available in the client app and creates a data collection based on what it finds. A tile is created for each screen and displayed in a familiar tile view that looks like this:

Office Brown Themed Auto-Tile Menu

The tiles are color-coded, have different icons and display the screen display name and the name of the first entity screen property.

Auto-Tile Menu Color-Coded Entity Types – Contractor

The JavaScript code dynamically allocates a color to each entity type so tiles with the same color are related by the first entity type property discovered in the screens. The color allocated to an entity type will change as you change the app’s screens. The above example shows all screens based on ‘Contractor’ entity colored purple.

Each tile has one of three icons allocated to it based upon whether the primary screen property is an entity-set, entity-type or no/scalar property.

Icons for Auto-Tile Menu – Collections

The above example highlights all the screens whose primary screen property is a collection (entity-set). These screens typically can be launched and function well without any parameters (but not always).

The tiles have a click event handler for tap-to-navigate and navigate to the appropriate screen.

Plans

There are no imminent plans to improve this template. We explored the idea of using more of the screen metadata and local storage to add more features. We looked at supporting screen parameters too but opted to keep the screen simpler for now. We will review this template later based on any feedback.

Screen Templates

We are open to the idea of providing advanced screen templates for all LightSwitch client types though the initial focus is on the MobileWeb client. We are currently working on new screen templates to expand this collection.

HTML Screen Templates

The LightSwitch client only has 3 basic default screen templates. This collection of templates is intended to provide screens with more functionality that require less manual changes to turn them into end product. The collection consists of:

Auto-Tile Menu Template

The screen generated from this template dynamically discovers all screens and creates a navigable menu. Functionality indicated by color-coding and icons. Ideal time-saver when used as your start screen during development or prototyping.

Browse Data Tabs Template

Similar to the in-built simple browse screen template but generating tabs based on multiple independent collections. Supports parameter-based queries to generate search pages. Choice of default collection views from tile view, list view and grid view. Implements tap-through navigation to entity type default screens or discovered view or maintenance screens.

Tablet List and Details Template

An essentially list-based master and details screen template. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected dual-column entity details data. Extended keyboard support. Generates child collections in detail grids.  Implements tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Mobile List and Details Template

Must have list-based master and details screen template for mobile devices. A cross between the in-built simple browse screen template and the Rich-Client based List and Details screen template. Generates an independently scrolling list view side-by-side with selected single-column entity details data. Extended touch and keyboard support. Generates child collections in tabs. Implements tap-through navigation to entity type default screens. Limits the number of master details and child details properties displayed for easier customization.

Cloud Business Apps in VS2013

Visual Studio 2013 introduces a new application type called a Cloud Business App. This brings together LightSwitch RAD platform and Office 365.

LightSwitch, launched in 2010, simplifies the creation of line of business forms over data apps using a visual designer to manage app metadata. The original version created Silverlight clients, but it now supports responsive HTML clients. You can extend with code, using JavaScript/C#/VB on the client or C#/VB in the service layer. For more advanced extension and integration, LightSwitch projects easily integrate with other technologies and frameworks (ASP.NET Web API, MVC 5, Angular.js ...).

The Cloud Business App template adds SharePoint and Office 365 into the mix. The ease of use is improving as better integration arrives as other components such as the Windows Azure SDK catch up.

Will 2014 be a big year for Cloud Business Apps? Building LOB applications on Microsoft’s platform is in some respects harder and more complex today than it was a decade ago, and looking ahead, Office 365 and Azure are a strategic platform for Microsoft. Simplifying LOB app development and deployment to support diverse devices is surely a winner.

AIDE 2013 for Visual Studio

AIDE 2013 is the market leading set of productivity power tools for Cloud Business and LightSwitch applications. The only supported way to clone, import/export, local backup/restore screens and code. Visualize hard-to-access metadata to complement working with the standard LightSwitch designers.

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“, “AIDE for LightSwitch“, “AIDE 2013 for Visual Studio” are trademarks of Xpert360 Ltd, copyright 2012 – 2014.

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.

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.

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.

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

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

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

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 app in VS2012 Color Theme

VS2013 LightSwitch app in Dark Blue theme

The theme pack contains a total of eight themes.

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!

LightSwitch HTML Client Preview – Getting started

Live from TechEd Europe 2012 in Amsterdam, Jason Zander announced that the LightSwitch HTML Client Preview will be available 26-June-2012 10am PST for MSDN subscribers. Then available publicly on 28-June-2012. The LightSwitch Developer Center Team Blog and forums provide more details.

MSDN_Downloads – Exe and 3 x RAR

LightSwitch HTML Client installation

The download unzips to a VHD with a Windows 8 image and the Visual Studio 2012 RC with HTML Client is pre-installed.

Hyper-V Instructions for Windows 8

The ‘ContosoMove‘ sample application is located under the documents of the ‘TestUser‘ account. We enabled Hyper-V in Windows 8 and created a new VM using the supplied VHD.

Unzipping the VHD

The VHD is ready for use

Adding a New Client

A MobileWeb HTML Client in the VS LightSwitch designer

There can be one RichClient Desktop client and one or more MobileWeb clients added to the LightSwitch projects. The most notable difference in the IDE is the way navigation is configured and the screen snapshot above shows the screen content items have actions in the property window.

So the sample screens are running and there is plenty of testing to do.

MobileWeb Details Page – from View Details template

Lightning Series for Dynamics CRM Online released

This week saw the release of the first Lightning Series product aimed at bringing together two of the latest Microsoft product offerings. We are not the only ones expecting to see a surge in uptake of LightSwitch and Dynamics CRM over the next 18 months. Add to that Office365, the rollout of Windows 8 and the next version of Visual Studio. The Lightning Series products will be addressing the integration and productivity needs of this market space.

The products are professionally developed commercial software with support contracts available. The difference is the commitment of Xpert360 to deliver FREE product licenses for everyone. This policy will continue provided that there is enough interest from the communities and enough revenue is raised from add-on work and custom versions for Enterprise use. The more people use the Lightning Series products, the better they will get and everyone will benefit.

We develop and use code generation technology rather than purely develop the actual products themselves. This helps us to drive down development costs and is allowing us to transition these activites to the cloud and SaaS over the next year.

If the demand is there then the next release of the Dynamics CRM adapter, expected by the end of April 2012, will support both on-premise and online, federated security and more…

The next Lightning Series LightSwitch Data Source to be released will support salesforce. We decided that because we generate revenue in that area and use the adapters ourselves. After that we will be looking for feedback to gauge the demand to release other data adapters for the likes of HubSpot, nimble and SUGARCRM. The series will also include other custom controls and productivity tools aimed at supporting LightSwitch in the VS11 Beta and beyond and making the platform more appealing to professional developers.

For more information visit the Xpert360 Support and Forums and follow this blog to see how the story unfolds.

• Further details: XPERT360 LIGHTNING SERIES
• Getting started: QUICK START GUIDE
• Working with Salesforce and Dynamics CRM in VS11
• Using Salesforce and Dynamics CRM with LightSwitch
• Visual Studio Gallery: View and Download

Visual Studio Gallery entry

T-SQL Stored Procedures – who needs them?

The answer to this question may seem obvious – for a secure, well-performing application, of course we all need them!

But what about all those great legacy applications that are littered with embedded SQL? What if we are asked to bring these into the brave new world of rich interfaces and mobile apps (plus those still glued to your traditional PC)? I have seen plenty of applications with MSAccess and MySQL back-ends. When scaling these up, do we really have to create a plethora of stored procedures when all that embedded SQL blinks winningly up at us to be used as-is? This question can be equally posed for a new application, where developers with SQL experience but lacking the know-how to use stored procedures, gamely rush into creating the SQL while coding. And what about dynamic SQL? How do we deal with that?

OK, so let’s rewind… we know that stored procedures bring enormous benefits:

1. Increased performance – the SQL is pre-compiled, unlike embedded or dynamic SQL
2. More secure – execute access given to the stored procedures only – direct access to tables and views are denied.
3. Better separation – the database access is contained within one layer, rather than scattered throughout the application UI code.
4. Easier maintenance – wholesale change is easier to apply to a number of stored procedures rather than searching through reams of application code.
5. Easier performance tuning – with the separation described above, it is easier to examine the performance of a stored procedure in isolation from UI code and fine-tune it as necessary.
6. Easier testing – stored procedures expose an additional area of testing thereby catching bugs in a more timely manner.

And the drawbacks?

The main drawback is the increased development time and the increased skill required to build the queries (but is this a bad thing for your important application?).

As for dynamic SQL – there certainly are situations where we may want this, e.g. building a complex filter from the UI, which don’t fit the pattern of simple parameters for stored procedures.  But we can still ensure the database access is encapsulated within the stored procedure by parsing strings or using data (e.g. in table variables) and I would argue this is best practice.

So it looks like we should always aim to build our data access layer using stored procedures. But what about those drawbacks?

OK, it’s time to get real – stored procedures are not complicated – In fact they are just the same as your embedded SQL but embedded in a server-side procedure instead. That means there’s more code to write. In fact quite a lot more code as we can add auditing, error handling and security checking, amongst other very useful things. And we need a version for each CRUD action.

But, after having written many stored procedures it becomes apparent that there is an enormous amount of repetition. In fact stored procedures settle into a very definite and predictable pattern which is pretty irritating if you have to code them individually from scratch, so much so that you’d think you were missing a trick. And you would be, because let’s face it, you can generate the procedures directly from the underlying data model (i.e. the table definitions and the relationships).

In fact there is often code to generate dynamic SQL from the underlying schema within applications. The leap is to change this dynamic code such that it generates the stored procedures as part of the overall development process.

Future reading:

The stored procedure CRUD pattern laid bare (Coming Soon!)

Other (more) entertaining musings on generating stored procedures