Create a custom Lightswitch control that mimicks the lookup function

263 views Asked by At

The Lightswitch HTML5 built-in controls only allow lookups to related tables if the related table has a primary key that is related to this table being edited on the UI.

I would like to make a custom control that mimics the behavior of this control (the look as well as the search function) to look up a table that does not have such a primary key.

What UI components (which specific JQuery UI controls is lightswitch using here) are involved in this control, and what does it take to mimic it?

1

There are 1 answers

4
paulpitchford On BEST ANSWER

Ok,

So I think this MSDN post is probably the best way to go about it. Firstly read this post about how to import views from another datasource and set them up correctly. I know effectively the view is in the same datasource, but you'll be handling it from the production database as opposed to the intrinsic datasource controlled by the Lightswitch designer.

Bare in mind that during testing the Id's in your live data may not match your test data Id's.

One thing to take note of is the "Modeling the Key" section of the MSDN blog post. If you don't model you're primary key right it can get a bit messy.

To actually add the view to your Lightswitch application, you right click Data Sources in the Server project and click Add Data Source... Choose Database and click next, choose SQL Server as your provider and then enter the connection details to the database server. When you click next, you'll see a list of Database Objects that you can import. Select the view required and then click finish.

Those instructions combined with the MSDN blog post should get the view setup into your Lightswitch project. From there you just need to add a local property to your HTML screen which will give you a combo / search box from the view you just imported.

To do this, open your screen. Click Add Data Item... Click the Local Property option control and in that list somewhere should be a reference to the view you imported, something like YourDataSource.YourViewName. This will get added in the properties pane on the left hand side of your designer. Now drag that collection to wherever you need it on your screen and you should be good to go.