0

I'm using remote objects for this page.

I'm trying to format the field Invoice_Amount__c to contain commas which will separate the numbers and format the Invoice_Date__c field to mm/dd/yyyy.

I have an image below of what it looks like.

enter image description here

The 2 fields that I want to format are here

        { "data": "_props.Invoice_Amount__c",
            "defaultContent": '' },
        { "data": "_props.Invoice_Date__c",
            "defaultContent": '' },

My entire code is here

    j$ = jQuery.noConflict();
var profile = ('{!$Profile.Name}');
j$(document).ready( function () {
    var soTable = j$('[id$="salesopstable"]').DataTable({
    "paging": false,
    "ordering": false,
    "info": false,
    "bFilter": false,
    "oLanguage": {
    "sEmptyTable": "There are no requests to approve"
    },
        // Use the Remote Object retrieve method to get a list of Invoices
        "ajax": function(data, callback, settings) {
            var subinv = new SObjectModel.Invoice();
            subinv.retrieve({ where: {SalesOps_Change_Requests_Count__c: {gt: 0}}, limit: 100}, function(err, records){
                if(err) alert(err.message);
                else {
                    callback({'data': records});
                };
            });
        },
        //this field is for hyperlinking to the Subscription
        "columnDefs": [{
            "targets": 1,
            "render": function ( data, type, full, meta ){
            return '<a href="/'+full._props.Subscription__c+'" target="_blank">' + full._props.Subscription_Name__c + '</a>';
            }
            }],
        // Specify our columns. The first column is used to control expanding and collapsing to see changes.
        "columns": [
            { "class": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": '',
                width: "8%" },
            { "data": "_props.Name",
                "defaultContent": '' },
            { "data": "_props.Currency_Code_Name__c",
                "defaultContent": '' },
            { "data": "_props.Invoice_Amount__c",
                "defaultContent": '' },
            { "data": "_props.Invoice_Date__c",
                "defaultContent": '' },
            { "data": "_props.ToEmails__c",
                "defaultContent": '' },
            { "data": "_props.CcEmails__c",
                "defaultContent": '' },
            { "data": "_props.Invoice_Details__c",
                "defaultContent": '' },
            { "data": "_props.Invoice_Type__c",
                "defaultContent": '' },
            { "data": "_props.Client_Firm__c",
                "defaultContent": '' },
            { "data": "_props.Client_Firm_ID__c",
                "defaultContent": '' },
            { "data": "_props.On_Hold__c",
                "defaultContent": '' }

        ],
        order: [[1, 'asc']],
    } );

Any assistance is greatly appreciated!

Happy New Year to all!

Louis M.

7
  • Why are you using remoting in the first place? Are you sure it's the right tool for the job?
    – Adrian Larson
    Jan 13, 2017 at 16:54
  • @AdrianLarson I didn't attach the code for the remote objects because I didn't think it was necessary. The page is working perfectly and has gone through 1 month beta testing. The feedback was to format the Date and Amount so that it's easier to read.
    – Louis HM
    Jan 13, 2017 at 17:22
  • @Adrian Larson - I got the idea from Daniel's blog --> verticalcoder.com/2014/11/23/datatables-in-visualforce-part-2 my code is pretty much exactly the same as his.
    – Louis HM
    Jan 13, 2017 at 17:28
  • I think this is what I have to do but I don't know how to give _props.Invoice_Date an id to target it in a function var formattedDate = new Date("yourUnformattedOriginalDate");, var d = formattedDate.getDate(); var m = formattedDate.getMonth(); m += 1; // JavaScript months are 0-11 var y = formattedDate.getFullYear(); $("#txtDate").val(d + "." + m + "." + y);
    – Louis HM
    Jan 13, 2017 at 19:58
  • @AdrianLarson - Do you know how I can add or format the syntax for the date field to get an ID for it when I inspect element on that field? In other words, how would I do the syntax for this code to give it an id --> { "data": "_props.Invoice_Date__c", "defaultContent": '' },
    – Louis HM
    Jan 13, 2017 at 20:04

1 Answer 1

2

I'm using the following to format my last column in US currency:

columnDefs: [ {
   'targets': -1, //'_all',
   'render':  function ( data, type, full, meta ) {
       return '$ ' + Number(data).toFixed(2).replace(/\B(?=(?=\d*\.)(\d{3})+(?!\d))/g, ',');
    }
} ]

You can try find the format string you want, or try to implement another popular javascript library Moments, or try the following: data.getMonth() + '/' + data.getDate() + '/' + data.getFullYear()

Try if this columnDefs will work for you, assuming columns 3 and 4 are your Amount and Date columns:

"columnDefs": [{
            "targets": 1,
            "render": function ( data, type, full, meta ){
            return '<a href="/'+full._props.Subscription__c+'" target="_blank">' + full._props.Subscription_Name__c + '</a>';
            },
            "targets": 2,
            "render": function ( data, type, full, meta ){
            return '$ ' + Number(data).toFixed(2).replace(/\B(?=(?=\d*\.)(\d{3})+(?!\d))/g, ',');
            },
            "targets": 3,
            "render": function ( data, type, full, meta ){
            return data.getMonth() + '/' + data.getDate() + '/' +  data.getFullYear();
            }
            }]
1
  • you saved my ass, I had to update the syntax a bit because you were missing a couple of curly brackets, but other than that the return... WORKED Brotha!!!!!!!! THANKS A TON!!!!!!!
    – Louis HM
    Jan 17, 2017 at 15:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .