List Item Preview on Hover

Forums General discussion List Item Preview on Hover

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Alexander Bautz 2 weeks, 3 days ago.

  • Author
    Posts
  • #26847

    DerekH
    Participant

    Alexander,
    I have really enjoyed using the PreviewThis tool (List Item Preview on hover) on my default list webpart pages. I am now using it on a wikiPage where I have 3 webparts from the same list that filter to display a dashboard.

    My comment dialog works great but doesn’t recognize the “Currency” type.

      Can you please tell me what “types” we should use in this tool?

    The ones that work for me are “Text” and “User” but when I use “Currency” it does not work as expected. I’m guessing that I’m using the wrong “type”.

    I’m editing the “HTML Form Web Part” on the Wiki Page and am editing the field data section as follows:

    
    
    "fieldData":{ 
    "Approved":{"disp":{"default":"Approved"},"type":"Currency"},
    "Actuals":{"disp":{"default":"Actuals"},"type":"Currency"},
    "Remaining":{"disp":{"default":"Remaining"},"type":"Currency"}
    }

    (I’ve attached the image of the fields from within the dialog window and how they are displaying as “Currency”)

    Attachments:
  • #26915

    Alexander Bautz
    Keymaster

    Hi,
    Currency and number fields are not directly supported because they are stored in the DB as a plain number without the formatting set up in the list settings for that field. You can either add a calculated field to your list where you specify the correct output format and then use “type”:”calculated” or you can edit the PreviewItem.js file and add a new case in this part (around line 311):

    switch (config.fieldData[o.fin].type.toLowerCase()) {

    Add something like this:

    case "currency":
      var n = new Number(rVal);
      var o = {
        style: "currency",
        currency: "USD"
      }
      val = n.toLocaleString("en-US", o);
    break;

    Please note that this auto formatting does not work in Internet Explorer 10 or below. If you must support it you must find another method of formatting it.

    Alexander

  • #26941

    DerekH
    Participant

    Alexander,
    Thanks, the code worked for the number formatting, but for some reason the labels would not show up for the particular fields when editing the PreviewItem.js file (the labels all work for my other fields, just not the “currency” field).

    However, I went back to using a calculated column with this formula:

    =USDOLLAR([field],0) and set the configuration field type to "calculated"

    It now works as I wanted, adding the dollar sign and the commas for USD. Thanks for your help with both the code and the calculated column!

  • #26943

    Alexander Bautz
    Keymaster

    Thanks for the feedback – I’m glad you got it sorted out.

    Alexander

You must be logged in to reply to this topic.