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.

sol ex.jpg

Step 2


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

Add src.jpg

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.

new.jpg

Step 4

The Application Designer appears.

app desi.jpg

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

New Group.jpg

Step 5

A row layout appears on the screen.

grp added.jpg

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

Modle window.jpg

modle win added.jpg

Step 6

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

Add data item.jpg

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

imp mess dialog.jpg

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

imp message prop added.jpg

Step 8

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

drag message.jpg

Label ctrl type.jpg

Step 9

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

Add Button.jpg

The Add Button dialog box appears on the screen.

button dialog.jpg

Step 10

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

edit execute code.jpg

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.

open but meth.jpg

Step 12

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

open edit exe code.jpg

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. 

oup1.jpg

Click on the Group button.

group dialog.jpg

Click on the Open Button; we will see:

click open button.jpg


Similar Articles