Search code examples
visual-studio-lightswitchlightswitch-2013

Lightswitch HTML - changing currency depending on field within a table


I have the following scenario:

I have a table called OrderLines, which contains information such as

  • Part Name
  • List Price
  • Currency

Now from this information, I want to be able to change the text in the table view to resemble to Currency. Currently by default I can determine 1 currency, which I have stated as GBP, so when Lightswitch sees the currency value, it adds in GBP.

I want to be able to change this!!

on the "Edit PostRender Code" block, is it possible to use the contentItem.dataBind function in order to change this, based upon its currency field associated to that particular item?

Thankyou for any help, and hopefully this is possible.. (these should be in dollars based on the Currency file associated to this line within the table)

enter image description here

as you can see above, the OrderlIne table is in a table view on the "Orders" screen enter image description here

code used:

myapp.ViewProjectOrder.ListPrice_postRender = function (element, contentItem) {
    contentItem.dataBind("value", function (value) {
        if (value) {
            if (contentItem.screen.OrderLines.Currency == "GBP") {
                $(element).text("£ " + value);
            }
            else if (contentItem.screen.OrderLines.Currency == "CAD") {
                $(element).text("$ " + value);
            }
        }
    });
};

Lightswitch sees the ListPrice as a decimal currently, as if I set it as Currency, it always displays the currency prefix I set, Thats why there are pound symbols in the table above, I have since changed this to decimal to see it that works with no luck: enter image description here

if i step into the code it doesnt find a value for the currency using the code:

enter image description here


Solution

  • I set up a similar example and used a double for the ListPrice, and a string for the currency. I believe this is a safer approach to use than using the built in Money type.

    The code below is for the View screen, it can be adjusted slightly to work on the Browse screen. You bind to the value of the ListPrice value changing and set the appropriate currency symbol. In general, I'd recommend having a more general function return the symbol for the currency's ISO code. You'd also probably want to set up a similar binding for when the currency is changed.

    myapp.ViewProjectOrder.ListPrice_postRender = function (element, contentItem) {
        contentItem.dataBind("value", function (value) {
            if (value) {
                if ( contentItem.screen.ProjectOrder.Currency == "GBP" ) {
                    $(element).text("£ " + value);
                }
            }
        });
    };
    

    Assuming a more complicated case of a Project item that can contain more than one OrderLine, to display the order line details when viewing the Project's collection of OrderLines, you would need to alter the postRender code for the collection's row template. The following code should give you a starting point to format the values:

    myapp.ViewProject.rows_postRender = function (element, contentItem) {
        contentItem.dataBind("value", function (value) {
            if (value) {
                var tags = element.children;
                var searchText = contentItem.value.ListPrice;
    
                for (var i = 0; i < tags.length; i++) {
                    if (tags[i].textContent == searchText) {
    
                        if (contentItem.value.Currency == "GBP") {
                            tags[i].textContent = "£ " + tags[i].textContent;
                        }
                        else if (contentItem.value.Currency == "USD") {
                            tags[i].textContent = "$ " + tags[i].textContent;
                        }
                        break;
                    }
                }
            }
        });
    };