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.

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

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

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

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

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

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.

Something you should know about LightSwitch Screens – Part 1

Hidden secrets of LightSwitch Screen Contents!

So you think you know your screens, what is the point of this post? No, seriously, look again real close. Notice anything… odd, out of place, you should. Test your powers of observation and be more inquisitive. Do you have a LightSwitch Rich Client application? If 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!

Let us start by looking at a Contoso based LightSwitch application. Here it is looking rather fetching in its Jetpack-style theme.

Contoso Home Screen – Jetpack Theme

Could this simple screen be hiding any secrets? You would think not. Hats off to you if you do know the hidden secret behind this home screen. Here it is again in screen designer.

Design view of Contoso Home Screen

Look closer. No, the secret is not the globalised labels. In fact we cannot see the hidden secret in the above screen shot. We need to take a different view.

LightSwitch Screen Workbench -Contoso Home Screen Content

If you use AIDE for LightSwitch Explorer or Screen Workbench you can obtain a list of the screen contents. In the above example I have exported the list to Excel and marked up the content for easier viewing.

Look closely at the screen content items and match them up with the designer view. Hidden underneath the RowTemplate item we have 15 other items that correspond to the properties of the Appointment entity.

These screen items are expected, they seem kind of plausible, they are necessary to the functioning of the screen. Is any of this statement correct? Err… No! Take a look at this modified set of screen contents taken from AIDE Screen Workbench.

Contoso Home Screen Content Optimised

With these screen contents the resulting Home screen appearance is the same as before. Really it is, it works fine. It did not need the hidden items. I use the LightSwitch Exchange Hub for quick backup and restore and in this case it shows the real size difference in the Home screen metadata.

Exchange Hub Home Screen change detectedand backed-up

Then looking at the before and after Home screen metadata backup-ups.

Backup Home Screen metadata size

So this simple Home screen’s metadata has shrunk from 19KB to 11KB. You may be asking yourself, did I edit the Client.lsml file, well did I?

Until next time…

