You are here:   Blog
Register   |  Login

 

Dec 7

Written by: Michael Washington
12/7/2011 9:03 PM  RssIcon

img3

Yes, This is a LightSwitch Application

LightSwitch is a powerful application creator. However, at times you may need to have full control over the user interface, the program flow, and functionality. I have created a sample LightSwitch application that has the following advanced features:

  • The user interface is entirely composed of custom Silverlight controls
  • A Silverlight Theme is used
  • Custom Search is implemented
  • Custom Paging is implemented
  • File Management
    • Files can be uploaded and attached to Help Desk Ticket Comments
    • Files can be retrieved and displayed
    • When a Help Desk Ticket is deleted, any associated files are deleted

 

You Can Do Anything In LightSwitch That You Can Do In Silverlight

img8

LightSwitch creates Silverlight applications. It also allows you to use your own Silverlight controls.

img30

LightSwitch uses MVVM, so you must use bindings to provide data and communicate with your Silverlight controls.

img2A

The image above shows how the binding in the Silverlight datagrid is bound to the LightSwitch Screen that it is placed on.

You can read more about using Silverlight Custom Controls with LightSwitch here: http://lightswitchhelpwebsite.com/Blog/tabid/61/tagid/2/Custom-Controls.aspx

Silverlight Themes

The look of the application is primarily achieved by using normal Silverlight Themes. In this example, I used the JetPack Theme.

img9

The Theme consists of the .xaml files in the Assets directory of the Silverlight project, and two additional background images.

imgC1

If we comment out that code, we see that the UI is simply composed of normal Silverlight controls. 

Custom Search

img11

The custom search is composed of a TextBox bound to the SearchText property (that is bound to the Query Parameter in the HelpDeskTickets collection) and a Search button to trigger the search.

img13

The filter on the HelpDeskTickets collection defines the search.

When the Search button is pressed the following code is run:

        private void btnSearch_Click(object sender, RoutedEventArgs e)
        {
            // Get a reference to the LightSwitch DataContext 
            var objDataContext = (IContentItem)this.DataContext;
            // Get a reference to the LightSwitch Screen
            var Screen =
                (Microsoft.LightSwitch.Client.IScreenObject)objDataContext.Screen;
            // Call the Method on the LightSwitch screen
            Screen.Details.Dispatcher.BeginInvoke(() =>
            {
                Screen.Details.Methods["SearchTickets"]
                    .CreateInvocation(null).Execute();
            });
        } 

This calls the SearchTickets method that simply refreshes the HelpDeskTickets collection, which executes and applies the search filter. 

Custom Paging

img19

To enable custom paging, the Silverlight control contains buttons that raise the NextRecord and PreviousRecord methods.

The paging code is very simple:

        partial void PreviousRecord_Execute()
        {
            if (HelpDeskTickets.Details.PageNumber > 1)
            {
                HelpDeskTickets.Details.PageNumber--;
            }
        }
        partial void NextRecord_Execute()
        {
            if (HelpDeskTickets.Details.PageNumber < HelpDeskTickets.Details.PageCount)
            {
                HelpDeskTickets.Details.PageNumber++;
            }
        }

File Management

imgC

File Management is implemented using a combination of ASP.NET pages and WCF RIA Services

img10

The File Management code allows you to upload a file and attach it to a comment, view the file by clicking on it in the datagrid, and deleting the files if the associated comment is deleted.

img1F

In the Visual Studio Solution Explorer, we can switch to File View...

img20

Then select Show All Files to display the ServerGenerated project.

img22

We place a FileUpload.ashx file handler to upload files, and we use a Download.aspx file to display uploaded files.

We now need to add the files to the build file, so that LightSwitch will include them in the build.

img24

We right-click on the LightSwitch project and select Unload Project.

img25

We edit the .lsproj file.

img26

We add entries to the file (the code behind will automatically be compiled and deployed so we only need to add the .aspx and .ashx files).

img28

We then Reload Project.

The following code is used by LightSwitch to call the Download.aspx file to download a file:

        public void DownloadFile(string strFileName)
        {
            Dispatchers.Main.Invoke(() =>
            {
                HtmlPage.Window.Navigate(new Uri(string.Format("{0}",
                    String.Format(@"DownloadFile.aspx?FileName={0}",
                    strFileName)), UriKind.Relative), "_new");
            });
        } 

When a file is deleted, the following method in the custom WCF RIA Service deletes the file:

        public void DeleteFile(FileRecord objFileRecord)
        {
            // Look for the file
            var objFile = (from LocalFiles in _LocalFiles
                           where LocalFiles.FileName == objFileRecord.FileName
                           select LocalFiles).FirstOrDefault();
            if (objFile != null)
            {
                string strFileDirectory = GetFileDirectory();
                File.Delete(Path.Combine(strFileDirectory, objFile.FileName));
            }
        } 

Custom Shell

imgE

Microsoft has a Walkthrough: Creating a Shell Extension that will show you how to make a simple Shell Extension. I used that to create the Minimal Shell Extension.

The purpose of the Shell Extension, is to allow me to fully control the look of the application and to remove the LightSwitch menu. The features are:

img1E

It allows a 200x50 logo to be displayed in upper right corner of Shell.

img1D

The Default tab cannot be closed

I have a full walk-thru covering the Shell Extension here: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/68/Creating-a-Minimal-LightSwitch-Shell.aspx

 

LightSwitch Extras Theme

image

When we use the LightSwitch Extras JetPack Theme, it formats the tabs and the background properly.

image

 

LightSwitch Is Up To The Task

I hope this project demonstrates that LightSwitch is capable of handling any of your projects with a 90%+ savings in code and time.

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

Tags: Advanced
Categories:

40 comment(s) so far...


Gravatar

wow... this is the first time I see what I can do with LightSwitch

Good job Michael...

With your creative and amazing work, you are bringing together Light Switch with its big brother Silverlight

Regards

By Oscar Agreda on   12/8/2011 9:52 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Oscar Agreda - Thanks :)

By Michael Washington on   12/8/2011 9:52 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Very nice...

By hgminerva on   12/8/2011 11:52 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@hgminerva - Thank you, I hope you find it helpful.

By Michael Washington on   12/9/2011 5:05 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Michael, you have demonstrated both in your book and on this site how effective Lightswitch can be. As a traditional windows form C# and VB developer, Lightswitch is proving to be a very useful tool for knocking out applications quickly even to the degree where I can toss a project in into the trash and start over if data structures have to be rethought while not losing weeks of work. Since I have a lot of other duties aside from just development, Lightswitch lends itself well to the fits and start programming model my environment imposes. However; when I hear rumors about Silverlight 5 being the last release of the Silverlight framework and it will most likely only work with Explorer 9, I start to get concerned. Additionally, I've watched Entity framework go through major metamorphosis in a short period of time, so I question how long is Microsoft going to stay behind Lightswitch? The grass roots effort that you and Beth Massi have exerted to build some momentum behind Lightswitch has been impressive and I applaud both of you. I just want to make sure that a sweat equity investment in this technology is not going to box me into either a non-supported product or a product that looses some of it's luster because it's only usable with Explorer 9. What kind of insights do you have to offer on my potential ill founded perspective?

By Stew on   12/9/2011 7:42 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Stew - I am confidant that Silverlight will still be usable for another 5-10 years or more. Also the LightSwitch team has announced that they are committed to 'other outputs'.

By Michael Washington on   12/9/2011 10:38 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Great work, Michael! Thanks.

It is very important that RAD LS is able to do "everything": biz apps plus web site apps (with full Office - OpenXML - integration).

We should be able to build web sites using LS. Word and Outlook allow us to paste in pictures and store them within the file. So too, should we be able to paste in pictures with the underlying LS control storing the pictures in the database as part of the document.

@Stew: We all hope that the management of MS is capable of clear thinking with the big picture perspective. MS must unify their architecture "parts" as well as improve communication between technology area teams. The recent announcements of Windows 8, Metro, XAML becomming an integral part of Windows, support for HTML5/JS (with RIA/JS), native compilation of C#/VB, etc. could have been presented in a less disturbing manner. LS is a terrific product and I am betting my career it.

By Garth Henderson on   12/9/2011 11:29 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Garth Henderson - The Telerik control covered in this article: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/87/WindowsDevNews-com-A-Visual-Studio-LightSwitch-Application.aspx does allow you to paste in pictures that are stored in the database.

By Michael Washington on   12/9/2011 11:33 AM
Gravatar

An Advanced Visual Studio LightSwitch Application

I found it much easier to write application in Visual Studio 2008 than Visual Studio LightSwitch. In LightSwitch, It is has to find any form objects, like button, radio buttons, check boxes, etc. Besides, I could not find any component that I can drop on the screen. Anyway, it seems like a pain to me. Maybe I need a better book. I will still keep takinga shot at LightSwitch until I get it write.

By Gbenga on   12/10/2011 6:36 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Gbenga - I recommend starting here: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/12/Online-Ordering-System-An-End-To-End-LightSwitch-Example.aspx

By Michael Washington on   12/10/2011 6:38 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

I've noticed the Details.PageNumber property before but it never crossed my mind that it can be used to programmatically control paging.

Has it, by any chance, been documented in MSDN/LightSwitch Documentation? I didn't seem to notice it being mentioned anywhere in the docs.

Anyway, Thanks a lot man! I no longer have to implement exotic solutions (ie use a third-party pager control) to my SL custom control paging problem..

By Faris Wong on   1/5/2012 7:30 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Faris Wong - I have not seen any official documentation on this, only example code from the LightSwitch team.

By Michael Washington on   1/5/2012 9:09 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Can the example codes be considered as best practices?

By Faris Wong on   1/6/2012 10:46 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Faris Wong - For myself, yes.

By Michael Washington on   1/6/2012 10:56 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Well, that's good enough for me then.. :)

Regarding the documentation, do you think they'll ever document all the behind-the-scenes properties eg: the Value.Details.Properties("PropertyName").IsLoaded property?

It'll be really great if they do. That'll save me (& others) a tonne of guesswork figuring out which properties I should use to achieve something.

Thanks.

By Faris Wong on   1/6/2012 11:20 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Faris Wong - I am not suprised they don't document a lot of really deep stuff when they know what people really want is code samples. They have code samples on the LightSwitch Team Site.

By Michael Washington on   1/6/2012 11:30 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Hello Michael:

I do, so, appreciate your site and your book. It's been very helpful. ... and encourages me to ask a direct question, knowing that it takes you time and effort to answer. Thank you.

Above you made the statement: You Can Do Anything In LightSwitch That You Can Do In Silverlight. So, before I pursue learning from your application, I have a question (an urgent need, from my perspective).

I am so torn and not just a little confused in trying to evaluate whether I should be learning to use LightSwitch or learning to use either Visual Studio C# Web Forms, etc., or Visual Web Developer.

I have an existing SQL Server database that contains, at the moment, 15000 records in a single table, a hierarchy outlining both theological and biblical data, down to about 10 levels of depth. Although every record contains a hierarchyid field, I also maintain an id - parentid relationship to give me flexibility in maintaining the tree. Right now, I make extensive use of SQL Server Management Studio and stored procedures to manipulate the data. I have no GUI.

One more thing you should know: at the leaf node level of my hierarchy, I have fields that contain both Hebrew (bi-directional, right-to-left) and Greek (using extended unicode diacritics).

So, my question: Would LightSwitch be appropriate for developing a GUI to such a hierarchical database and one that contains fields of Hebrew and Greek? If not, could you point me in the direction I should be developing my skills?

Thank you, so very much.

Kevin

By Kevin Mitchell on   3/16/2012 3:31 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Kevin Mitchell - It should be possible to do what you desire in LightSwitch. However, I regret that I have no examples to point you to other than the Many-To-Many control that should be helpful: http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/93/Using-The-Sheel-Shah-Many-To-Many-Control.aspx

By Michael Washington on   3/16/2012 3:34 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Michael:

Thank you for being so gracious to respond. I checked out the Many-to-Many Control. Thank you.

Is the use of this Many-to-Many Control control directly tied to the "Tree Control: Hierarchical Data with LightSwitch" example you have on your site? I worked through that tutorial. How should I think of the two controls as similar and how as different?

Finally, you did not respond directly to my question about Hebrew font display (e.g., in text fields, etc.). So, you don't think that should be a problem? -- i.e., there's a place in LightSwitch to specify that I'm using a bi-directional font and to somehow let LightSwitch know where the font is stored? (Would I need to have a Virtual Server account so I would have access to where the fonts are stored.)

Thank you so much. Your answers will help me to finally commit to using LightSwitch for my project.

Kevin

By Kevin Mitchell on   3/16/2012 8:43 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Kevin Mitchell - The many-to-many control helps you display and edit hierarchical data. I have no experience with non english languages, sorry.

By Michael Washington on   3/16/2012 8:45 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Hello Michael,

I am impressed with LightSwitch capabilities for LOB applications. I am planning to re-design a small scale ERP system with modules like Financial Accounting, Inventory, Sales, HR etc. Whatever LightSwitch provides out of box is sufficient for me for this project with some extensions like Reports.

If I start in LS 2011, can my work in this version will be supported in LightSwitch available in Visual Studio 2011?. Or it is better to wait till Visual Studio 2011 is released...

I am planning to develop about 75 data entry screens and about 40-50 reports through DevExpress Reports. Your advice would be much helpful.

By Vishwas on   4/2/2012 4:57 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Vishwas - You can start in LS 2011

By Michael Washington on   4/2/2012 4:58 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Hi Michael

