Customizing Menu Items in LightSwitch Using Visual Studio 2012

I have described in my previous article LightSwitch Basic Application about how easily we can create a LightSwitch application using Visual Studio LightSwitch 2012. So I will be using only the same data table that I created in that article.

Introduction

In this article I will show you how to change the navigation menu using LightSwitch Visual Studio 2012.

Customizing Menu Items in LightSwitch

Since the "navigation menu" provides a list of screens, we can easily:

• add or remove menu items 
• change the menu text
• change the order of menu items.

Adding and Removing Menu Item

In this the "Include Screen" drop-down list also consists of screens that are already on the navigation menu. We can also add another menu item for a screen. The Include Screen drop-down list also contain "Users and Roles". These are related to authentication and authorization.

Step 1

Open the Solution Explorer.

Image 1

Step 2

First go to "Screens" in Solution Explorer. Then, right-click on the "Screens" folder and we will see an "Edit Screen Navigation" option. Click on it.

Image 2

Step 3

The "Screen Navigation" tab of the Application Designer will appear.

Image 3

Step 4

On the Screen Navigation tab, inside the "Tasks" node, right-click on the "Create New Contact Table" and click on "Delete" option.

Image 4

Step 5

We will notice that "Create New Contact Table" menu item is removed from the navigation menu.

Image 5

Step 6

On the Include Screen drop-down list , we will have "Create New Contact Table" in the list.

Image 6

Step 7

Click on "Create New Contact Table"; we will see that the Create New Contact Table menu item is added to the bottom of the Tasks in the navigation menu.

Image 7

Changing the Menu Text using LightSwitch

As we rename a menu item, only the name that is displayed is affected. The actual screen name is not affected.

Step 1

Before changing the menu text I have created a new menu item named "Create New Contact Table." After creating it , we will right-click on that menu item and rename it.

Image 1

Step 2

We click on the "Rename" option and we rename it as "Employee Contact" as shown in:

Image 2

Reorder Menu Item using LightSwitch

As we do the reordering of menu items by using the Move Up and Move Down buttons, we can only reorder the items in that group.

Step 1

Select any of the tables given under the Tasks node.

Image 1

Step 2

On the right side of the navigation menu there are two buttons shown ("Move up" and "Move down"). Click the "Move up" button. The "Employee Contact" menu item is moved to above the "Create New Contact Table" menu item.

Image 2