Popup Modal In LightSwitch 2012

Here we will see how to create a Popup in a LightSwitch Application (Visual C#) in Visual Studio 2012.

The following is the procedure for creating a popup modal in LightSwitch 2012.

Step 1

Open the Solution Explorer.



Step 2

In the Solution Explorer, right-click on the Screens and choose Add Screen.



Step 3

The Add New Screen dialog box appears. Select the "New Data Screen" from the Screen Template, under screen information, choose "None" under screen data and provide a name to the Screen and click the "OK" button.



Step 4

The Application Designer appears.



Click on the "Add" Button. A dropdown list will appear and from that select "New Group".



Step 5

A row layout appears on the screen.



Click on the Row Layout, a drop down list will appear and from that list, choose "Modal Window".





Step 6

Under Application Designer, go to the menu bar and select "Add Data Item".



Step 7

The Add Data Item dialog box appears on the screen. Select the Local Property radio button and select String from Type drop down, enter the name as "Important Message" and click "Ok".



We will see that the Data Item is added to the left hand side of the Screen.



Step 8

Now drag the Data Item on to the Screen. and set the control type to Label.





Step 9

In order to add a close button, right-click on the modal window and choose "Add Button".



The Add Button dialog box appears on the screen.



Step 10

Right-click on the Close Button and choose the "Edit Execute" method.



Add the following code to the CloseButton_Execute() method:

using System;

using System.Linq;

using System.IO;

using System.IO.IsolatedStorage;

using System.Collections.Generic;

using Microsoft.LightSwitch;

using Microsoft.LightSwitch.Framework.Client;

using Microsoft.LightSwitch.Presentation;

using Microsoft.LightSwitch.Presentation.Extensions;

namespace LightSwitchApplication

{

    public partial class CreateNew

    {

        partial void CloseButton_Execute()

        {

            this.CloseModalWindow("Group");

        }

    }

}

Step 11

Similarily add an Open button. The Add button dialog box appears on the screen.



Step 12

Right-click on the "Open" Button and choose the "Edit Execute" method.



Add the following code to the OpenButton_Execute() method.

using System;

using System.Linq;

using System.IO;

using System.IO.IsolatedStorage;

using System.Collections.Generic;

using Microsoft.LightSwitch;

using Microsoft.LightSwitch.Framework.Client;

using Microsoft.LightSwitch.Presentation;

using Microsoft.LightSwitch.Presentation.Extensions;

namespace LightSwitchApplication

{

    public partial class CreateNew

    {

        partial void CloseButton_Execute()

        {

            this.CloseModalWindow("Group");

        }

        partial void OpenButton_Execute()

        {

            this.ImportantMessage = "How are you";

            this.OpenModalWindow("Group");

        }

    }

}

Step 13

Press F5 to run the application. 



Click on the Group button.



Click on the Open Button; we will see: