VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Theme Headers

New Screens in Office Azure Dark Theme

Some sample screens with standard jQuery header formatting.

Headers, Footers and Toolbars

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

Auto-Tile Menu Default Light theme

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

LightSwitch HTML Client Orchard theme drag and drop list items

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

msls-header.ui-bar background styles

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

background: inherit;

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

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

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

Conclusions

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

ooo

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

ooo

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

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

Advertisement

Guide to VS2013 LightSwitch HTML Themes

Guide to VS2013 LightSwitch HTML Client Themes

LightSwitch HTML Themes, tweaks and Tools

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

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications. Brought to you by the original and genuine Power Tools for Visual Studio LightSwitch!

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

Headers, Footers and Toolbars

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

VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Client Orchard theme drag and drop list items

Selection List and Options

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

Styled LightSwitch HTML Choice List

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

Rounded Corners

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

Clipped text and rounded corners

The screen shots above show the adjusted rounded corner support.

Previewing LightSwitch Themes

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

Swatches

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

Cloud Business Apps and Site Chrome

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

Mega-Theme Pack

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

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

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

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

Conclusions

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

ooo

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

ooo

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

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

News on Software Previews for Visual Studio 2013 LightSwitch

Preparations for the Launch of VS2013

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

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

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications. Brought to you by the original and genuine Power Tools for Visual Studio LightSwitch!

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

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

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

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

VS2012 VS2013 LightSwitch family photo!

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

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

LightSwitch HTML Mobile Salesforce app in Office 365

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

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

LightSwitch HTML Client Orchard theme drag and drop list items

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

AIDE for LightSwitch Exchange Hub in VS2013 RC

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

AIDE for LightSwitch Explorer in VS2013 RC

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

AIDE for LightSwitch Entity Workbench – Related items/screens

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

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

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

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

Conclusions

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

ooo

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

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

Specify Ports after Upgrading LightSwitch HTML Clients to VS2013

Specify Ports after Upgrading LightSwitch Clients to VS2013!

When upgrading LightSwitch applications to Visual Studio 2013 you will have a smoother experience if you heed the advice in this article…

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!

I planned to upgrade a LightSwitch HTML client application from VS2012 to VS2013 RC. After the upgrade I would be running the two versions of the project side by side to test and compare.

I also wanted to try some new VS2013 features and work through implementing some “Drag and Drop with LightSwitch HTML Client” as described by Rohit Agrawal on the Visual Studio LightSwitch Team Blog. Go read the post if you have not yet done so.

LightSwitch HTML Client drag and drop

So here I create a standard View Details Screen for the Locations entity. I wired-up some views of the Tables entity and added the drag and drop code. Some more work to do, but as this is VS2012 and the new ‘.refresh‘ method is in VS2013 I upgraded a copy of the project.

The upgrade process took a minute and the project rebuild worked. The application runs fine, still a bit of work to do.

VS2013 LightSwitch HTML Client drag and drop

We can see that not surprising some of the styling changed and some customizations need attention. Now the Refresh button on the command bar works.

Then it started to go horribly wrong as the two Visual Studio projects conflicted and I found myself running the project in VS2013 debugger and debugging the VS2012 JavaScript!

Web Project Properties in the project file (.csproj)

I resolved the conflict by changing the Development Server Port and the port for the Web site in IIS Express. Then I continued testing side by side with no problems.

IIS Express Running Apps -VS2012/13

All is well here in IIS Express with the two projects running and being concurrently debugged.

Conclusions

This particular feature affects the Rich Client Silverlight clients and the HTML Mobile Client varieties. As we are often copying projects and switching between versions of Visual Studio this is the next step after upgrading and rebuilding a project.

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 2012 – 2013.

Where are my modal dialogs? (Visual Studio LightSwitch)

Visual Studio LightSwitch – Where are my modal dialogs?

The original and genuine Power Tools for Visual Studio LightSwitch!

The LightSwitch Explorer window is upgraded in AIDE V1.1 Preview. The next version of the LightSwitch power tools is being tested and here is a sneak preview which you can download.

AIDE Explorer View of LightSwitch Modal Dialogs

The LightSwitch Explorer window now has a view to show all LightSwitch modal dialog windows in a solution. There is no need to click through several layers of menus and designer commands to find modal dialogs, the information is served up in a convenient and easily digestible format. Navigate to LightSwitch Screen Designer from the modal dialog view with a simple double-click. It nicely complements the standard LightSwitch designer.

