LS2013 HTML Client – New Screen Template for Enhanced Table (grid)

Back in business!  Seems it was a process issue which I’ve taken care of by automating the said process.  Which was the order of the javascript files and lodash needing to be before our file.  Now our itgLsEnhancedTable NuGet package will take care of modifying the default.htm file for you.

We’ve published a LightSwitch extension into the Visual Studio Gallery to help with your usage of our Enhanced Table code.  This is a standard vsix extension and can be installed from within Visual Studio itself.

In Visual Studio, go to Tools, Extensions and Updates, on the left side of the dialog, select Online.

Search for itgLsEnhancedTable

You should get one result, install the extension

Create a new LightSwitch HTML Client

Double click on the properties for the LightSwitch project, go to the Extensions tab and enable the itgLsEnhancedTable extension.

Right click on your HTML Client project, Add our Nuget package itgLsEnhancedTable.

Add a datasource, we’ve started to use the Northwind odata feed at http://services.odata.org/northwind/northwind.svc/ for our tutorials going forward.

Add a new screen to your project, select our extension Itg Ls Enhanced Table, select your datasource.

Boom!  Screen gets created, code is generated.

Delete any unnecessary data fields from the table control.

Run your app.

Let me know what you think and if we should continue with screen templates.

Enjoy!

8 thoughts on “LS2013 HTML Client – New Screen Template for Enhanced Table (grid)

  1. The screen template is great. We will help you get the minor issues worked out :)

    • dwm9100b says:

      Appreciate it Michael. Issue has been resolved, a fresh NuGet package has been published. This will automagically add all the required references into the HTML Clients default.htm file.

  2. Nicolas Lope de Barrios says:

    All HTML code from my post was deleted! I’ve included the lines to the HEAD and BODY sections of the default.htm page. They were:

    link rel=”stylesheet” type=”text/css” href=”Content/itgLsEnhancedTable.css”

    script type=”text/javascript” src=”Scripts/itgLsEnhancedTable.js
    script type=”text/javascript” src=”Scripts/lodash.js”
    script type=”text/javascript” src=”Scripts/lodash.min.js”

    • dwm9100b says:

      I’m looking into the issues you bring up… sorry. Also looking into options to automagically inject the default.htm file with the required tags. But for now, itgLsEnhancedTable.js should be your last loaded.

      Order, javascript wise, would be
      lodash.min.js
      itgLsEnhancedTable.ms

      Drop the other lodash.js. Only one is needed.

    • dwm9100b says:

      The issue, I believe, has been resolved by modifying the order of javascript file loading. lo-dash comes before itgLsEnhancedTable. A new NuGet package has been published that takes care of updating the default.htm file automagically.

  3. Nicolas Lope de Barrios says:

    Hi,

    First of all, congratulations on your effort and keep up the good work. I’m trying to help you with this quick review.

    I’m trying your Enhanced table, I have follow the steps you described, and I had to manually add these files in default.htm to the and sections:

    Note that on http://visualstudiogallery.msdn.microsoft.com/d7d22f58-5ba4-494b-9a62-932b80966170?SRC=Home you wrote “lo-dash.js” instead of “lodash.js”, and you are missing the “lodash.min.js” reference. Perhaps you should update it.

    When running the demo, using a db of my own, and add a filter, I get a “property ‘sortBy’ is null or undefined” error, and the App breaks.

    Also I would like your help on where to tweak what files in order to translate the filters to another language (and any other UI text not directly accessible from the Properties tab).

    Thank you!
    Nicolas

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 145 other followers

%d bloggers like this: