locked
Formatted Cost Field in LightSwitch HTML5 Client RRS feed

  • Question

  • Hi guys, running into an issue with what seems to be a relatively simple issue with my HTML5 LightSwitch app.

    Essentially, I have a User. The User screen has a Tile List of Purchases. A Purchase has a quantity, a cost, and a type.

    What's the easiest way to get a computed property working that would, in the tile list, display:

    Row1: Quantity + " " + Type " purchased at $" + Cost + "per unit"
    Row2: Purchase Date

    I tried using a Computed Property called FormattedPurchase on the Server side, but I can't access that field from the Screen Designer for my app. So, I'm kind of stuck trying to figure out what exactly I should try next. I have minimal JavaScript experience, but I've tried following a couple tutorials, none of which really seemed to work. I can't seem to get the value after I find the content item from ViewUSER.created (because I have a lot of different Purchases for a given User, maybe?).

    Can anyone help me format this Tile List? I'd far prefer using a calculated field if possible.

    Thanks!

    Thursday, November 13, 2014 9:06 PM

Answers

  • Hi, Matt!

    I think we need to change the way that the AddEditScreen is called.

    Add a command bar button to your screen with the following code:

    myapp.TableCustomization_02.AddNewProduct_execute = function (screen) {

    // AddEditProduct is my screen for add and edit products myapp.showAddEditProduct(null, { beforeShown: function (addEditScreen) { // Create new Product entity var newProduct = new myapp.Product();

    // Add this entity as paramater for AddEditProduct screen addEditScreen.Product = newProduct; }, afterClosed: function (addEditScreen, navigationAction) { if (navigationAction === msls.NavigateBackAction.commit) { // reload the Products screen.Products.load(); } } }); };

    I hope it helps you.

    Best regards,


    Ciro





    • Edited by Oric.CQ Tuesday, November 25, 2014 11:59 PM
    • Marked as answer by Angie Xu Friday, November 28, 2014 2:19 AM
    Tuesday, November 25, 2014 11:55 PM

All replies

  • Hi, Matt!

    With HTML Client you can't use calculated field.

    Try the following:

    1- Add a new Group in Table Row

    2- Convert that Group in Custom Control

    3- Click the link Edit Render Code and add the code:

    myapp.TableCustomization_02.Group_render = function (element, contentItem) {
        // Write code here.
        var purchaseInfoColumn = contentItem.value.ProductName + '<br>' +
                                 'Stock Value: $ ' + (contentItem.value.UnitsInStock * contentItem.value.UnitPrice).toFixed(2);
    
        element.innerHTML = purchaseInfoColumn
    };

    You should get a result like:

    I hope it helps you.

    Best regards,


    Ciro


    • Edited by Oric.CQ Friday, November 14, 2014 4:55 PM
    Friday, November 14, 2014 4:55 PM
  • Hi Ciro,

    Your solution works in most circumstances! However, I run into an issue when I'm trying to add a new product; it doesn't seem to auto-refresh? So my tile list looks good for all entries it already had, but if I'm adding a new one, it shows up as:

    undefined
    $undefined

    Until I manually refresh the page. Is there something I can do about that?

    Thanks,

    Matt

    Monday, November 17, 2014 7:15 PM
  • Hi Matt, try to change the code to:

    myapp.TableCustomization_02.Group_render = function (element, contentItem) {
        // Write code here.
    
    contentItem.dataBind('value',function(newValue) {
        var purchaseInfoColumn = newValue.ProductName + '<br>' + 
      'Stock Value: $ ' + (newValue.UnitsInStock * newValue.UnitPrice).toFixed(2);
    
        element.innerHTML = purchaseInfoColumn
    };
    };

    Every time the row's value change the code above will run.

    Best regards,


    Ciro

    Monday, November 17, 2014 10:23 PM
  • Hi Ciro,

    Still running into pretty much the same issue as before; it doesn't work unless I manually refresh the page (ie go back to home screen and navigate back to the screen, at which point it updates). Any other ideas?

    EDIT: Based on debugging, I notice that this code doesn't run when I hit the 'Save' button on my screen to Add/Edit this Product (which then should populate my list with the updated formatted cost, but the code doesn't get called). Any clue why this might be happening?

    Thanks,
    Matt


    • Edited by Matt Gorelik Tuesday, November 18, 2014 11:10 PM Additional info
    Tuesday, November 18, 2014 11:05 PM
  • Still stuck on this same issue. It's not updating like it should. Maybe I could have hitting the 'Save' button on the 'Add / Edit ' screen refresh the parent screen? But I'm not sure how to do that either.
    Tuesday, November 25, 2014 10:46 PM
  • Hi, Matt!

    I think we need to change the way that the AddEditScreen is called.

    Add a command bar button to your screen with the following code:

    myapp.TableCustomization_02.AddNewProduct_execute = function (screen) {

    // AddEditProduct is my screen for add and edit products myapp.showAddEditProduct(null, { beforeShown: function (addEditScreen) { // Create new Product entity var newProduct = new myapp.Product();

    // Add this entity as paramater for AddEditProduct screen addEditScreen.Product = newProduct; }, afterClosed: function (addEditScreen, navigationAction) { if (navigationAction === msls.NavigateBackAction.commit) { // reload the Products screen.Products.load(); } } }); };

    I hope it helps you.

    Best regards,


    Ciro





    • Edited by Oric.CQ Tuesday, November 25, 2014 11:59 PM
    • Marked as answer by Angie Xu Friday, November 28, 2014 2:19 AM
    Tuesday, November 25, 2014 11:55 PM
  • Thanks Ciro! Solution worked perfectly, my screen now refreshes every time just as I wanted.
    Friday, December 5, 2014 7:08 PM