Surfacing all data in tabular format, can improve productivity, in particular, when working with medium to large LightSwitch projects.

ooo

There are many more features in design, development and testing. This past few weeks have been busy with the Visual Studio 2013 Preview and Michael Washington’s new E-Book released and ComponentOne providing an exclusive release of the ComponentOne Studio for LightSwitch HTML to the members of the LightSwitchHelpWebsite.com! For a member’s discount code offer you must register at LightSwitch Help Website , the main independent LightSwitch community website.

Try them, buy 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! Export/Import entities and screens, check. Entity Workbench, check. VS2013, check. How about a localization workbench? Optimization and analysis workbench? Mmm, we like that… Update which metadata fragments? That is a flavour of a few forthcoming features, we need to keep a few things secret to surprise you though!

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.

New Entity Workbench for LightSwitch

LightSwitch Entity Workbench in Xpert360 Lightning AIDE V1.1 Preview

The original and genuine Power Tools for Visual Studio LightSwitch!

The LightSwitch Entity Workbench is a new feature of AIDE V1.1 for LightSwitch. This next version of the power tools is being tested and we are going to show a sneak preview. There is a later version of this preview available to download. In this post we will outline the high-level features of the new workbench.

AIDE for LightSwitch is supplied as a signed Visual Studio Extension. Future releases will also move towards GitHub for easier distribution of upgrades.The AIDE software is integrated into the Visual Studio IDE as standard and familiar dockable windows. The LightSwitch Entity Workbench window can be accessed from the ‘View‘ menu ‘Other Windows‘ and upon first launch will display as below.

AIDE Entity Workbench for LightSwitch

The window can be dragged, docked and controlled just like any other Visual Studio IDE windows. You will have to experiment with the placement as everyone has their own configuration preferences. The Entity Workbench window brings all information for a selected entity into one place. There is no need to click through several layers of menus and designer commands to view fragmented data, it is served up in a convenient and easily digestible format. It nicely complements working in the standard LightSwitch Entity designer window.

It surfaces all the data in tabular format for easy reviewing. This improves productivity, in particular, when working with medium to large LightSwitch projects. The insights that this gives you make this not just an add-in but an essential development tool.

Workbench window sections:

• Entity properties and commonly used settings
• Related screen dependencies
• Choice lists groups and settings
• Custom properties and their settings
• Relationships to other entities
• Custom and in-built entity queries

The entity properties section enables you to view and compare settings with the need to click on individual column and then view in the properties window. The standard designer is unwieldy in this respect with wide tables.

Entity properties and settings

Here you can see instantly which columns are searchable, maximum lengths, maximum/minimum values and much more. This makes any process of checking settings and quality assurance a whole lot easier. You can sort the data by any column, rearrange the column order and export to the clipboard as standard. Using AIDE to export all entity data to Office documents is a big time saver for project documentation. The data views support clients of V2 and V3 flavors, and support multiple LightSwitch projects in a solution.The VS2012 Update 2 and preview of LightSwitch V4 in VS2013 deliver a new ‘related to’ feature in designers. Why wait? It is there now in AIDE for your V2 projects in the Related Screens section from where you can also launch the related screens in design mode.

Screen dependencies in AIDE Entity Workbench

Another time saver in the above screen capture is the display of choice lists. Normally, you would click on columns in screen designer and drill-through the standard properties windows just to view a choice list in a modal window.

We have singled out custom properties for special treatment. Custom property types include Money and PhoneNumber which AIDE helps to tame. A V1.1 enhancement to the LightSwitch Explorer window provides a solution-wide view of PhoneNumber format mask settings. Not normally easy to find at all! One view verifies whether all your phone number formats match.

AIDE Entity Workbench Custom Property settings

We have saved Updating LightSwitch metadata until this next version V1.1 as we had not completed the full cycle of testing in time for the first release. The much anticipated one-click Clone Screen feature did make the V1.0 and is being put to good use already. We anticipate that solution-wide editing of format masks will be an item on the feature request list for later implementation (subject to demand).

ooo

There are many more features in design, development and testing. This past week has been busy with the Visual Studio 2013 Preview and Michael Washington’s new E-Book released and ComponentOne providing an exclusive release of the ComponentOne Studio for LightSwitch HTML to the members of the LightSwitchHelpWebsite.com! For a member’s discount code offer you must register at LightSwitch Help Website , the main independent LightSwitch community website.

Try them, buy 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! Export/Import entities and screens, check. Entity Workbench, check. VS2013, check. How about a localization workbench? Optimization and analysis workbench? Mmm, we like that… Update which metadata fragments? That is a flavour of a few forthcoming features, we need to keep a few things secret to surprise you though!

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.

Installing Xpert360 Lightning AIDE Power Tools

Xpert360 Lightning AIDE V1.0 for LightSwitch

The original and genuine Power Tools for Visual Studio LightSwitch!

Xpert360 are very proud to announce that AIDE Version 1.0 is available as of the week commencing 8th July 2013. Both trial and full commercial licensing options are available. This version supports LightSwitch V2 and V3 projects in Visual Studio 2012 Update 2.

This post outlines the steps to install the software and how to find your way around the new power tools.

Xpert360 Lightning AIDE VSIX

The software is supplied as a signed Visual Studio Extension that can be run by simply double-clicking on the ‘vsix’ file.

Xpert360 Lightning AIDE V1.0 in VSIX Installer

Running the VSIX installer displays product details, digital signature and license terms. You can verify that the software is available by running Visual Studio 2012 and choosing the ‘Extensions and Updates…‘ menu option on the ‘Tools‘ menu. You can follow the links to more information including quick start guide and a range of FAQ and other posts.

Xpert360 Lightning AIDE in VS2012 Extensions and Updates

The AIDE extension appears as above in the list of installed extensions.

You will have been provided with a license key along with the software. The next step is to run the ‘Xpert360 AIDE Console‘ that is located in the Visual Studio ‘Tools‘ menu. The software will not operate until the license key is activated.

Xpert360 AIDE Product Licensing

The product licensing is managed here. You must enter the email that you supplied when obtaining the license and the actual license code. If you enter a trial code then this is where to return to upgrade to a full license later.

The AIDE software is integrated into the Visual Studio IDE as standard and familiar dockable windows. Any messages from the software are written to a dedicated AIDE pane in the standard Output Window.

If there are any problems during license activation you can use the messages in the modal dialog and the output pane to diagnose the issues and provide feedback to the support team. The support forums are here.

This version provides two window views that can be accessed from the ‘View‘ menu ‘Other Windows‘ option as below.

AIDE Windows for LightSwitch – Explorer and Screen Workbench

The windows can be dragged, docked and controlled just like other Visual Studio IDE windows. You will have to experiment and feedback where you like to place the windows in the IDE. Everyone has their favourite configurations for various times of the development cycle.

ContosoMoving in AIDE windows

Here the LightSwitch Explorer window is docked in the main designer area and the LightSwitch Screen Workbench below it.

The explorer window gives you access to a diverse list of views of your LightSwitch projects’ metadata. The data views cut across the project metadata allowing you to discover, review and export data that is not easily available through the standard LightSwitch designer windows.

AIDE LightSwitch Explorer Data Views – View code files

The data views collate information across client, common and server tiers, supporting multiple LightSwitch clients of V2 and V3 flavors, and supporting multiple LightSwitch projects in a solution.

AIDE for LightSwitch – Screen Workbench

The Screen Workbench brings all information for a selected screen into one place. There is no need to click through several layers of menu and designer commands to view fragmented data, it is served up in a convenient and easily digestible format.

The preview of LightSwitch V4 in Visual Studio 2013 delivers a new ‘related to’ feature in designers. Why wait? It is there now in AIDE for your V2 and V3 projects.

We have saved Updating LightSwitch Metadata until the next version V1.1 as we have not completed the full cycle of testing. The much anticipated one-click Clone Screen feature did make the final cut for V1.0 and features in this workbench.

The AIDE windows support drill through contextual links to more AIDE data views, LightSwitch screen and entity designers, to code-behind file designers and editors. The one-click navigation options save you from the hassle of searching and locating items through multiple UI actions.

There are many more features in design, development and testing. This week has been busy with the Visual Studio 2013 Preview and Michael Washington’s new E-Book released and ComponentOne providing an exclusive release of the ComponentOne Studio for LightSwitch HTML to the members of the LightSwitchHelpWebsite.com! For a member’s discount code offer you must register at LightSwitch Help Website , the main independent LightSwitch community website.

Try them, buy 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! Export/Import entities and screens, check. Entity Workbench, check. VS2013, check. How about a localization workbench? Optimization and analysis workbench? Mmm, we like that… Update which metadata fragments? That is a flavour of a few forthcoming features, we need to keep a few things secret to surprise you though!

o

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.