I don't know where i

Kindly help me out regarding below scenario.

I have developed a custom silverlight child window control which i want to show when application starts. The child window is responsible for holding some application setting data. e.g- Company Name, Company Address etc. I have created an entity in LightSwitch called AppSetting (This entity can hold only one instance of record). Therefore i set the code within Application_Initialize method and its working fine.

My problem is i don't know how can i bind the child window data into AppSetting entity. When the administrator first time login the application the child window will appear after that admin enter the required information and after clicking on Submit button the child window data should save in AppSetting entity.

From last two days i am trying to overcome this hurdle but unfortunately can't able to find out any result.

Kindly redirect me in a proper way so that i can complete this task.

Thanks & Regards
Rashmi Ranjan

By Rashmi on   6/28/2012 4:24 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Rashmi - Please post questions to the forums. The Blog comments is not a good place to have a technical discussion. Also remember that I may not have the answer, but others may.

By Michael Washington on   6/28/2012 4:40 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Hi Michael

Thank you. I will do it.

Regards

By Rashmi on   6/28/2012 6:12 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Hi Michael

When I load the sample project I get a missing extension error for LightSwitchUtilities. Where can I download this from please?

Thanks
Rob

By Robert Lewis on   8/16/2012 12:04 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Robert Lewis - See: http://lightswitchhelpwebsite.com/Forum/tabid/63/aft/383/Default.aspx

By Michael Washington on   8/16/2012 5:17 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Hi I connected Lightswitch Windows application into LocalDB. Now I need to save data into LocalDB. Anyone can plz help me?

By samy on   8/29/2012 5:24 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Michael,

The link to the Help Desk project on your downloads page is not working for me. It is currently pointing to https://skydrive.live.com/?cid=01be5f7b852ba825&id=1BE5F7B852BA825%21395. Is this still the correct path to the Help Desk project files or did it get moved?

Thanks... Mike

By Mike on   9/18/2012 11:40 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Mike - It just worked for me. Try using a different web browser.

By Michael Washington on   9/18/2012 12:06 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Hello Michael,

I have followed some of your valuable contributions to Lightswitch since the product was officially rolled out. I am reaching out to you because I love the tool and I believe in many ways it is the future. I have already built 2 applications. Or I should say 1 and a half as I am in a bit of a quandry. I hope you can help me to see a direction. Here is my issue.

I am trying to incorporate a payment gateway into a lightswitch app for donation pledge managament. I need to see if I can find some code that targets this requirement. Like your recommendation above which makes sense. However I don't know enough to run with it. Could you list the steps that would be required to implement this. It need not be PayPal but it should be a payment gateway. I really don't know where else to turn and I do not have time to research this in sufficient depth.

Thanks,

Enrique J. Fundora

By Enrique Fundora on   11/2/2012 2:01 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Enrique Fundora - I am sorry but I am unable to assist.

By Michael Washington on   11/2/2012 2:02 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Hello, i am trying to open the solution in visual studio 2012, is there any possibility to upgrade the solution or to have one for lightswitch 2011 and another for lightswitch 2012?

Thanks in advance amazing blog!

By Duvo on   1/7/2013 5:05 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Duvo - Sorry but I wont have time to upgrade any of the past 100+ projects :( If I did then I would not have time to make new articles. When the new LightSwitch HTML Client is released the project format will change yet again. I then plan to make a new introductory tutorial.

By Michael Washington on   1/7/2013 5:19 PM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

I'm looking for a way to create buttons on an editable grid so the user can click to jump to the top/bottom of the database. I have all the data on one page as it is user preference so these buttons are handy to quickly jump from one end to the other. I have created the buttons but don't have the code to go with it.

Thanks in advance

By Lesley on   8/4/2014 3:53 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Lesley - I have no examples, sorry. You may want to make a post on the official LightSwitch forums at: http://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=lightswitch

By Michael Washington on   8/4/2014 3:57 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Hi Michael,

Amazing what you've done on this blog since 2010, really impressive. This is no doubt the single most authoritative source of information and training on Lightswitch anywhere. Great work !

By Yacine on   8/28/2014 10:05 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@Yacine - Wow thanks :) However a lot of the content came from the Microsoft team, there is no way I could figure out all this stuff on my own :)

By Michael Washington on   8/28/2014 11:32 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

Please help me, it's not working in vs 2013

By minimus on   10/3/2014 3:42 AM
Gravatar

Re: Help Desk: An Advanced Visual Studio LightSwitch Application

@minimus - I am sorry but this uses Silverlight and I no longer do Silverlight development.

By Michael Washington on   10/3/2014 3:43 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