The LightSwitch HTML Table Control (Rohit Agrawal)

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