You are here:   Blog
Register   |  Login

LightSwitch News

 

Jul 22

Written by: Michael Washington
7/22/2012 9:00 PM  RssIcon

image

The Visual Studio LightSwitch HTML Client (preview) allows you to consume any JavaScript control. In future versions of the LightSwitch HTML Client, it should be easier to wire up custom JavaScript controls. With the current LightSwitch HTML Client, you have to perform a number of steps, however, it is still much easier than not using LightSwitch.

In this article we will incorporate the Toastr plug-in (available here: https://github.com/CodeSeven/toastr) that will display a popup Toast message.

NOTE: This article uses the preview version of the LightSwich HTML Client. You can download it here: http://msdn.microsoft.com/en-us/lightswitch/htmlclient.

image

First, we create a new LightSwitch project.

image

We create a JS/C# project.

image

When the Solution is created, we right-click on the Server project and we Add Table.

image

We create a simple Table.

image

Next, we right-click on the Client project and we Add Screen.

image

We create a Browse Data Screen.

image

When the Screen is created, we right-click on the Dialogs node and we Add Dialog.

image

We select Add, then Selected Item.

image

In the Properties for the Dialog, we set the Horizontal Alignment to Stretch to Container.

image

Next, we select the People List.

image

In the Properties for the List we set the Item Tap Action.

image

For the Method we select AddAndEditNew.

 

image

For the Navigate To we select the Dialog.

image

We add a new Button.

We set it to also open the Dialog.

image

We can run the application at this point.

image

We can add new Person

image

… using the Dialog.

Incorporate Toastr Into LightSwitch

image

To incorporate the Toastr plug-in, we switch to File View.

image

We right-click on the Client project and select Manage NuGet Packages.

image

We search for the Toastr project, and click the Install button.

This will automatically download and install the files in the project.

image

Next, we open the Default.htm page, and add the references to the Toastr .css files and the .js file.

Note, the position of the references is important.

image

We switch back to the LightSwitch Screen and select the Dialog.

image

In the Properties, we select Edit PostRender Code.

image

A method is wired-up. We enter the following code:

 

toastr.info('Enter First and Last Name');

 

image

Now, we run the application…

image

The Toast will appear when the Dialog is opened.

Download Code

The LightSwitch project is available at:

http://lightswitchhelpwebsite.com/Downloads.aspx

4 comment(s) so far...


Gravatar

Re: Using Toastr with Visual Studio LightSwitch HTML Client (Preview)

Is working on a mobile devices?

By Eduardo on   3/11/2013 2:48 PM
Gravatar

Re: Using Toastr with Visual Studio LightSwitch HTML Client (Preview)

@Eduardo - Yes

By Michael Washington on   3/11/2013 2:48 PM
Gravatar

Re: Using Toastr with Visual Studio LightSwitch HTML Client (Preview)

Hi Michael,
Is there any change to the above code when using vs2013?

By karanja alex on   12/8/2013 11:03 AM
Gravatar

Re: Using Toastr with Visual Studio LightSwitch HTML Client (Preview)

@karanja alex - I have not tried it but there should not be.

By Michael Washington on   12/8/2013 11:03 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