In this post we will show you how to create a LightSwitch 2013 project that contains multiple HTMLClients. It’s a pretty exciting development, as we can now create apps for specific areas, Admin vs. Worker, and all share the same data source within a single solution. We have tested deployment to Windows Server with IIS and Azure with no issues or workarounds.
A side benefit is app payload. We can break up large enterprise grade apps into multiple clients thus keeping the individual downloads to a reasonable size.
Phil over at Xpert360 gave me a heads up that they had also done some work on multiple HTML Clients. I encourage you to check out their version.
So… here we go!
- Open Visual Studio 2013
- Create a new LightSwitch Desktop Project
- Name: LsMultiClient
- Solution name: LsMultiClient
- Create two test tables
App1Item
App2Item - Set Forms Authentication
- Grant debug to SecurityAdministration
- Right click on the main LsMultiClient project
- Add a new Client, HTMLClient
- Name: App2
- Add screens to browse App2Items with add/edit
- Open the default.htm file
- In the document.ready section, update the msls._run() to show the screen you’d like to have as the start screen for this app, msls._run(“App2ItemsBrowse”)
- Save all
- Right click on the LsMultiClient.App2 project
- Select Remove
- Right click again on the main LsMultiClient project
- Add a new Client, HTMLClient
- Name: App1
- Add screens to browse App1Items with add/edit
- Open the default.htm file
- In the document.ready section, update the msls._run() to show the screen you’d like to have as the start screen for this app, msls._run(“App1ItemsBrowse”)
- Save all
- Right click on the main LsMultiClient solution this time.
- Select Add, existing project
- Navigate to the LsMultiClient folder, find the LsMultiClient.App2 folder and select the project
- Save all
- Close your solution
- In a Windows explorer, navigate to your LsMultiClient solution folder.
- Locate and edit the LsMultiProject.lsxproj in a text editor
- Towards the bottom of the file, locate the section.
- Copy the LsMultiClient.App1 section
- Paste it under the LsMultiClient.App1 section
- Change the
ProjectReference Include=”LsMultiClient.App1\LsMultiClient.App1.jsproj” to
ProjectReference Include=”LsMultiClient.App2\LsMultiClient.App2.jsproj” - Replace the text in the tag to be LsMultiClient.App2
- Get the Project GUID from LsMultiProject.sln for your LsMultiClient.App2 project.
- Back in the LsMultiClient.lsxproj file Under the new copied section for LsMultiClient.App2.jsproj
- Replace the GUID in the tag with the App2 GUID from your LsMultiClient.sln file
- Save your files
- Back to Visual Studio 2013
- Open your LsMultiClient solution
- Select Build, Clean solution
- Select Build
- Run your app
- http://localhost:{port}/App1
- http://localhost:{port}/App2
- http://localhost:{port}/DesktopClient
Notes
- Create your HTMLClients starting with your last one
- You can remove the DesktopClient once you are sure you are done adding HTMLClients
- Keep screen names globally unique
- Make sure you set your startup project
You can download an example project from our github.
We will be posting an LsCoreProject with multiple HTMLClients soon.
Blog of an IT Guy 
I am having the same problems publishing to azure with msls-2.5.0. The error is “Sequence contains more than one matching element”. I would love to hear what is the work around if possible
Hi, I managed to get it to work after migrating the solution to msls-2.5.0. The key is to update the references in both App1 and App2. I wrote about ir here: http://social.msdn.microsoft.com/Forums/vstudio/en-US/ed447bff-a5fc-4eec-9dad-151e208e2502/reliable-way-of-having-multiple-html-clients-in-vs2013-update-2-msls250?forum=lightswitch
However, it throws this exception when trying to Publish as a package:
“Sequence contains more than one matching element”
Did you tried to publish after adding the second client? I hope you can provide some advice.
I see a lot of interesting articles on your page. You have to
spend a lot of time writing, i know how to save you a lot of time,
there is a tool that creates high quality, SEO friendly
articles in couple of seconds, just search in google – k2 unlimited content
On step #31, you say “locate the section”…I’m assuming you mean “locate the ProjectReference section for LsMultiClient.App1”, right?
Hey JGranade, did you manage to make it work in VS2013 update 2? Did you have any problems publishing or deploying?
In my case, after upgrading to msls-2.5.0, I got some build errors, mainly because “LsMultiClient\LsMultiClient.App1\GeneratedArtifacts” folder is empty.
I had some errors when trying to build mine so I’m restarting and going through the steps very carefully to see what I did wrong…on step #30 and #36, shouldn’t it be LSMultiClient rather than LSMultiProject? I don’t believe there is a LSMultiProject, right?
Finally i quit my day job, now i earn a lot of money online you should try too, just
search in google – bluehand roulette system
Hi Dale,
In your notes says “Create your HTML Clients starting with your last one”. What if I want to add a new HTML Client to an existing solution (which already has one)? In fact, what I want to do is have some screens using the dark theme and other using the light theme. Is it possible?
Howdy! I could have sworn I’ve visited your blog before but after going through a few
of the articles I realized it’s new to me. Regardless, I’m certainly delighted I stumbled
upon it and I’ll be book-marking it and checking back often!
[…] LightSwitch 2013 – Multi-HTMLClient Project! […]
[…] LightSwitch 2013 – Multi-HTMLClient Project! […]
[…] LightSwitch 2013 – 多HTML客户端 工程! […]
Hi, I have tried your suggestions and it does not seem to work with global navigation with html clients. For details on how global navigation works, here is link: http://blogs.msdn.com/b/lightswitch/archive/2013/11/07/new-navigation-features-in-lightswitch-html-client-chris-rummel-rohit-agrawal.aspx
[…] LightSwitch 2013 – Multi-HTMLClient Project! […]
I have a sample in the Visual Studio gallery doing this on VS2012. It was just an unsupported solution, that I also tried in VS2013, like you have. It breaks standard deployment methods. It is cleaner to just re-use the OData services from the 2nd and subsequent clients.
Hmmmm… Was not aware of your gallery sample. My apologies if I stepped over it.
I appreciate the comments about the deployment issues. We will start looking into that today.
Dale
> Date: Mon, 2 Dec 2013 09:52:50 +0000 > To: dale.morrison@live.com >
Just did a deployment test with our sample project, LsMultiClient. We had no issues with deployment directly to an IIS server and then to an Azure website. The wizards worked as advertised with no rework. So have at it folks!
Sorry for following up this old blog post/comment (great stuff btw) but it seems that the deployment story of MultiClient projects is broken in the current VS 2013 Lightswitch version (v4.5 as shown in .lsxtproj): The following exception was thrown trying to publish: Sequence contains more than one matching element
Removing/Uncommenting the ProjectReference Includes (as described in steps 30-39) of all but one Client project circumvent this problem but do you know of a better way?
I’ll take a look Steve… sorry for your issues. Multi-client projects are an unnecessary thorn.
Lovin’ step 34. “Change the to” . . . very very Zen 😉
LOL… sorry about that… WP stripped out my tag and content… thanks for the catch!