3

I am developing @RemoteAction example in Salesforce. I have the following code, when I execute that I expect to see list of Accounts, also my query returning list of Accounts, but how we can show all those records using VF ?

AccountRemoteActionController

global class AccountRemoteActionController {
    public String accountName { get; set; }
    public static List<Account> accounts { get; set; }

    public AccountRemoteActionController(){}

    @RemoteAction
    global static List<Account> getAccount(String accountName){
        String updatedAccName = '%'+accountName+'%';
        accounts = [select id, name, phone, type, numberofemployees from Account where name LIKE :updatedAccName];
        System.debug('Account Size : '+accounts.size());
        return accounts;
    }
}

AccountRemoteActionControllerVFPage

<apex:page controller="AccountRemoteActionController">
    <script>
        function getAccountJS(){
            var accountNameJS = document.getElementById('accName').value; 
            AccountRemoteActionController.getAccount(accountNameJS, 
                function(result, event){
                    if(event.status){
                        for(var i=0; i < result.length; i++){
                            document.getElementById("{!$Component.theBlock.thePageBlockSection.theFirstItem.accId}").innerHTML = result[i].Id;
                            document.getElementById("{!$Component.theBlock.thePageBlockSection.theSecondItem.accNam}").innerHTML = result[i].Name;
                            document.getElementById("{!$Component.theBlock.thePageBlockSection.theThirdItem.accPhone}").innerHTML = result[i].Phone;
                        }
                    }else if(event.type === 'exception'){
                        document.getElementById("errors-js").innerHTML = event.message;
                    }else{
                        document.getElementById("errors-js").innerHTML = 'No Records Found..';
                    }
                },{escape : true});
        }
    </script>
    Account Name : <input id="accName" type="text" />
    <button onclick="getAccountJS()">Get Account</button>
    <div id="errors-js"></div>

    <apex:pageBlock id="theBLock">
        <apex:pageBlockSection id="thePageBlockSection" columns="4">
            <apex:pageBlockSectionItem id="theFirstItem">
                <apex:outputText id="accId"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="theSecondItem" >
                <apex:outputText id="accNam" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="theThirdItem" >
                <apex:outputText id="accPhone" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

enter image description here

Here I want to see all accounts which SOQL query returns.

Here is the result of SOQL:

enter image description here

  • 1
    You'd need to construct your own HTML table in JavaScript. – Raul Jun 9 '17 at 12:00
8

I am answering on the basis that you are getting a list of accounts using the remote action. Now, to show a list of accounts you need to develop a table on the UI. Let me give you a basic example with simple table.

Have a <div/> to show your data in page.

<div id="resultsPanel"></div>

Now in your success callback function, we will be creating the table dynamically using JavaScript from the retrieved list of accounts.

function(result, event){
    if(event.status){
        var resultPanel = document.getElementById('resultsPanel');

        var tableHTML = '<table><tr><th>Acc Id</th><th>Acc Name</th><th>Acc Phone</th></tr>';
        for(var i=0; i < result.length; i++){
            tableHTML += '<tr>';
            tableHTML += '<td>'+result[i].Id+'</td>';
            tableHTML += '<td>'+result[i].Name+'</td>';
            tableHTML += '<td>'+result[i].Phone!='undefined'?result[i].Phone:''+'</td>';
            tableHTML += '</tr>';
        }
        tableHTML += '</table>';
        resultPanel.innerHTML = tableHTML;
    }else if(event.type === 'exception'){
        document.getElementById("errors-js").innerHTML = event.message;
    }else{
        document.getElementById("errors-js").innerHTML = 'No Records Found..';
    }
}
1

This is the good way of implementing the solution:

<apex:page controller="AccountRemoteActionController">
    <style>
        table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
    </style>
    <script>
        function getAccountJS(){
            var accountNameJS = document.getElementById('accName').value; 
            AccountRemoteActionController.getAccount(accountNameJS, 
                function(result, event){
                    var root, table, a, caption, bold, text, tr, th, td;
                    table = document.createElement("table");
                    table.className="gridtable";

                    caption = document.createElement("caption");
                    bold = document.createElement("b");
                    text = document.createTextNode("Account Details");
                    bold.appendChild(text);
                    caption.appendChild(bold);
                    table.appendChild(caption);

                    tr = document.createElement("tr");
                    th = document.createElement("th");
                    text = document.createTextNode("Name");
                    th.appendChild(text);
                    tr.appendChild(th);

                    th = document.createElement("th");
                    text = document.createTextNode("Phone");
                    th.appendChild(text);
                    tr.appendChild(th);

                    th = document.createElement("th");
                    text = document.createTextNode("Type");
                    th.appendChild(text);
                    tr.appendChild(th);

                    table.appendChild(tr);

                    if(event.status && event.result){
                        event.result.length = Object.keys(event.result).length;
                        Array.prototype.forEach.call(event.result, function(row) {
                            tr = document.createElement("tr");
                            td = document.createElement("td");
                            a = document.createElement("a");
                            a.href = "/"+row.Id;
                            text = document.createTextNode(row.Name);
                            a.appendChild(text);
                            td.appendChild(a);
                            tr.appendChild(td);

                            td = document.createElement("td");
                            text = document.createTextNode(row.Phone || "");
                            td.appendChild(text);
                            tr.appendChild(td);

                            td = document.createElement("td");
                            text = document.createTextNode(row.Type || "");

                            td.appendChild(text);
                            tr.appendChild(td);

                            table.appendChild(tr);
                        });
                    }

                    root = document.getElementById("accDetails");
                    while(root.firstChild) {
                        root.removeChild(root.firstChild);
                    }
                    root.appendChild(table);
                },{escape : true});
        }
    </script>
    Account Name : <input id="accName" type="text" />
    <button onclick="getAccountJS()">Get Account</button>
    <div id="errors-js"></div>
    <div id="accDetails"></div>

    <apex:pageBlock id="theBLock">
        <apex:pageBlockSection id="thePageBlockSection" columns="4">
            <apex:pageBlockSectionItem id="theFirstItem">
                <apex:outputText id="accId"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="theSecondItem" >
                <apex:outputText id="accNam" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="theThirdItem" >
                <apex:outputText id="accPhone" />
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

Here is the output: Reference for CSS: https://jsfiddle.net/mplungjan/r5v7q1js/

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.