LightSwitch

Introduction

In VS 2010 a new template was introduced called as lightswitch, in this release Microsoft launched it with silverlight, and to be frank i have never been an admirer for sliverlight, which uses XAML. So it was not before VS 2013, where Microsoft launched it with HTML 5 as well , we started using it.

So let’s see why it is used for, if we need an application  where business logic is more important, go ahead and use this template, you can do it very quickly.

Why we started using it

Whenever a new template is released, we always have a question why and where to use it, the same question came to us as well, so below is the scenario where this template helped us.

  1. Now a days, we create applications which is configurable, and we had the same applications.
  2. But as a developer, we are required to give more time towards our application, and we bother least about creating anything about these configurations, and in the end , we end up doing it manually.
  3. To avoid this, we started using lightswitch, where a business rule is more important that my original application, and we don’t want many people to have access to it.

Creating our application

As now we are clear why and where, let’s take a simple example and create our first application using lightswitch.

We will create a small application, where we have to save Key and value pairs, so same can be used in our application.We will be using VS 2013 for this example.

  1. To create LightSwitch project, click on File->New Project-> Visual C#->LightSwitch , we will get multiple options , just select “LightSwitch HTML Application” and name application as ConfigurationManager and click OK.  Template.JPG
  2. Now once project is loaded, we will be prompted with below screen, which is called start screen, we will have multiple options , from where we can get our data. For this example we will create our own table, so let’s go ahead with “Create new table”StartScreen.JPG
  3. Now we will be on another screen, where we will be asked to Add table columns.If you notice, by default and column called “Id” is already available, which will be primary key for this table.Let’s go ahead and add 2 columns as “Key” and “Value” both will be string type, and name our table as “Configuration“.Table.JPG
  4.  Now our table is ready, we need some sceens to add/edit and view data. Let’s add some screens, if you notice your table designer, we have 2 Tabs “Server” and “HTMLClient”, Click on HTMLClient , and click on Screen tab, which is located above your table designer on right hand side, we will get “Add New Screen”
  5. From left hand side, select “Browse Data Screen” and give Screen Name  as “ViewConfigurations” and from Screen Data select “Configuration”, and click OK.Our first screen is ready.Screen1.JPG
  6. We will get one new file, which is ViewConfiguration.lsml which is our view/screen.Screen2.JPG
  7. Just press F5 to see , what we have created till now.We have our browse View/Screen.UI.JPG
  8. Now let’s move and add one View/Screen to add  values, open your ViewConfiguration.lsml file, and go find Command Bar, Expand the Menu and click on Add.                                                                                                                                               Command
  9. We will get a new popup as Add Button with multiple choice , click on “Choose an existing method” and click on drop-down below, which has showTab as default  value, select “addAndEditNew” from dropdown under “Configurations“. And in Navigate To: select (New Screen) and click OK.Screen3.JPG
  10. Now we will get Add New Screen, do not change anything and click OK.Screen4.JPG
  11. Now let’s press F5 and check what we have achieved.If you notice in right corner of window, we have a button called Add Configuration. Click on Button and a new pop up comes a View which has Key and Value textbox and Save and Close buttons.UI2UI3
  12. Now add some Key and Value pair, for testing we have entered “IsRequired” as  Key and “True” as Value and click on Save button, we will be redirected to Browse screen post save, which looks like below.UI4.JPG
  13. The browse screen has saved values, but we are not able to figure out which value belongs to which column, this is Tile List, let’s change it to table so we will have a view where we can show columns as  well.
  14. Go to solution and open ViewConfiguratios.lsml file, we will see Tile List option just below Command Bar, click on arrow next to Tile List, we will have multiple options. Let’s choose Table, now our view is changed to table, if we click on Table Row, we can Add/Remove Columns to be displayed.Screen5.JPG
  15. Press F5 and see the UI.UI5.JPG
  16. Now we have our view with table, you might have a question from where CreatedBy column came as we have not added any column by this name, LightSwitch by default adds some columns, whenever we create a new table, following are the columns.
    1. CreatedBy
    2. Created (DateTime)
    3. ModifieBy
    4. Modified (DateTime)

Conclusion

We create a business application,without using a single line of code , which can add new configurations to your application, we will see in next chapter how to use it with DataBase and we will have Edit screen as well.

Hope you learned something new today, please follow my blog for more topics.

10 Comments


  1. Ahaa, its nice discussion on the topic of this piece of writing here
    at this website, I have read all that, so at this time me
    also commenting at this place. http://yahoo.co.uk

    Reply

  2. Heya i’m for the primary time here. I came across this board and I to find It really helpful & it helped me out a lot. I’m hoping to provide something back and help others such as you aided me.

    Reply

  3. Hey there! I know this is kinda off topic however I’d figured I’d ask. Would you be interested in trading links or maybe guest writing a blog article or vice-versa? My site goes over a lot of the same topics as yours and I think we could greatly benefit from each other. If you’re interested feel free to shoot me an e-mail. I look forward to hearing from you! Fantastic blog by the way!

    Reply

  4. Fantastic blog! Do you have any recommendations for aspiring writers? I’m hoping to start my own website soon but I’m a little lost on everything. Would you recommend starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m totally confused .. Any suggestions? Bless you!

    Reply

    1. start with wordpress, once you have enough visitors move to paid.

      Reply

  5. Hi! This post could not be written any better! Reading this post reminds me of my previous room mate! He always kept talking about this. I will forward this write-up to him. Pretty sure he will have a good read. Many thanks for sharing!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *