Monthly Archives: February 2012

How to avoid problem with Auto Complete Box not saving selected values in Lightswitch

At first, I would say that behavior of LightSwitch I will show you today is a bug. I haven’t investigated that much about it in Microsoft Connect. It happens in one edge case I will describe today.

Say we have data model like this :

data model lightswitch

We have entity that has reference to another entity. Employee has reference to Status. This second Status table has set for some business requirement that his Summary property must be set to value that can repeat. I know this makes it hard to tell which value from all possible was picked, but say it is so. Another reason is that summary property is displayed as selected value in grid.

OK, so far so good. Here comes trouble.

auto complete box lightswitch problem

This is, how the screen would look like. If we select first 1200 and save it, data would be saved correctly. But if I would select second 1200, update to database will be triggered with ID of first (I know that, because I spent some time with investigating on this error and first thing that came to my mind – it’s not you code, debug the result, SQL 🙂 ). From my experience, when you have multiple same values, the first from top will be selected (like if you would search a list and take first one) and this value will be used to update record.

OK, what we can do about it.

There are two possibilities :

  • Choose some unique value column as Summary Property of your entity (but you should be damn sure there will be no duplicates, maybe you could put a unique constraint on that column in DB or so, because some user can put same value there),
  • Create a computed column that will be unique (I’m creating it from two other columns), like I did here

entity with computed column lightswitch

You have to also set it as Summary Property.

Then UI could look like this :

ui with auto complete box for computed column lightswitch

With this approach Lightswitch app will work as expected. Hopefully. 🙂

As always, both solutions to elaborate on can be downloaded here :

https://skydrive.live.com/redir.aspx?cid=78a5783de37d2ebe&resid=78A5783DE37D2EBE!1788&parid=78A5783DE37D2EBE!1779 and look for AutoCompleteProblem.zip 66MB file.

How to pre populate and post populate some data for new item in AddAndEditNew or other events in LightSwitch screen

This week I had to deal with requirement from customer, that I wasn’t able to find somewhere on web, so I will try to share my small solution with you. 🙂

So, what was this problem?

Really common user request is : Please, prefill some data when adding new item in the grid. It’s quite logic to prefill some values when you know which value should be there to either help user to not search in items, or you don’t want user to be able to change values when inserting. That could be date (yes , this could be easily done in DB), but this applies more to some business objects like you boss or so on related to record you are creating.

At first, I would like to point you to resources that are creating also own popup window :

http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/33/LightSwitch-ndash-Modal-Add-and-Edit-Windows.aspx

or

http://blogs.msdn.com/b/lightswitch/archive/2011/07/07/creating-a-custom-add-or-edit-dialog.aspx

or

http://code.msdn.microsoft.com/silverlight/Managing-Custom-AddEdit-ab1c6b58

OK, but what if I’m quite satisfied and don’t want whole custom window, just to prefill / modify / tweak new item and fire up the out of box generated window?

So here is how :

On each screen you have these Add… , Edit… and Delete buttons.

add edit delete buttons lightswitchb screen

They are the key. Please note that when you want to add new buttons, you can have more of them :

add edit delete buttons lightswitch screen more buttons

And please note those names : AddAndEditNew, AddNew, EditSelected etc…

When you right click on these buttons you can override code in them, this is the point where we could modify record in code. OK, but handler code is blank and thus app will not do anything when clicked. So what we need to fire, to have things behaving like out of box? Quite easy, fire up method that have name like button on datasource, that you have on your screen. Like this (note that you don’t have to implement all these event’s, just those that you need to override and put your logic there, they are just sample for datasource method names) :

namespace LightSwitchApplication
{
public partial class EditableEmployeesGrid1
{
partial void gridAddAndEditNew_CanExecute(ref bool result)
{
// Write your code here.

}

partial void gridEditSelected_CanExecute(ref bool result)
{
// Write your code here.

}

partial void gridDeleteSelected_CanExecute(ref bool result)
{
// Write your code here.

}

partial void gridAddAndEditNew_Execute()
{
this.Employees.AddAndEditNew();
}

partial void gridEditSelected_Execute()
{
this.Employees.EditSelected();
}

partial void gridDeleteSelected_Execute()
{
this.Employees.DeleteSelected();
}
}
}

