You are here:   Blog
Register   |  Login

 

Jul 31

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

image

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

image

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

image

Create a new LightSwitch HTML C# project.

image

The solution will be created.

image

The solution consists of 3 projects.

image

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

image

Create a Browse Data Screen.

image

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

image

Click OK.

image

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>";
};

 

image

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

 

image

Hit F5 to run the application.

“Hello World!” will display.

 

Using Data

image

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

image

Create a Messages table with a Greeting field.

image

Save the table.

image

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

image

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.

image

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.

image

The Messages table will display in a List control.

image

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

image

Set the Item Tap to open a New Screen.

image

Accept the defaults and click OK.

image

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.

 

image

Hit F5 to run the application.

Click the Add Messages button to add a message.

image

Enter a message and click the Save button.

 

image

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)

Tags: VS2013
Categories:

2 comment(s) so far...


Gravatar

Re: Visual Studio LightSwitch 2013–Hello World!

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
Gravatar

Re: Visual Studio LightSwitch 2013–Hello World!

@Brian - The reporting options are the same, you have to roll your own.

By Michael Washington on   9/10/2013 7:38 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation