Articles → LIGHT SWITCH 2011 → Modal Popup In Lightswitch 2011

Modal Popup In Lightswitch 2011






Software Requirement




  1. Visual studio 2010 is installed on your machine.
  2. Visual Studio 2010 service pack 1 is installed on your machine.
  3. Microsoft Visual Studio Light switch 2011 is installed on your machine.

Prerequisite Knowledge




  1. How to create lightswitch screens?
  2. How to add button(s) in lightswitch screens?
  3. What is button’s execute method?
  4. How to add data item in the screen?

Creation Of A New Screen




Picture showing the design view of the new data screen

Click to Enlarge


Add Modal Popup




  1. Add row layout in the screen
  2. Change row layout to modal popup
  3. Add data item
  4. Add close button on modal window




  1. Click on the add button.
  2. A dropdown appears. Select New Group.
  3. A Rows Layout will be added in the screen.
  4. Picture showing adding a new group in the designer view of the new data screen

    Click to Enlarge




  1. Click on the arrow besides Row Layout.
  2. A drop down appears. Select Modal Window from the drop down.
  3. Picture showing converting the group to modal popup

    Click to Enlarge




  1. Add data item (Local Property).
  2. Set its name as HelloMessage.
  3. Drag data item on the screen.
  4. Picture showing adding the textbox inside the modal popup

    Click to Enlarge

  5. After you drag data item on the screen, change the control type from textbox to label.
  6. Picture showing change the textbox to the label control

    Click to Enlarge






Picture showing the new button on the screen

Click to Enlarge



partial void btnClose_Execute() {
	// Write your code here.
	this.CloseModalWindow("Group");
}





Add A Button To Open Modal Popup




Picture showing adding the button on the main tool bar

Click to Enlarge



partial void btnOpen_Execute() {
	// Write your code here.
	this.HelloMessage = "Hello";
	this.OpenModalWindow("Group");
}





Output


Picture showing the output of the modal popup in lightswitch

Click to Enlarge


Download



Posted By  -  Karan Gupta
 
Posted On  -  Friday, June 22, 2012

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250