Extending LightSwitch - Add Additional Functionality Easily

Extending LightSwitch – Deeper Down The Rabbit Hole

On 13 August, 2013 07:00:27, in Programming, by Dirk Strauss

Extending LightSwitch Application With DataExtending LightSwitch - In my previous post Visual Studio LightSwitch – True Power Lies In Simplicity, I showed how easy and quick it was to create a fully functional, data aware Windows Form. If you haven’t read the previous post, go check it out.

In this post however, I want to take it one step further. They say that no man is an island. Well, I can tell you with confidence that no app is an island either.

Using our previous application as a foundation, let us assume that we wanted to group members together according to some sort of classification. How easy would that be? Let us create another table to group members by their level of study within the organisation.

Extending LightSwitch – Add Data To Your Application

To add functionality to your existing LightSwitch application is as easy as 1-2-3. Let me show you how.

Extending LightSwitch solution explorer

In the Solution Explorer, expand the Data Sources section.

Extending LightSwitch data source

Right click on the Application Data node and select to Add a table from the context menu.

Extending LightSwitch add table

As before, modify the new table’s properties. I called my table Group and added two fields called GroupName and GroupDescription.

Extending LightSwitch table relationships

Next, I need to add a relationship between the Member table and the Group table. This is because a member can belong to a group, and a group can belong to more than one member (Databases 101 here). So change your selection to the Member table and click on the Relationship menu item at the top of the screen. (I changed the table to the Member table to add the relationship, but you can easily have done this from the Group table too.)

Extending LightSwitch

This will open up the ‘Add New Relationship’ window. As mentioned before, a member can belong to one group only, but a group can be assigned to more than one member. This screen allows you to model this relationship visually. Have a look at the summary section below the tables diagram. It summarises your choices above in the From and To fields with regards to Multiplicity, On Delete Behavior and Navigation property. In this summary we can see that I have specified that a member must belong to a group. A Group can also have many members. Lastly, I can’t delete a group if it is still associated to a member.

relationship added to tables

Clicking on Ok will take you to the relationship screen from the perspective of the member table. Note that a foreign key for Group has been added to your Member table automatically.

relationship from group table

You can also view this relationship from the perspective of the Group table.

create new screen

Next it is time to create a screen for our Group table. From the menu above the table, click on the Screen menu item.

group screen created

As in the previous article, select the List and Details Screen. Only this time, the screen data needs to come from the Groups table and the additional data needs to be selected as Group Details and Group Members (you will see why Group Members are added in a minute).

select groups screen

That’s it, click Ok and then run your application. When your application screen is displayed, take note of the TASKS menu in the top left. Click on that and select ‘Groups List Detail’. This will open the Group screen in a new tab.

group list screen

As you can see, this screen allows you to add Groups to your application. In addition to that, because we selected to include the Group Members when we linked the Group table to the screen data above, we now have a members section on this form too. Right, before I explain too much, let me illustrate this with actual data. LightSwitch is really more powerful than you think.

add new group

Add a few new Groups by clicking on the appropriate menu item on the Group form.

edit member details

After you have added the Groups, close the Groups screen and return to the Members screen. Select a member and edit it. You will now see that there is a Group field that is populated with the groups previously added.

save member detail edit

Click the Ok button to save the modification and you will see….. hmmmmm. The group we just added is not displayed on the Members form? You probably look as puzzled as my picture in the screen shot. Ok, the reason for this is simple. We just need to edit the screen to add the additional field. In the bottom right of the screen, you will notice a link ‘Design Screen’. Click on that.

add field

From the Customization windows that opens, you will see the various controls already present on the form. To the bottom of the Member Details node, you will see the existing fields and an ‘Add’ option.

add field group to members

Clicking on ‘Add’ will bring up a context menu. Select ‘Group’ from this selection.

member form group added

When you save this, you will now see the field added to your members screen.

add additional members

Go ahead an add a couple of additional members to your data.

Extending LightSwitch select group

This time, if you return to your Groups List Detail screen, you will see the beauty of the Members section. It now logically groups all members by the selected group in the left groups list.

Extending LightSwitch group filter

Change the Group selection in the left, and the members associated with the selected group are displayed in the Members section to the right. You are now filtering Member data based upon the Group selected without you having to add a single line of code.

Extending LightSwitch Add members

Lastly, you can also add members right here from within the Groups screen. This kind of functionality is all added for you with the incredible power of LightSwitch. I do have to say that working with LightSwitch makes me feel almost obsolete as a programmer. But somehow I think that there is much more to this technology than meets the eye.

In no time at all, we were able to add additional data to our application, extending LightSwitch to include Groups. In a similar manner, we can add other tables and screens to our application. By doing this we are building it to become the app we need it to be without wasting time coding mundane Add, Edit and Delete functions. LightSwitch is a hidden gem more developers should explore. Come with me, and see what LightSwitch has to offer.

Image Reference

The following two tabs change content below.

Dirk Strauss

Software Developer
Dirk is a Software Developer from South Africa. He loves all things Technology and is slightly addicted to Twitter and Jimi Hendrix. Apart from writing code, he also enjoys writing human readable articles. "I love sharing knowledge and connecting with people from around the world. It's the diversity that makes life so beautiful." Dirk feels very strongly that pizza is simply not complete without Tabasco, that you can never have too much garlic, and that cooking the perfect steak is an art he has yet to master.

Latest posts by Dirk Strauss (see all)