The LightSwitch HTML Table Control (Rohit Agrawal)

The LightSwitch HTML Table Control (Rohit Agrawal)

Rate This
  • Comments 18

Recently we announced the availability of Release Candidate for Visual Studio 2013 and highlighted some of the new features introduced in LightSwitch. The Table control is one of those newly added features. This post provides a walk-through of the new Table control and briefly covers keyboard navigation & accessibility. The Table control is based on the jQuery Mobile table control and can be used as an alternative to List and Tile list controls where the data can displayed in a tabular manner.

For the following example, I have created an entity called Contacts with four properties – ‘Prefix’ of type string, ‘Name’ of type string, ‘Email’ of type Email Address and ‘Phone’ of type Phone Number. I also created 2 screens – ‘BrowseContacts’ screen which shows a list of contacts (later in the post we will be adding a Table control on this screen) and an AddEditContact screen that is used to add new contacts or edit the existing ones.

Add a Table Control

Let’s first open BrowseContacts in the screen designer. By default, the BrowseContacts screen will show a List of contacts. To use a Table control, all we need to do is select Contacts in the screen content tree and change its control type from List to Table by choosing Table from the dropdown menu.

Add_Table_Control

The Table control will automatically show all the properties (Prefix, Name, Email and Phone). At runtime, each property will show up as a column. Columns can be deleted easily from a table by deleting items from the content tree.

This is what the screen looks like after adding some data.

Table_Control

Behind the scenes, a Table control consists of a ‘thead’ HTML tag and a ‘tbody’ HTML tag. The ‘thead’ tag essentially consists of the header while the ‘tbody’ tag consists of the data that is displayed on the Table control. On opening the developer tools for Internet Explorer (F12) you can see the structure of the Table control. For the above table, this is how the HTML structure looks like.

table-debug

Note: I am using Internet Explorer 10 for this example.

Change Column Width

You might have noticed that each column on the Table control has equal width. We might not want the ‘Prefix’ column to take up all that space. We can change the width of a column by simply changing the column weight for that particular property.

By default, each property that will be displayed within a Table will have column weight set to 1. We can easily change the column weight by selecting a property - ‘Prefix’ in our case; and on the properties window changing value of column weight from 1 to 0.3

Change_Column_Weight

This is how the page looks like after making these changes.

Note: Even on resizing the browser, this column weight ratio will be maintained.

Table_With_Changed_ColumnWeight

Like all UI in the HTML client, responsive design principles also apply to this control so that it displays well on multiple form factors. When we resize the screen to a smaller width, the table columns collapse into a stacked presentation which shows up as blocks of label/data pairs for each row. This is what the screen looks like on smaller form factors, like mobile phones.

Table_Smaller_Form_Factor

Use Compact Margins

Margins around each row can be reduced by selecting ‘Table Row’ in the screen content tree and checking the ‘Use Compact Margins’ checkbox on the properties window.

Compact_Margins

This is how the screen looks like after these changes.

Table_Compact_Margins

Change the look of the Table Header

The theme of HTML Client controls are controlled via CSS and the Table control is no different. You can modify the look of the Table control by adding customizations in the user-customization.css file in your project. So let’s first open the ‘user-customization.css’ file which is located under Demo.HTMLClient -> Content folder, where Demo is the name of my application. 

Open_User-Customization

Copy/paste the following code at the bottom of the user-customization.css file.

/*Change font and background color of Table header*/
th {
    color: white;
    background-color: steelblue;
}

This is how the screen looks after these changes.

Table_Customized_Header

Change Alternating Row Style

It’s very common to want to view tabular data with alternating row colors so the data is easier to read. For this example I will choose palegoledrod and powderblue as the alternating colors. Copy the following code and paste it in the user-customization.css file.

/*Change background color for all odd rows*/
tr:nth-child(2n+1) {
    background-color: palegoldenrod;
}

/*Change background color for all even rows*/
tr:nth-child(2n) {
    background-color: powderblue;
}

This is how the screen looks like after these changes.

Table_Customized_Alternating_Row_Color

Change Cell Color Depending Upon Cell Value

What if we want to perform some UI logic where certain values are shown in different colors? That’s easy to do with some custom code on the control itself. On the BrowseContacts screen, select ‘Phone’ and click ‘Edit PostRender Code’. For this example, let’s change the cell color for phone numbers that have ‘123’ as the area code.

Phone_Edit_Post_Render_Code

Copy the following code in Phone_postRender method.

myapp.BrowseContacts.Phone_postRender = function (element, contentItem) {
    // Write code here.
    if (contentItem.value && contentItem.value.substring(0, 3) == "123") {
        $(element).closest("td").css("background-color", "yellow");
    }
};

This is what the screen looks like after these changes.

Table_Customized_Cell_Color_Based_On_Data

Keyboard Navigation and Accessibility

The Table control has built in keyboard navigation to make this easy for your users. Each row on the Table can be easily navigated to, by using the arrow keys on a keyboard. Once the focus is on a Table control, press UP/DOWN arrow keys to navigate across various rows. While pressing DOWN arrow, the table progressively loads and displays additional rows of the table. Pressing ENTER or SPACEBAR will trigger the tap action.

Accessibility features are also important when running apps. Screen readers will read through the table in a logical and clear manner in both standard and reflow mode and the Table control is also designed to work great on high contrast systems.

Wrap Up

The Table control was added to LightSwitch in Visual Studio 2013 in response to direct feedback from you! Download Visual Studio 2013 RC and give it a spin.

And if you have any feedback or would like to share something, please leave a comment below or visit the LightSwitch forum. Your feedback is always greatly appreciated.

- Rohit Agrawal, SDET, LightSwitch Team

Leave a Comment
  • Please add 5 and 8 and type the answer here:
  • Post
  • Thanks Rohit for a great control and a great article.

    Can you perhaps suggest the most elegant way to add column sorting to the table? I realize that the native jQuery Mobile Table control does not support column sorting, but it is almost always required with a table/grid type of control.

    I imagine that we could apply some jQuery events and styling to the header to provide appropriate events when clicked/tapped as well as displaying little sort icons.

    It is only a matter of time before this question will be raised on the forum :)

    Thanks

  • @Xander,

         Lightswitch runtime doesn't support sorting tables natively. You can try some of the available plugins, but remember that moving around elements in DOM may cause the event listeners to be detached which may result in erratic behavior.

  • @Prem,

    I'm referring to server side sorting where the table is rendered again. This is honestly a must have requirement for tables/grids in 99% of business apps.

  • Hi Xander,

    It is possible to add a server query and then bind the Table control to this query. Following are the steps to do so in the example shown above:

    1. Open Contacts Entity designer screen

    2. Click on Query button

    3. Lets name this query ContactsSortedByName and add a sorting rule 'Sort by Name Ascending'

    4. On BrowseContacts screen designer, add ContactsSortedByName query

    5. Add another TAB on BrowseContacts screen designer and add ContactsSortedByName to this newly added TAB.

    6. Change control type of ContactsSortedByName from List to Table.

    Please let us know if this works for you.

    Thanks

    Rohit

  • @Xander -- totally understand what you mean. I do think it's possible (and agree necessary), I'll play with it and let you know.

  • It is easy to make the grid editable (it has set use-readonly-controls) by flipping labels to textboxes. Unfortunately as the control intercepts SPACEBAR for tap it out-of-the-box means that you cannot enter a space into a textbox. Which way is edit support going, trash can or fix? Apart from that very nice!

  • I too would love to see a server-side sorting example.  Suppose we could use a query with a string parameter and PreProcessQuery event but dynamic field names in Linq OrderBy() is a tough nut to crack.  Please correct me if I'm wrong.  I'd love to see an override of query.OrderBy method that takes a string field name.

  • Xander & Beth,

    I tried using PreProcessQuery to accept a string parameter of field names for OrderBy and it worked like so:

    social.msdn.microsoft.com/.../html-table-server-side-sort

    Let me know your thoughts in the forums about completing this concept.

    TIA,

    Josh

  • @Rohit, the JQuery Mobile table control supports a column toggle mode where lower priority columns are hidden as the screen gets smaller. Is there any way to achieve the same with this control?

    Thanks for this article!

  • @Rohit,

      Is there any options for pagination?

  • LightSwitch HTML Table Data not displaying in Internet Explorer 9

    social.msdn.microsoft.com/.../lightswitch-html-table-data-not-displaying-in-internet-explorer-9

  • Can we turn of the Ajax constant scrolling loading and implement paging?

  • LS team posted a sample of how to sort table control using property names here:

    blogs.msdn.com/.../customizing-the-table-control-sortable-by-column-kevin-mehlhaff.aspx

    I still feel that the ability to do dynamic sort and filter using property names should be built into the middle tier.  Here is a UV suggestion, please vote:

    visualstudio.uservoice.com/.../4458683-enable-dynamic-queries

  • I'm using VS 2013 and just getting started with Light Switch (HTML).  I believe I have the latest SPs and packages installed.   I have a pretty trivial data source and am trying to render a table control (very similar to this example).

    When the table control renders in Chrome 32, IE 10 or FF 26, the headers are nicely spaced (as expected) but the row (data) columns are not lined up at all (the appropriate spacing isn't preserved, it just appears to slow each new column's data right after the prior column's data).  It's as though some HTML or CSS attribute is missing in the rendering of the data.

  • Hi Mike,

    Can you post a question in the forums and attach a screen shot?

    social.msdn.microsoft.com/.../home

    Create a new Browse screen and switch the List to a Table in the Screen Designer, F5, and let's see what you get. Even if you're displaying a lot of fields the rows should be lining up.

    Thanks,

    -Beth

Page 1 of 2 (18 items) 12