Jul
31
Written by:
Michael Washington
7/31/2013 5:27 AM

When learning any new computer language or program, it is often helpful to start with a “Hello World!” project.

Open Visual Studio 2013 (or higher) and select File, then New Project.

Create a new LightSwitch HTML C# project.

The solution will be created.

The solution consists of 3 projects.

Right-click on the Screens folder to add a new screen.

Create a Browse Data Screen.

Right-click on the Rows Layout tab and select Add Custom Control.

Click OK.

In the Properties for the control, select Edit Render Code.
Use the following code for the method:
myapp.Main.ScreenContent_render = function (element, contentItem) {
element.innerHTML = "<h1>Hello World!</h1>";
};

In the Properties for the control, select None for the Label Position.

Hit F5 to run the application.
“Hello World!” will display.
Using Data

Right-click on the Data Sources folder and select Add Table.

Create a Messages table with a Greeting field.

Save the table.

Return to the screen by double-clicking on the Main.lsml file.

Add the Messages table to the screen by clicking on the Add Data Item button.
Use the Add Data Item screen to select the Messages table and click OK.

The Messages table will show in the View Model on the left-hand side of the screen designer.
Drag and drop it in the screen layout.

The Messages table will display in a List control.

In the Properties for the control, select the Item Tap.

Set the Item Tap to open a New Screen.

Accept the defaults and click OK.

Return to the Main page by double-clicking on the Main.lsml file in the Solution Explorer.
On that page, click on the Command Bar then the Add button.
Add a addAndEditNew button that will reuse the Add Edit Messages screen that was just created.

Hit F5 to run the application.
Click the Add Messages button to add a message.

Enter a message and click the Save button.

The message will display.
Download Code
The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx
(you must have Visual Studio 2013 (or higher) installed to run the code)
2 comment(s) so far...
I am thinking of looking into LightSwitch since I am a novice programmer (main job is Systems Admin.) How has the reporting options improved in LightSwitch? Am I still better off using Crystal Reports and the such?
By Brian on
9/10/2013 7:38 AM
|
@Brian - The reporting options are the same, you have to roll your own.
By Michael Washington on
9/10/2013 7:38 AM
|