locked
HTML Client: How to set the value of a computed property based on another computed property RRS feed

  • Question

  • Before asking my question, I make a simple example to make my question clear.

    In my LightSwitch HTML Client, I have a table with one column: "amount"

    I made a computed property, "amountPlusTax" and I set its value as follow,

    myapp.BrowseTransactions.amountPlusTax_postRender = function (element, contentItem) {
    	contentItem.dataBind("data.amount", function () {
    		$(element).text(parseFloat(contentItem.data.amount) * 1.05);
    	});
     };

    As you see, amountPlusTax = amount * 1.05

    The problem I have I want to make another computed property whose value depends on the value of "amountPlusTax" computed property. 
    Like, amountPlusTaxPlusInterest = amountPlusTax * 1.03

    How is it possible?

    This doesn't work:

    myapp.BrowseTransactions.amountPlusTaxPlusInterest_postRender = function (element, contentItem) {
    	$(element).text(parseFloat(contentItem.screen.amountPlusTax) * 1.03);
    };




    • Edited by Mertony Wednesday, April 22, 2015 7:19 PM
    Wednesday, April 22, 2015 7:07 PM

All replies

  •                               

    It's not good practice to set the value of a computed property based on another computed property, you just need create another computed property: amountPlusTaxPlusInterest =  amount * 1.05* 1.03

    Tuesday, May 12, 2015 7:20 AM
  • Mertony,

    Sorry for highjacking your prior post with javascript theory.  I'm glad to see you're using dataBind and you're on the right track.

    The reason your code isn't working is because of timing.  Your second _postRender fires before the the dataBind callback does the calculation in your first code.  This is exactly why dataBind is so helpful when it comes to the async issues.

    Try this code:

    myapp.BrowseTransactions.amountPlusTax_postRender = function (element, contentItem) {
    	contentItem.dataBind("data.amount", function (newValue) {
    		$(element).text(parseFloat(newValue) * 1.05);
    	});
     };
    
    myapp.BrowseTransactions.amountPlusTaxPlusInterest_postRender = function (element, contentItem) {
    	contentItem.dataBind("data.amount", function (newValue) {
    		$(element).text(parseFloat(newValue) * 1.05 * 1.03);
    	});
     };

    Now anytime data.amount changes, both controls will recomputed their values.

    HTH,

    Josh

    Tuesday, May 12, 2015 2:27 PM

  • myapp.BrowseTransactions.amountPlusTax_postRender = function (element, contentItem) {
    	contentItem.dataBind("data.amount", function (newValue) {
    		$(element).text(parseFloat(newValue) * 1.05);
    	});
     };
    
    myapp.BrowseTransactions.amountPlusTaxPlusInterest_postRender = function (element, contentItem) {
    	contentItem.dataBind("data.amount", function (newValue) {
    		$(element).text(parseFloat(newValue) * 1.05 * 1.03);
    	});
     };

    How does this code accomplish amountPlusTaxPlusInterest getting the value from amountPlusTax, which is what the OP is asking?

    BTW, the other post was a generic question and another poster asked about theory, which is completely different from this post, so no apology necessary.  But, apologizing for suggesting the incorrect usage of private properties would be nice though.

    Tuesday, May 12, 2015 4:36 PM
  • Allen, how does your post accomplish anything?    We'll have to agree to disagree about the other one.  Meantime let's not highjack this one too. 

    PS...If you still want to debate, I'll see over at the other thread.  Otherwise, thanks in advance for getting get off my back. ;-)

    Have a great day!


    • Edited by joshbooker Tuesday, May 12, 2015 4:48 PM ps..
    Tuesday, May 12, 2015 4:46 PM
  • Allen, how does your post accomplish anything? 

    It helps the OP know not to waste time trying out the code as it won't work.
    Tuesday, May 12, 2015 5:02 PM
  • Mertony,

    The above code works.  Let us know if you have any trouble.

    Also, I noticed you're working on a Browse Screen.  In that case, screen properties don't really help since they don't have a distinct value for every row of the Transaction collection table.

    Additionally, since Browse screens are typically read-only, the data values don't change after they are rendered so dataBind isn't really needed either. 

    For those reasons you may choose to use two custom controls bound to screen like so:

    myapp.BrowseTransactions.amountPlusTax_render = function (element, contentItem) {
        // Write code here.
        var value = parseFloat(contentItem.data.Amount) * 1.05;
        $(element).append('<div class="msls-text"><span class="id-element">' + value + '</span></div>');
    };
    
    myapp.BrowseTransactions.amountPlusTaxPlusInterest_render = function (element, contentItem) {
        // Write code here.
        var value = parseFloat(contentItem.data.Amount) * 1.05 * 1.03;
        $(element).append('<div class="msls-text"><span class="id-element">' + value + '</span></div>');
    };

    Alternatively, you could do Computed Properties like so:

    http://joshuabooker.com/Blog/Post/15/HTML-Client-Computed-Properties

    With this method the properties will indeed be distinctly computed and exist as values in the screen.data on every row.

    HTH,

    Josh

    Tuesday, May 12, 2015 11:44 PM