How to cope without computed fields?

Question

Hi All. I have a simple scenario.

I have a CUSTOMER, who has a property that should be shown as a drop down list, say it's HAIR COLOUR.

When you go to the Customer Edit Details screen, you should see a drop down box/model details picker of all the hair colours to choose from.

HOWEVER, my app supports multiple languages. So The relationship goes

Customer -> HairColour <- HairColourTranslation

So the actual TEXT (red, blue etc) is on the Translation table. The HairColour table only has an ID (and any non-translated values) e.g. maybe the RGB value etc.

How can I display the TEXT in a drop down equivalent in the HTML client? I don't mind loading the text/translations values in to the screen somewhere, but I just don't know how to display them.

In SQL for example I would say 'get the text for language en-GB where id=haircolourID'

Any ideas?

On the Silverlight client, I could add a computed field on the HairColour table that went and got the English Text, for example.

More on this way of translating here: http://social.msdn.microsoft.com/Forums/en-US/lightswitch/thread/692e097c-c53c-44b3-ab96-7603ca4d472d/#692e097c-c53c-44b3-ab96-7603ca4d472d 

Answer 1

I think thta a RIA service would be the perfect mechanism for achieving this. I use this method for a slighty different scenario, but still for text susbtitution.

Also, you please try to use the Insert Hyperlink button when including links in a reply?

It makes it easier for people to know what they clicking on, rather than long, unreadable text.

Thanks.

---

Yann - LightSwitch Central - Click here for FREE Themes, Controls, Types and Commands

Please click "Mark as Answer" if a reply answers your question. Please click "Vote as Helpful" , if you find a reply helpful.

By doing this you'll help others to find answers faster.

Answer 2

Hi ADudley123,

Our drop down box / modal detail pickers are very customizable. By default we add the Summary Control to it, which in your case shows the HairColour ID. In order to show the HairColourTranslation you have to change the control to a Custom Control. Writing a Custom Control has become a lot easier in the HTML Client. Basically you select Edit Post Render Code and in there execute the query to get the correct HairColourTranslation using our msls JavaScript APIs. Then you append the result as text to the DOM tree using jQuery selectors. There is a great article on writing Custom Controls in our blog:

http://blogs.msdn.com/b/lightswitch/archive/2012/12/06/custom-controls-and-data-binding-in-the-lightswitch-html-client-joe-binder.aspx

Let me know if you need additional help,

Heinrich

Answer 3

There is a great article on writing Custom Controls in our (the LightSwitch team) blog:

Custom Controls and Data Binding in the LightSwitch HTML Client (I just added this as a clickable link, with text)

@Heinrich

Are you saying that in the HTML Client that it would not be possible to modify the Summary property of the HairColor table to be a computed property that displayed HairColor.HairColorTranslation.Name?

---

Yann - LightSwitch Central - Click here for FREE Themes, Controls, Types and Commands

Please click "Mark as Answer" if a reply answers your question. Please click "Vote as Helpful" , if you find a reply helpful.

By doing this you'll help others to find answers faster.

Answer 4

Hi Heinrich

thank you for your reply, yes this is what I was hoping.

I must say the ability to just add your own control there and then is fantastic. Complete with formatting etc.

However I think my issue is in not having a clue about JavaScript!

So It's a bit like I need to do the following, but obviously this won't work!

The current drop down box just shows the ID number.

On the screen, load additional data from a different query, e.g. HairColourTranslations, which has ID, LangaugeId and Title for now.

In the Row Render Event

myapp.CustomerDetail.HairColourTemplate_render = function (element, contentItem) {

//obviously this part wont work, but this is what I need to do in javascript
var title = (From Screen.HairColourTranslations
Where HairColourTranslations.Id = contentItem.Value.Id
And HairColourTranslations.LanguageId = screen.CurrentUserProfile.LangaugeId
Select Title).First()

var titleElement = $("<div>" + title + "</div>");
    titleElement.appendTo($(element));

};

Any help with the javascript would be appreciated. I feel like a complete noob at this :(

Answer 5

Hi Adam,

Sorry for the late reply again. You are on the right path.

1. Create a new query in your HairColourTranslations table

2. Add two parameters to the query, one for the HairColour.Id and one for the Language.Id

3. Write the following code

myapp.CustomerDetail.HairColourTemplate_render = function (element, contentItem) {


    var div = $('<div />');
    if (contentItem.value) {
        var translated = myapp.activeDataWorkspace.ApplicationData.Query1(contentItem.value.Id, screen.CurrentUserProfile.LangaugeId).execute().then(function (value) {
            if (value.results.length > 0) {
                div.text(value.results[0].Name)
            } else {
                div.text(contentItem.value.Id);
            }
        });
    }

    div.appendTo($(element));
};

Let me know if that helps

Heinrich

Answer 6

That looks like the ticket, thanks for getting back to me, really appreciate it. I will give it a try later today.

Answer 7

Hi Robert, so perhaps I'm missing something. I keep running into 'undefined' (I assume this is Java Script's equivalent of null/nothing)

Fortunately it seems the Immediate Window still works a treat even when debugging JavaScript :)

So I get:

 ? myapp{...}  
  [Methods]: {...}    [prototype]: {...}

But myapp.activeDataWorkspace gives:

? myapp.activeDataWorkspace
undefined

Actually, looking at the exception, the Immediate Window and the Exception don't line up! the Exception is actually ApplicationData is undefined. So myapp.activeDataWorkspace must be ok for it to get that far. (Unable to get property 'ApplicationData' of undefined or null reference)

Also, accessing screen.CurrentUserProfile gives undefined. I thought this was due to the screen not actually 'needing' this data, so I did add a 'other screen data' for the language id, to ensure the query is executing, but still it's undefined.

contentItem.value.Id does work as expected.

So my real problem is accessing the queries etc from javascript, of which I can't really find anything online at the moment.

Again, any help appreciated.

Answer 8

Hi Adam,

Sorry, I was building the sample on some internal build. The correct name should be myapp.dataWorkspace instead of myapp.activeDataWorkspace.

Heinrich

Answer 9

Hi Heinrich, sorry about the delay, Christmas got in the way!

Thank you for the reply, right, so I've got a

myapp.dataWorkspace

but there is no ApplicationData method on that. There is a <DataSourceName>

So using that I've got access to queries and data tables.

So now it is, indeed working.

Thank you for your help. For others looking, this is what it looks like:

myapp.ScreenName.DropDownNameTemplate_render = function (element, contentItem) {
    // Write code here.
    //var languageId = screen.CurrentUserProfile.LangaugeId;
    var div = $('<div />');
    if (contentItem.value) {
        var translated = myapp.dataWorkspace.DataSourceName.QueryName(contentItem.value.Id, 'xx-XX').execute().then(function (value) {
            if (value.results.length > 0) {
                div.text(value.results[0].Title)
            } else {
                div.text(contentItem.value.Id);
            }
        });
    }
    div.appendTo($(element));
};

This works perfeclty for CHANGING the value (i.e. when you double click the drop down on the details page and a model window opens to change the value)

contentItem.Value is null when the page first loads though....

Answer 10

Are you saying that in the HTML Client that it would not be possible to modify the Summary property of the HairColor table to be a computed property that displayed HairColor.HairColorTranslation.Name?

---

Yann, computed properties are not available at all in the HTML client...yet.  MS is still working on the dependency chaining javascript, I guess.  Would be nice to get this added ASAP or at least provide an example of using knockout http://knockoutjs.com/documentation/computedObservables.html to acheive computed props in HTML client.