LightSwitch 2013 – Multi-HTMLClient Project!

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!

  1. Open Visual Studio 2013
  2. Create a new LightSwitch Desktop Project
  3. Name: LsMultiClient
  4. Solution name: LsMultiClient
  5. Create two test tables
    App1Item
    App2Item

  6. Set Forms Authentication
  7. Grant debug to SecurityAdministration
  8. Right click on the main LsMultiClient project
  9. Add a new Client, HTMLClient
  10. Name: App2
  11. Add screens to browse App2Items with add/edit
  12. Open the default.htm file
  13. 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”)
  14. Save all
  15. Right click on the LsMultiClient.App2 project
  16. Select Remove
  17. Right click again on the main LsMultiClient project
  18. Add a new Client, HTMLClient
  19. Name: App1
  20. Add screens to browse App1Items with add/edit
  21. Open the default.htm file
  22. 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”)
  23. Save all
  24. Right click on the main LsMultiClient solution this time.
  25. Select Add, existing project
  26. Navigate to the LsMultiClient folder, find the LsMultiClient.App2 folder and select the project
  27. Save all
  28. Close your solution
  29. In a Windows explorer, navigate to your LsMultiClient solution folder.
  30. Locate and edit the LsMultiProject.lsxproj in a text editor
  31. Towards the bottom of the file, locate the section.
  32. Copy the LsMultiClient.App1 section
  33. Paste it under the LsMultiClient.App1 section
  34. Change the
    ProjectReference Include=”LsMultiClient.App1\LsMultiClient.App1.jsproj” to
    ProjectReference Include=”LsMultiClient.App2\LsMultiClient.App2.jsproj”

  35. Replace the text in the tag to be LsMultiClient.App2
  36. Get the Project GUID from LsMultiProject.sln for your LsMultiClient.App2 project.
  37. Back in the LsMultiClient.lsxproj file Under the new copied section for LsMultiClient.App2.jsproj
  38. Replace the GUID in the tag with the App2 GUID from your LsMultiClient.sln file
  39. Save your files
  40. Back to Visual Studio 2013
  41. Open your LsMultiClient solution
  42. Select Build, Clean solution
  43. Select Build
  44. Run your app
  45. http://localhost:{port}/App1
  46. http://localhost:{port}/App2
  47. 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.

11 thoughts on “LightSwitch 2013 – Multi-HTMLClient Project!

  1. 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!

  2. jl says:

    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

  3. Xpert360 says:

    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.

    • dwm9100b says:

      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 >

    • dwm9100b says:

      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!

  4. Lovin’ step 34. “Change the to” . . . very very Zen ;-)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 116 other followers

%d bloggers like this: