Upgrading Projects Created with HTML Client Preview 2 RRS feed

  • Question

  • Updating Projects Created in Preview 2

    Projects created in LightSwitch HTML Client Preview 2 must be upgraded before you can run them in LightSwitch for Visual Studio Update 2. The upgrade wizard will make changes to the project, but there are several manual steps that you’ll need to take to get the upgraded project working.

    Note: The manual steps only apply to Preview 2 projects. Projects created in CTP 4 should upgrade without any additional steps required.

    Update the LightSwitch JavaScript Runtime and Default.htm File

    The JavaScript runtime and corresponding CSS files have changed from in-the-box file references to NuGet packages.

    Remove Files

    1. In File Explorer, navigate to the ProjectName.HTMLClient\Content folder for your upgraded project.
    2. Delete the files dark-theme.css, light-theme.css, user-customization.css, and all .css files that begin with msls.
    3. Open the Images folder and delete all files that begin with msls.
    4. Open the Resources folder and delete all files that begin with msls.
    5. Open the HTMLClient\Scripts folder and delete all JavaScript files that begin with datajs, jquery, msls, and winjs.

    Update the JavaScript Runtime

    1. In Solution Explorer, switch to File View.
    2. Right-click the HTML Client node and choose Manage NuGet Packages.
    3. In the Manage NuGet Packages dialog box, choose the Settings button.
    4. Uncheck the NuGet official package source item in the Available package sources list.
    5. Choose the + button to add a package source.
    6. In the Name field, enter MyPackage.
    7. In the Source field, choose the Browse button and navigate to the LightSwitch Packages folder, (i.e. C:\Program Files(x86)\Microsoft SDKs\LightSwitch\v3.0\Packages).
    8. Choose the Select button, and then choose the OK button.
    9. Choose the Close button.
    10. In Solution Explorer, right-click the HTML Client node and choose Manage NuGet Packages.
    11. Choose the MyPackage node, and then choose LightSwitch JavaScript Client Runtime.
    12. Choose Install to install the library. The runtime will be installed and the files that you deleted will be updated to new versions.
    13. Don’t forget to undo the package source setting in NuGet Manager.

    Replace the Default.htm File

    1. In Solution Explorer, select the default.htm file under the ProjectName.HTMLClient node and rename it default-backup.htm.
    2. On the File menu, choose New, Project.
    3. Create a LightSwitch HTML Application named Temporary, using either the Visual Basic or C# template.
    4. In File Explorer, navigate to the Temporary.HTMLClient folder for your new project.
    5. Copy the user-customization.css file to the ProjectName.HTMLClient folder for your upgraded project.
    6. Open the Temporary.HTMLClient folder for the new project and copy the default.htm file to the ProjectName.HTMLClient folder for your upgraded project.
    7. Open the upgraded project in Visual Studio and in Solution Explorer, switch to File View.
    8. Open the default.htm file under the ProjectName.HTMLClient node.
    9. Replace all instances of “Temporary” with the name of your upgraded project.
    10. Open the default-backup.htm file.

    11. In the link section, copy any user-specific css references and paste them into the default.htm file below the line <link rel="stylesheet" type="text/css" href="Content/msls.all-1.0.0.min.css" />

    12. In the script section, copy any user-specific script tags and paste them into the default.htm file below the line < script type="text/javascript" src="Scripts/msls-1.0.0.min.js"></script>

    Note: At run time you may need to clear your browser cache to remove any stale copies of user customization files.

    Update the Web.config File

    1. In Solution Explorer, open the web.config file under the ProjectName.HTMLClient\Content node.
    2. Add the following to the staticContent section:

    <remove fileExtension=”.resjson” />

    <mimeMap fileExtension=”.rejson” mimeType=”application/json” />

    Delete the Common Project

    In some cases the Common project, which is no longer needed, doesn’t get removed during upgrade. This can cause unexpected issues. Check your project directory and if you find a "Common" directory, delete it.

    Update Code for API Changes

    Several JavaScript runtime APIs have been renamed or removed. You will need to update any user code that references them as follows:

    Old API

    New API










    No longer needed.







    Update SharePoint Reference

    For applications that target SharePoint, the SharePointLaunch class now inherits from a different base class.

    1. In Solution Explorer, switch to File View and open the SharePointLaunch.aspx.vb (or .cs) file under the Server node.
    2. Replace the line Inherits LightSwitchApplication.SharepointLaunchBase with Inherits Microsoft.LightSwitch.Framework.Server.SharePointLaunchBase.

    Update ServerApplicationContext API

    The usage of ServerApplicationContext in the LightSwitchApplication namespace has changed. You will need to change any instances of LightSwitchApplication.Application.CreateContext() in your code to ServerApplicationContext.CreateContext().

    OData-specific DLLs

    Any user added OData-specific .dlls that were added to the client and/or server project might not point to the correct path after upgrade. They should be fixed to point to C:\Program Files (x86)\Microsoft SDKs\LightSwitch\v3.0\

    Screen Property Changes

    The following screen properties have been changed or removed:

    • Screen.ShowSaveButton is replaced by Screen.EditMode.  EditMode has two values: Browse and Edit. All upgraded screens will have this set to Browse by default. Changing it to Edit will add a Save button to the screen and wire it up for you.
    • Dialog.DialogType is replaced by Screen.ShowAsDialog and the behavior has changed. Dialogs are now Popups and any data changes in a Popup are directly applied to the screen.  To get the old behavior, create a new screen and call it by using Screen.ShowAsDialog.
    • Height / Width property defaults have changed. For group controls such as RowsLayout, the default is now FitToContent. For edit controls such as TextBox, the default is now StretchToContainer. In some cases, you may need to change these settings for upgraded screens.
    • List.ShowArrow, TileList.ShowArrow. The ShowArrow property has been removed.
    • List.ShowHeader, TileList.ShowHeader. The default value is now False; you may need to change it for upgraded screens.
    • DateTimePicker.Clock. The Clock property has been removed; 24 vs. 12 hour format is now handled by globalization and determined based on the client’s culture.

    Steve Hoag Microsoft aka the Lights Witch (IEnumerable of Newt)

    Thursday, April 4, 2013 5:00 PM