Solution Explorer Enhancements (Andy Kung, Kris Langohr)

Last week we announced the availability of Visual Studio 2013 Preview and highlighted some improvements in this release of LightSwitch. One of which is the significant improvement of working with LightSwitch projects in the Solution Explorer. We will go over some of the enhancements in this article.

One view in Solution Explorer

If you have built a LightSwitch project before, you probably know the concept of a Logical View and File View. Logical View was originally designed in the early release to simplify what you see in the Solution Explorer. It only shows the core LightSwitch assets (screens/tables/queries) that you interact with the most. For more advanced scenarios, it requires you to switch to File View to see the underlying files and projects.

As LightSwitch introduces more features and allows you to customize more aspects of your application, it becomes apparent that the existing Logical/File View model does not scale. Specifically,

  1. With the introduction of the HTML Client in Visual Studio 2012 Update 2, users must switch back and forth between Logical View and File View to manage the contents of your HTML Client and achieve common scenarios.
  2. New features such as SharePoint support and intrinsic database management increase the number of projects associated with your LightSwitch application that require direct interaction.

With Visual Studio 2013 Preview, all your project content is available under one view in Solution Explorer! So in addition to managing screens, tables, and queries, you can add a NuGet package, update CSS and images, and manage project references while writing code all under one view.

Familiar development experience

Everything that you used to be able to do in the Logical View is still available to you in the consolidated view and the functionality is in the same places you used to go.

To highlight some of the enhancements, let’s walk through some designer gestures to create a simple appointment list application. We will skip the implementation details and focus on the navigation experience around the Solution Explorer.

Create a LightSwitch Application

First, create a LightSwitch HTML Application project. After the project is created, you will notice 3 projects in your solution: LightSwitch root project, client project, and server project.

The LigthSwitch root project is where you can find the application level properties such as authentication mode, extensions, and SharePoint. You can also add a 2nd client or publish your app via the context menu.


Add a table

We will start by adding an appointment table. Right click on the Data Sources node and add a table via the context menu. Name it Appointment. The appointment table will appear under the Data Sources node. Notice we preserve the logical grouping of the data sources and tables you would find in the Logical View in Visual Studio 2012.

Add some fields in the table such as StartDate and EndDate.


Add a query

We want to eventually display a list of upcoming appointments. We need a query to return appointments sorted by date. Right click on the Appointment table node and add a query via the context menu. Name it UpcomingAppointments. The query will show up under the appointment table. Sort the appointment by StartDate using the query designer.


Create a screen

We’re ready to create the appointment screen. Right click on the Screens node and add a screen via the context menu.

We will create a Browse Data Screen showing the UpcomingAppointments. The newly created screen will appear under the Screens node.


Manage NuGet

We’d like to format the appointment list item by leveraging libraries from the community. Right click on the HTMLClient project node and select Mange NuGet packages via the context menu. Search for moment.js and install the package. The JavaScript file is downloaded to the Scripts folder for you.


Update default.htm

To use the library, we also need to reference it in the default.htm of the HTML client. Open default.htm and add in the reference.



Write screen code

Now we’re ready to consume the library. Open the appointments screen by double clicking on the screen node. On the screen designer, change the list item to Custom Control and click Edit Render Code in the Properties window.


Notice the screen code file is nested under the screen.


Many developers who may have used WinForms or WPF applications in the past are likely familiar with the concept of nesting an items code underneath the item in Solution Explorer. We now use that same type of functionality to give you a hierarchical view of your items including their source code. This allows you to expand and collapse your view to see the level of detail that you are interested in.

Customize theme

You can also customize the theme by directly manipulating the CSS and images under the Content folder.


Notice the development experience is very similar to building a LightSwitch application in Visual Studio 2012. However, we eliminated the need to switch back and forth between the Logical View and File View! We consolidated everything under one view to speed up the development of these common scenarios.

What else?

In addition, we’ve made LightSwitch projects work more seamlessly with the Visual Studio IDE. Now that we don’t have a custom LightSwitch Logical View but rather integrate directly into the Solution Explorer, you can leverage the already built-in features like scoped views and search.

Scoped Views

Right click on a node and select Scope to This via the context menu. This allows you to reduce what you see in the Solution Explorer to just a selected node and its children. For example, you could scope to the Data Sources node and focus on defining the data.


New Solution Explorer View is similar in function but rather than replacing the existing Solution Explorer it creates a new tool window containing the selected node and its children. This allows you to create as many scoped instances as you like to track as much information as you want. The other great thing about the windows is that you can drag them wherever you want, even outside of Visual Studio.



Another huge benefit of consolidating the Logical View and File View is that you can leverage the powerful search feature in Solution Explorer. For example, I could use search in Solution Explorer to find everything (screen, table, query, method, etc) that has something to do with appointments, all under one view.



Visual Studio 2013 improves the usability of working with LightSwitch projects in the Solution Explorer and speeds up the common tasks.

Please let us know what you think and thank you for trying Visual Studio 2013 Preview!

-Andy Kung, Program Manager & Kris Langohr, Senior Tester 
LightSwitch Team