Please note, that CanExecute hanslers are auto generated also.

OK, so now we have code that was generated out of box, nice 🙂

But with this snippet :

Private Sub gridAddAndEditNew_Execute()

Dim newCustomer As Customer = Me.Customers.AddNew()

Me.Customers.SelectedItem = newCustomer

Me.OpenModalWindow("CustomerEditDialog")

End Sub

From aforementioned article (I mean this one : http://blogs.msdn.com/b/lightswitch/archive/2011/07/07/creating-a-custom-add-or-edit-dialog.aspx) we are able to do this :


partial void gridAddAndEditNew_Execute()
 {
 this.Employees.AddAndEditNew(e => { e.Surname += " some other surname text"; e.Name += " something added here..."; });
 }

partial void gridAddNew_Execute()
 {
 var emp = this.Employees.AddNew();
 emp.Name = "name";
 emp.Surname = "surname";
 this.Employees.SelectedItem = emp;
 this.Employees.EditSelected();
 }

As you can see I implemented two methods : AddAndEditNew and AddNew. Difference is, that :

AddAndEditNew will make work for you with creating new item and add it to selected item, but only one. And will also delete that item when you click on cancel on popup that will open. Also you can specify to post tweak your data only in anonymous lambda method, not to prefill it. When you are happy with that, use this one. You can access all fields of item, also those that you hide from user.

With AddNew you have to create new item and here you can prefill it and then manually open popup over selected item. New item fill be prefilled and user can modify fields. You could also create bulk of new items like this :


partial void AddMoreItemsMethod_Execute()
 {
 var itemsFromSomewhere = new List();

itemsFromSomewhere.Add(new Employee { Name = "name 1", Surname = "surname 1" });
 itemsFromSomewhere.Add(new Employee { Name = "name 2", Surname = "surname 2" });
 itemsFromSomewhere.Add(new Employee { Name = "name 3", Surname = "surname 3" });
 itemsFromSomewhere.Add(new Employee { Name = "name 4", Surname = "surname 4" });

foreach (var item in itemsFromSomewhere)
 {
 this.Employees.SelectedItem = item;
 }

this.Employees.EditSelected();
 }

Obviously, EditSelected will open popup only over last inserted item. But certainly, you can do this as well.

Please also note that with case where you disable Delete button on grid (in case customer want’s no delete workflow, you will have a problem, because you can’t delete new object/objects in SelectedItem collection and Save action on whole datasource will trigger insert to DB. With AddAndEditNew when user clicks on cancel, it will remove this new item from grid, but with AddNew you have a problem, new item stays.

 

So this is basically everything I found out. I hope this will be helpful. 🙂

Whole application to play with you can find here :

https://skydrive.live.com/redir.aspx?cid=78a5783de37d2ebe&resid=78A5783DE37D2EBE!1787&parid=78A5783DE37D2EBE!1779

and look for file NewItemPrepopulateLightswitch.zip

Microsoft Lightswitch grid controls – Modal Window picker, Auto Complete Box and small tweaks

LightSwitch is quite flexible when it comes to displaying data in grid. You can even use your own custom Silverlight controls, that you can build according to some rules, but when you need it, it’s there. Nice to feature, when all out-of-possibilities fail.

In this small post I will try to elaborate on built in controls and how to tweak them.

I will start with small sample project, that you can download if you want to dig deeper on you own pc.

Some good old grid in Lightswitch can look like this :

lightswitch grid in editor

Here you can see some sample data. Every node in Data Grid Row means it will be 1 row in a grid. You see icon and then name of each property like Name, Surname, etc. With small dropdown you can select type of control Lightswitch will use when displayed so for example when you need to display something read only, then you can select to display label.

lightswitch grid types of controls

Types that will Lightswitch display are dependent on type of property. When you have DateTime property, you will have more choices :

lightswitch grid types of controls datetime

When you need some column as read only you can use Date Time Viewer in this case.

OK, now comes the tweaking.

When you reference another table, then your screen can look like this :

lightswitch grid in editor another table reference

This is the default, but you can change it. Choosing type next to Country (in this case of course) will result in what you see when you see just grid. In this default case it will look like this :

lightswitch grid in editor default combo

But maybe you want to display a grid in cell of this main grid. OK, just change default to columns layout and you will have this :

lightswitch grid columns in grid

Your users like rows better? OK, here you go :

lightswitch grid rows in grid

Say you want a quite requested feature : you need combo box, but when you click on it, you need grid. OK, here we go :

Set country type to Auto Complete Box but change also underlying type to grid. The way it works in Lightswitch is that you can control what to see in grid by changing node on Data Grid Row level, but change in underlying level will change what you see once you click on down arrow of Auto Complete box. And this can be also table layout. This is how it looks like in editor :

lightswitch grid in editor combo with grid

This at runtime :

lightswitch grid in editor combo with grid runtime

OK, now to another common task with this grid, that will also affect something else. Say you want to display not Slovakia or Czech republic in the grid for selected item, but something else. How to set it? Well, “use the force Luke” :), but we will use model. Lightswitch is written so, it will mind order of properties when we created model. This order is preserved in auto generated window for adding, editing and removing items but also it will take first property and show it here. So once we change model (I moved Currenty to top) like this :

lightswitch model change

It will change also this :

lightswitch grid another property autocomplete

and this :

lightswitch add new country popup

So please be aware of that.

Last things that I would like to show you are modal windows.

Say you need a picker to choose from some another grid, you you can user a Modal Window Picker and in the picker you can have a grid (table layout) and it will look like this ion grid :

lightswitch picker in grid

and with open popup :

lightswitch picker popup

Or just plain old button that will open window properties of current record we want to edit in different controls. Picture text box with very long text. You can add button behind this column to open popup window that will have only one textbox, but that will be multiline and that will enable users to edit this long text more user friendly.

If you have any questions, feel free to ask, or mail me.

Solution can be downloaded here :

https://skydrive.live.com/redir.aspx?cid=78a5783de37d2ebe&resid=78A5783DE37D2EBE!1786&parid=78A5783DE37D2EBE!1779&authkey=!AE2rYVVr0I8FBww and look for ComboApplication.zip file.

Enjoy.

Don’t forget to build LightSwitch apps with Release configuration for customer

Today I learned small thing about deploying LightSwitch apps. Don’t forget to publish for customer with Release set on, because it seems that LighSwitch will publish also code that will show button Design Screen intended for developers to rearrange UI when debugging. This button will be available for everyone on deployed application. So app will look like this on every machine installed, and that isn’t the intention. 🙂

lightswitch design screen button

ReplaceSpecialCharactersLibrary – knižnica na odstránenie diakritiky zo stringu

Keďže som potreboval na jednom menšom projekte funkciu ktorá by sa hodila pre vytvorenie peknej URL z bežného názvu článku, rozhodol som sa túto už mnohokrát riešenú funkcionalitu zabaliť do jednej triedy, urobiť pár unit testov a hodiť na GitHub. Možností implementovať bolo viac, od Regexu, cez StringBuilder a nejaký vlastný zoznam znakov ktoré chceme nahradiť až po string.Normalize, ktorý som nakoniec použil, teda ehm našiel na webe. Celý projekt nájdete na tomto odkaze :

https://github.com/rostacik/ReplaceSpecialCharactersLibrary

Btw pri hľadaní som narazil na jeden celkom zaujímavý kus kódu, nech sa páči :

http://mynthon.net/howto/-/strip-accents-romove-national-characters-replace-diacritic-chars.txt

PS: viem, že je to absolútna blbôstka, ale poštval som na to PEX, urobil som pár sample testov a na NuGet to dávať samozrejme nebudem, je to vlastne len snippet, ale možno sa vám zíde, že stačí pridať referenciu a proste to funguje (teda dúfam 🙂 ). Ak niečo, píšte do komentov, rád podiskutujem ak som niečo urobil zle.

EDIT : Pridal som na základe chalanov z vyvojari.sk ešte rozšírenie o extension metódy a ich testy, takže stačí include knižnicu a použiť namespace a môžete si vybrať, či budete používať inštanciu triedy, alebo extension metódu na akomkoľvek string-u. Enjoy.