Category Archives: SharePoint

VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Theme Headers

New Screens in Office Azure Dark Theme

New Screens in Office Azure Dark Theme

Some sample screens with standard jQuery header formatting.

Headers, Footers and Toolbars

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

Menu

Auto-Tile Menu Default Light theme

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

LightSwitch HTML Client drag and drop

LightSwitch HTML Client Orchard theme drag and drop list items

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

msls-header.ui-bar background styles

msls-header.ui-bar background styles

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

background: inherit;

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

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

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

Conclusions

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

ooo

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

ooo

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

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

Advertisement

UK TechDays Online – November 6-8

TechDays Online – November 6-8: The final programme update! Featuring Steve Ballmer, Will Greenwood and the Lotus F1 team!

Complimentary session calendar here: TechDaysOnlineAutumn2013.ics

TechDays Session Calendar

TechDays Session Calendar

Follow official twitter feed: @TechNetUK

UK techDays Online (Autumn 2013)

Register for TechDays Online

Here is the Final programme update for each day of UK Tech.Days Online (Autumn 2013) from Wednesday November 6-8.

Don’t miss out!

Guide to VS2013 LightSwitch HTML Themes

Guide to VS2013 LightSwitch HTML Client Themes

LightSwitch HTML Themes and Tools

LightSwitch HTML Themes, tweaks and Tools

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

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

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

Headers, Footers and Toolbars

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

VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Client drag and drop

LightSwitch HTML Client Orchard theme drag and drop list items

Selection List and Options

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

Styled LightSwitch HTML Choice List

Styled LightSwitch HTML Choice List

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

Rounded Corners

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

Clipped text and rounded corners

Clipped text and rounded corners

The screen shots above show the adjusted rounded corner support.

Previewing LightSwitch Themes

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

Swatches

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

Cloud Business Apps and Site Chrome

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

Mega-Theme Pack

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

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

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

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

Conclusions

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

ooo

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

ooo

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

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

News on Software Previews for Visual Studio 2013 LightSwitch

Preparations for the Launch of VS2013

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

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

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

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

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

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

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

VS2012 VS2013 LightSwitch family photo

VS2012 VS2013 LightSwitch family photo!

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

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

LightSwitch Mobile Salesforce app in Office 365

LightSwitch HTML Mobile Salesforce app in Office 365

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

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

LightSwitch HTML Client drag and drop

LightSwitch HTML Client Orchard theme drag and drop list items

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

AIDE for LightSwitch Exchange Hub

AIDE for LightSwitch Exchange Hub in VS2013 RC

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

AIDE for LightSwitch Explorer in VS2013 RC

AIDE for LightSwitch Explorer in VS2013 RC

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

AIDE for LightSwitch Entity Workbench

AIDE for LightSwitch Entity Workbench – Related items/screens

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

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

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

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

Conclusions

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

ooo

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

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

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.

AppIntrinsic Order Entity

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

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

Home page

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

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

Publish the LightSwitch HTML application

Now we have a SQL database appropriately named AppTest.

AppTest Deployed Database in SQL Server

AppTest Deployed Database in SQL Server

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

Deployed application - spot the difference?

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

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

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

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

AIDE for LightSwitch Exchange Hub – Imported

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

LightSwitch Application with External Database

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

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!