Solution Explorer Enhancements (Andy Kung, Kris Langohr)

Solution Explorer Enhancements (Andy Kung, Kris Langohr)

  • Comments 6

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.

image

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.

clip_image003

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.

clip_image005

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.
clip_image007

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

clip_image009

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.

clip_image010

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.

clip_image011

clip_image013

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.

clip_image014

Notice the screen code file is nested under the screen.

clip_image015

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.

clip_image016

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.

clip_image018

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.

clip_image020

Search

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.

clip_image022

Conclusion

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

Leave a Comment
  • Please add 5 and 2 and type the answer here:
  • Post
  • This is great. The team took something that was already fast and productive and made it faster!

  • Useful explanation of the Solution Explorer changes and improvements. Thanks

  • This is a really good update, i want it now! :3

  • Must have the ability to copy and paste screens or equivalent.  Hopefully this is more easily done now that the model is broken in to separate files.  Please work that highly requested feature into the next release.

  • Solution Explorer Views are very helpful for Web development where we switch between scripts/styles/server code. A killer feature to me. What I miss now is persisting these views in the solution.

  • For an application that has many screens it is difficult and annoying to find a specific screen. It is a necessity to be able to group screens in subfolders in solution explorer as in navigation groups.

Page 1 of 1 (6 items)