I'm tyring to develop Visualforce page that leverages datatables and ajax to render a table with data passed from a controller using @RemoteAction. The folllowing is the core code for the datatable:

        var OrderNumber = {!OrderNumber};
        var OrderNumberString = OrderNumber.toString();
                    
        j$ = jQuery.noConflict();
        j$(document).ready( function () {
                
            var invoiceTable = j$('[id$="invoicetable"]').DataTable({
                "language": {
                 "loadingRecords": "",
                 "emptyTable": "No data available"
                  },
                
                // Get Invoice Items associated with the Order in question.
                "ajax": function(data, callback, settings){ 
                     Order_BillingIntCtrlExt.getInvoiceItems(OrderNumberString,function(err,records){
                         if(err) alert(err.message);
                     else{
                         callback({'data': records});
                         }
                     }); 
                 },     
                    
                // Specify our columns. The first column is used to control expanding and collapsing.
                "columns": [
                    { "class": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": '',
                        width: "8%",
                        },                  
                        
                    {"data": "_props.Invoice_Date__c",
                        "defaultContent": '' },
                    {sClass: "alignRight", "data": "_props.formattedInvoiceMerchandiseAmount",
                        "defaultContent": '' },
                    {sClass: "alignRight", "data": "_props.formattedInvoiceHandlingAmount",
                        "defaultContent": '' },
                    {sClass: "alignRight", "data": "_props.formattedInvoiceFreightAmount",
                        "defaultContent": '' },
                    {sClass: "alignRight", "data": "_props.formattedInvoiceAddtionalChargeAmount",
                        "defaultContent": '' },
                    {sClass: "alignRight", "data": "_props.formattedInvoiceAddtionalFreightAmount",
                        "defaultContent": '' },
                    {sClass: "alignRight", "data": "_props.formattedInvoiceTaxAmount",
                        "defaultContent": '' },
                    {sClass: "alignRight", "data": "_props.formattedInvoiceGSTAmount",
                        "defaultContent": '' },    
                    {sClass: "alignRight", "data": "_props.formattedInvoicePSTAmount",
                        "defaultContent": '' },
                    //{sClass: "alignRight", "data": "_props.formattedInvoiceDiscountAmount",
                    //    "defaultContent": '' },                                    
                    {sClass: "alignRight", "data": "_props.formattedInvoiceTotal",
                        "defaultContent": '' },
                    //Hide the childData column. It is still searchable
                    {"data": "_props.childData",
                        "defaultContent": '', "visible": false },                                 
                    ],
                order: [[1, 'asc']],
            } );

do other stuff with table...

The following is my @RemoteAction method on my controller:

 @RemoteAction
  global static CW_Invoice__x[] getInvoiceItems(string OrderNumber){
    CW_Invoice__x[] cwInv =  CWConnection.getCWInvoiceAllFields(OrderNumber);
    System.debug('CW Invoices Size: ' + cwInv.size());
  return cwInv;  
  }

When I run this code the table renders with no data and I get the following error in my console:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

I'm also receiving errors relating to the returned data being undefined... It appears as though the datatable is rendering without waiting for the returned data.

Any pointers much appreciated?



 

Hi,

I am currently leveraging Remote Objects to populate a javascript datatable in my VF page. The following is the shell code for the table:


j$ = jQuery.noConflict();
j$(document).ready( function () {
    var invoiceTable = j$('[id$="invoicetable"]').DataTable({
        "language": {
        "loadingRecords": "",
        "emptyTable": "No data available"
         },
 
        // Use the Remote Object retrieve method to get a list of Invoice Payments associated with the Order in question.
        "ajax": function(data, callback, settings) {
            var invoiceData = new SObjectModel.CW_Invoice__x(); //might need offset on limit
            invoiceData.retrieve({where: {Order_Number__c: {eq: "{!OrderNumber}"}}, limit: 100}, function(err, records){      
                if(err) alert(err.message);
                else if (records.length != 0){
 
                                //process records into dataItems
 
                        callback({'data': dataItems});     
                        };
 
                });                                                            
        },
 
        // Specify our columns. The first column is used to control expanding and collapsing.
        "columns": [
            { "class": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": '',
                width: "8%",
                },                 
 
            {"data": "_props.Invoice_Date__c",
                "defaultContent": '' },
            {sClass: "alignRight", "data": ".attribA",
                "defaultContent": '' },
            {sClass: "alignRight", "data": ".attribB",
                "defaultContent": '' },
            {sClass: "alignRight", "data": ".attribC",
                "defaultContent": '' },                            
            ],
        order: [[1, 'asc']],
    } );
...code to handle expanding and collapsing, etc.

I need to bring back more than 100 rows so now I want to use a server side @RemoteAction method in the controller to return all records. The following function in my VisualForce page successfully pulls back the relevant data in javascript friendly format: 

function getInvItems(OrderNumberString){ 
            Order_BillingIntCtrlExt.getInvoiceItems(OrderNumberString,handleInvoiceItems); 
            } 
function handleInvoiceItems(result, event) { 
           if(event.type == 'exception') { 
           alert(event.message); 
          } else { 
         records = result; //records has already been declared as a global variable
} };

I was hoping to update my datatable code to call the above function (as opposed to the remote object retrieve) as follows:

 "ajax": function(data, callback, settings) {
                getInvItems(OrderNumberString); //records has already been declared as a global variable
                if (records.length != 0){
..etc.


But it seems as though the javascript is moving forward without waiting for the getInvItems function to return values - I get an error saying that it can't return the length of underfined - referring to records.length.

I'm a javscript neophyte so any guidance is very much appreciated.

Thanks,

Hi,

I'm using the following VF to display a number of fields in two columns on a page layout:

<apex:page standardController="CW_Order_Line__x" extensions="OrderLine_ShipToInfoCtrlExt" readOnly="true">
<apex:pageBlock >
<apex:pageBlockSection columns="2">
<div class="row">
<div class="col-md-6">
<apex:outputField label="Name" value="{!shipToInfo.Name__c}"/>
<apex:outputField label="Address" value="{!shipToInfo.Ship_to_Address__c}"/>
</div>
<div class="col-md-6">
<apex:outputField label="Day Phone" value="{!shipToInfo.Ship_to_Day_Phone__c}"/>
<apex:outputField label="Night Phone" value="{!shipToInfo.Ship_to_Night_Phone__c}"/>
<apex:outputField label="Email" value="{!shipToInfo.Ship_to_Email__c}"/> </div>
</div>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

I am getting the data displayed in two columns but the fields are being rendered aphabetically rather than as specified in the code above.

What I'm getting is:

Column 1: Address, Day Phone, Email
Column 2: Name, Night Phone

What I want is:

Column 1: Name, Address
Column 2: Day Phone, Night Phone, Email

Thanks in advance!

Hi,

I currently have a custom lightning connect adapter that validates, syncs and generate an external object for a particular table in my datasource. Is it possible to have the same connector hit the same datasource and generate multiple external objects for multiple tables? I'm curious to see how this would look from coding perspective. I'm currently referencing the following:

https://developer.salesforce.com/blogs/engineering/2015/05/introducing-lightning-connect-custom-adapters.html

Thanks!

In my controller code I have the following list of objects generated from a deserialized JSON string:

(InventoryInfo:[locationId=89, skuNxtOrderDate=, skuQty=266, skuQtyOnOrder=], InventoryInfo:[locationId=95, skuNxtOrderDate=2015-08-19, skuQty=0, skuQtyOnOrder=0], InventoryInfo:[locationId=96, skuNxtOrderDate=2015-08-19, skuQty=0, skuQtyOnOrder=0], InventoryInfo:[locationId=97, skuNxtOrderDate=2015-08-19, skuQty=0, skuQtyOnOrder=0], InventoryInfo:[locationId=98, skuNxtOrderDate=2015-08-19, skuQty=0, skuQtyOnOrder=0])

In my controller code I can access any element by giving the row number and the element name, e.g., InventoryInfo[0].locationId returns 89 as the value.

Once I pass the above through to my VF page I can't seem to access the elements in the same manner:

<table id="inventorytable" class="display" >  
            <thead>
                <tr>
                    <th>Warehouse</th>
                    <th>On Hand</th>
                    <th>On Order</th>
                    <th>Next PO Date</th>
                    <th>Next Expected Quantity</th>
                    </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!inventoryInfoList}" var="inventoryInfo">                
                    <tr>                       
                       <td>{!inventoryInfo.locationId}</td>
                       <td>{!inventoryItem.skuQty}</td>
                        <td>{!inventoryItem.skuQtyOnOrder}</td>
                        <td>{!inventoryItem.skuNxtOrderDate}</td>
                    </tr>
                </apex:repeat>
            </tbody> 
        </table>

When I attempt to access {!inventoryItem.locationId} (similar to how I had accessed on the controller side) I get an unknown property error.  If try to access {!InventoryItem[0]} it returns the first inventory item row with all the attributes such as locationId, skuQty, etc. However, I need to access these atrtributes individually and I'm not sure how to do so.

Thanks in advance for any pointers!





 

Hi,

I'm trying to figure out a way to dedupe JSON arrays based on the _prop.Invoice_Number__c value returned by a Remote Object retrieve. Please see attached screenshot of the JSON as viewed through a JSON editor to see the structure of the array.

I played around with lodash _uniq but with no success. Any pointers would be much appreciated.

Thanks!!

Hi,

I'm using the following VF to display a number of fields in two columns on a page layout:

<apex:page standardController="CW_Order_Line__x" extensions="OrderLine_ShipToInfoCtrlExt" readOnly="true">
<apex:pageBlock >
<apex:pageBlockSection columns="2">
<div class="row">
<div class="col-md-6">
<apex:outputField label="Name" value="{!shipToInfo.Name__c}"/>
<apex:outputField label="Address" value="{!shipToInfo.Ship_to_Address__c}"/>
</div>
<div class="col-md-6">
<apex:outputField label="Day Phone" value="{!shipToInfo.Ship_to_Day_Phone__c}"/>
<apex:outputField label="Night Phone" value="{!shipToInfo.Ship_to_Night_Phone__c}"/>
<apex:outputField label="Email" value="{!shipToInfo.Ship_to_Email__c}"/> </div>
</div>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>

I am getting the data displayed in two columns but the fields are being rendered aphabetically rather than as specified in the code above.

What I'm getting is:

Column 1: Address, Day Phone, Email
Column 2: Name, Night Phone

What I want is:

Column 1: Name, Address
Column 2: Day Phone, Night Phone, Email

Thanks in advance!

In my controller code I have the following list of objects generated from a deserialized JSON string:

(InventoryInfo:[locationId=89, skuNxtOrderDate=, skuQty=266, skuQtyOnOrder=], InventoryInfo:[locationId=95, skuNxtOrderDate=2015-08-19, skuQty=0, skuQtyOnOrder=0], InventoryInfo:[locationId=96, skuNxtOrderDate=2015-08-19, skuQty=0, skuQtyOnOrder=0], InventoryInfo:[locationId=97, skuNxtOrderDate=2015-08-19, skuQty=0, skuQtyOnOrder=0], InventoryInfo:[locationId=98, skuNxtOrderDate=2015-08-19, skuQty=0, skuQtyOnOrder=0])

In my controller code I can access any element by giving the row number and the element name, e.g., InventoryInfo[0].locationId returns 89 as the value.

Once I pass the above through to my VF page I can't seem to access the elements in the same manner:

<table id="inventorytable" class="display" >  
            <thead>
                <tr>
                    <th>Warehouse</th>
                    <th>On Hand</th>
                    <th>On Order</th>
                    <th>Next PO Date</th>
                    <th>Next Expected Quantity</th>
                    </tr>
            </thead>
            <tbody>
                <apex:repeat value="{!inventoryInfoList}" var="inventoryInfo">                
                    <tr>                       
                       <td>{!inventoryInfo.locationId}</td>
                       <td>{!inventoryItem.skuQty}</td>
                        <td>{!inventoryItem.skuQtyOnOrder}</td>
                        <td>{!inventoryItem.skuNxtOrderDate}</td>
                    </tr>
                </apex:repeat>
            </tbody> 
        </table>

When I attempt to access {!inventoryItem.locationId} (similar to how I had accessed on the controller side) I get an unknown property error.  If try to access {!InventoryItem[0]} it returns the first inventory item row with all the attributes such as locationId, skuQty, etc. However, I need to access these atrtributes individually and I'm not sure how to do so.

Thanks in advance for any pointers!





 

Dear SF experts,
I am currently trying to implement Remote Objects in Javascript to retrieve Accounts but having difficulty finding a workaround to query for more than the maximum limit of 100 records. Salesforce states that the maximum limit to return one batch of results is 100 but there is more than 2000 records that I need to query.  

Would I have to use offsets and batch query 100 records at a time?
Here is some sample code that I was working with:

j$(document).ready(function() {
            var acctTable = j$('[id$="accounttable"]').DataTable({
                "ajax": function(data, callback, settings) {
                    var acct = new SObjectModel.Account();
                    acct.retrieve({
                        orderby: [{
                            Name: 'ASC'
                        }],
                        limit: 1000
                    }, function(err, records) {
                        if (err) alert(err.message);
                        else {
                            callback({
                                'data': records
                            });
                        };
                    });
                },

Any advice would be appreciated!
Thanks.