[continue to Part #2]

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.

Backup – AIDE for LightSwitch Exchange Hub

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.

Exchange Hub in Xpert360 Lightning AIDE V1.1 Release

The original and genuine Power Tools for Visual Studio LightSwitch!

The Exchange Hub is a feature new to AIDE for LightSwitch V1.1. This release of the power tools is being packaged as I write. The upgrade is free to existing users who will be contacted in the coming days. The next version targets VS2013 and we are pleased to announce that our loyal customers will also receive this at no additional cost (subject to license purchased by end of September 2013). In this post we will demonstrate the features and usage of backup.

AIDE for LightSwitch is supplied as a signed Visual Studio Extension. The AIDE software is integrated into the Visual Studio IDE as standard and familiar dockable windows. It now supports VS2012 themes: light, dark and blue.

New AIDE for LightSwitch Menu

All the AIDE windows including the Exchange Hub can be accessed from the ‘Tools’ menu (also from ‘View’ menu ‘Other Windows’ by default).

Upon first launch you will need to dock the Exchange Hub window in a suitable location in the Visual Studio IDE.

Using AIDE to detect screen changes

The Backup tab manages screen backups and detects modifications made since the last backup. To take a backup you simply need to select all items using the top checkbox and click on Backup. The Exchange Hub looks after all the behind the scenes work and only backs up screens that have been modified. It skips past screens not changed since the last backup.

Exchange Hub backup run – dark theme

The backup runs are very fast and take less than a second for this Contoso application. In this screen shot, the Exchange Hub detected changes to the screens highlighted in green and backed them up. I popped-up the VS2012 output pane so that you can see the logged details of the backup. Information is  logged here from all corners of AIDE for LightSwitch.

Screen backups are stored one per file, very similar to the new metadata storage structure coming in Visual Studio 2013.

The in-built Restore feature allows for screens to be modified and rolled-back if you want to discard changes made since the last backup. The Exchange Hub does keep multiple backups.

Under the covers here is the additional folder structure automatically created and managed by the Exchange Hub.

Backup folder structure

You don’t need to look here in normal day-to-day usage. The ‘_AIDE‘ folder stores all the files necessary. There are further sub-folders, ‘_Client‘ and ‘_HTMLClient‘, one for each LightSwitch client, that hold backup files.

The source code control folders can be added to TFS or similar to track changes to individual screens, not the larger full ‘Client.lsml‘ metadata file. This is unique to VS2012. The ‘Export‘ folder is the default location for the Export and Import features that will be demonstrated in later blog articles.

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 base in the UK.

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

LightSwitch Data Freedom – Part 5

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.

Intrinsic, or not Intrinsic, that is was the question!

…or at least it has been since LightSwitch launched. Do you connect to an external data source or use an intrinsic database? With more options arriving and techniques advancing for LightSwitch, is this becoming a none-problem?

We certainly like doing database design in LightSwitch for mock-ups, proof-of-concept or prototype applications. We also like LightSwitch for developing demonstrations, POC’s and prototypes.

If only we could transfer LightSwitch assets (screens, entities queries) between projects. Never mind data mash-ups, let’s have some application mash-ups!

• Import pre-built screens samples
• Compose applications from your prototypes
• Backup, copy and restore screens
• Compare projects

In this article we will demonstrate the following, some for the first time publically:

1. Create a HTML5 client with Intrinsic database
2. Create the application screens
3. Deploy the application to IIS and database to SQL Server
4. Export the LightSwitch screens
5. Create a HTML5 client with external data source
6. Import the LightSwitch screens

At the end we will have a fully working copy of our LightSwitch HTML application working against the previously deployed database in SQL Server.

This walkthrough has been certified as code-free and no-lsml-hacking.

What really surprised us is that this demonstration can probably be completed in under 20 minutes. It could be squeezed into a 10 minute Lightning talk I suppose, that would be a mad demo! You could include SQL Azure and SharePoint on-line too comfortably in a 30 minute slot. That is also a scary thought. Well, it is LightSwitch after all 🙂

I created a new LightSwitch HTML C# project, then I chose to add the usual Contact, Product, Order and OrderLine tables into the LightSwitch entity designer. Add a few relationships, nice simple database design.

Sample AppIntrinsic Order Entity in designer and Entity Workbench

Then I created a home screen with tabs for Orders, Contacts and Products. Then I wired-up the TileView tap actions to AddAndEdit default screens. Then add a tab to the Order detail screen to handle multiple order lines. Job done!

Home Screen in Screen Workbench and LightSwitch designer

I added command buttons to add new contacts, products, orders, order lines and substituted the default ‘star’ by the in-built ‘add’ icon. F5 ->

It works! No real surprises so far.

Ok, I swapped out the default logo and splash screen images, I promise, that was all. Then I used the HTML screens to add some test data into the local database.

AppIntrinsic with AddEditOrder

The application is so good that it now passes QA and gets promoted. With that it is expedited for deployment.

Publish the LightSwitch HTML application

Now we have a SQL database appropriately named AppTest.

AppTest Deployed Database in SQL Server

And the deployed application is now accessible in IIS on the localhost.

Deployed application – spot the difference?

I entered some new sample data as the new SQL Server database was not surprisingly empty. The different data helps to show the different databases.

Deployed App AddEditOrder

This post is longer then I expected, but hold on in there for the juicy bits.

We use AIDE for LightSwitch Exchange Hub for exporting the screens. It extracts the screen XML from the client.lsml file and outputs them in VS2013 LightSwitch Preview compatible format.

Exported Screen LSML Files – VS2013 compatible

Five screens with nowhere to go, yet.

I created another new LightSwitch HTML Client C# project and then navigated over to the Attach Data Source Wizard.

Attach Data Source Wizard – Update

So now we have data. It is the external database in the local SQL Server that we previously deployed.

We have no screens. Now let us import the HTML client screens into our new project using the preview of AIDE for LightSwitch Exchange Hub.

AIDE for LightSwitch Exchange Hub – Imported

So now we have an external data source and the five imported screens…

LightSwitch Application with External Database

Unfortunately, the project will not build 😦

But wait, it is not the end of the world. The screens expected ‘Date’ whereas the imported external data source by default has them as ‘DateTime’ – fixed. The product entity had a ‘Money’ column which by default comes in as ‘Decimal’ – fixed. There, a few manual tweaks to that external data source in the LightSwitch designer and it builds!

The Import/Export Entities and Entity Properties will address that in a forthcoming release of AIDE for LightSwitch.

Application with External Database after importing screens

So we now have not one but two beautifully crafted twin LightSwitch HTML applications.

That concludes Path #1 – Export/Import facility to transfer assets between LightSwitch projects.

Conclusions

In all seriousness, this is meant to be a gentle introduction to manipulating LightSwitch data sources and opening our minds to the concept of transferring LightSwitch assets between projects.

If you have worked with LightSwitch for sometime you will have adjusted your thinking and mindset to working without features readily available in other Visual Studio project types.

Now is the time to switch you thoughts to embrace the possibilities allowed to you by the AIDE for LightSwitch power tools. You will have to change, but change is good!

in this series…

NEXT UP:

LightSwitch Data Freedom – Part 6: Switch data source by modifying project LSML

or

LightSwitch Data Freedom – Part 6: Intrinsic database, make mine a 6GB one!

PREVIOUSLY:

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

LightSwitch Data Freedom – Part 2: Walkthrough shaping your data

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

LightSwitch Data Freedom – Part 4: Intrinsic, or not Intrinsic, that is was the question!

LightSwitch Data Freedom – Part 4

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.

Intrinsic, or not Intrinsic, that is the question!

…or at least it has been since LightSwitch launched. Do you connect to an external data source or use an intrinsic database?

On the one-hand, designing your database in LightSwitch is quick and convenient, LightSwitch looks after the database upgrades on deployment.

On the other hand, more fully featured database support, perhaps by design, perhaps to support other systems, perhaps for corporate policy.

We certainly like doing database design in LightSwitch for mock-ups, proof-of-concept or prototype applications. If business and technical requirements allow, that may be the end of the intrinsic/external discussion.

With Visual Studio 2013 Preview, LightSwitch projects now come with a database project option. This will change the balance of the decision criteria for the intrinsic/external debate. True, you could achieve similar before but it was more manual and time-consuming. See:

o – Intrinsic Database Management with Database Projects (Chris Rummel)

o – MSDN: Managing the Intrinsic Database for LightSwitch

o – Adding Stored Procs to your LightSwitch Intrinsic Database

This is a good step forward and extends the continued use of the Intrinsic database to more scenarios. But what if this is still not enough? Can you have the convenience of an Intrinsic database for the earlier part of a project and switch to external data source later.

In reality, standard LightSwitch is not going to handle this well. You are almost better off rebuilding your project from scratch, as that is what LightSwitch will force you to do. If you do this at the end of an early prototype project or proof-of-concept stage, it may be an unwanted be achievable step.

An alternative is to stick to using an Intrinsic database and manually reapplying schema changes to it to match any schema changes in the external database. If managed properly, it is a workable solution. Then you stop using LightSwitch to push schema changes out during application deployment.

We have tried two different paths that can delay moving to an external database to much later in a project’s cycle. The main point is to avoid any potentially large volume of rework to make the process quick and safe, if you choose to do so.

Another scenario not covered is in this forum post:

o – MSDN Forum: External Database vs Intrinsic Database

In there is a frequent need to run the LightSwitch application in Visual Studio debug mode against a multi-gigabyte copy of a production database. The logistics of data transfers mean that it is not feasible to move the data into the default intrinsic database. You just want to point the LightSwitch project at the existing restored database instance for debugging.

Path #1 – Export/Import facility to transfer assets between LightSwitch projects

Path #2 – Modify the project LSML to convert the Intrinsic data source to external

The second path sounds scary, and the first path sounds scary but is a bit more palatable. You will be trying this on backup copies of your systems first, right? In reality both techniques are of use in real world scenarios.

Conclusion

That sets the scene for manipulating the data source type in the next blog posts in this series…

NEXT UP:

LightSwitch Data Freedom – Part 5: Intrinsic, or not Intrinsic, that is was the question!

PREVIOUSLY:

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

LightSwitch Data Freedom – Part 2: Walkthrough shaping your data

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