function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aam MAam M 

javascript function to fetch all contacts on click button

I've created a lightning component and included that in VF page, and that component is button (ui:button),
For this ui:button component, I want write function when I click this button all contacts should be displayed in the screen, 
Can anyone tell me  the function?
  
<apex:page >
    <apex:includeLightning />

    <div style= "width:90%;height:70px;align:center" id="FlipContainer" />
    <br/>
    <div style= "width:90%;height:40px;align:center" id="ButtonCon" />
    
    
    <script>
    
    $Lightning.use("c:DemoFlipContain", function(){
       $Lightning.createComponent("c:FlipCard", 
                                  { 	borderColor : "#16325c", 
                                     	bgColor 	: "#16325c" ,
                                     	fontColor	: "White",
										frontText : "Race2Cloud Technologies",
                                   		backText : "Partnership with Salesforce"
                                  },
                                  "FlipContainer",
                                  function(cmp) {
                                      console.log('Component created, do something cool here');
                                     
                                  });  
         
        $Lightning.createComponent("ui:button",
          { label : "See Contacts!" },
          "ButtonCon",
          function(cmp) {
            
              
          });
    });
    </script>    
</apex:page>

 
Varun SinghVarun Singh
Hi Mujahid Ahmed Aamir M ,

Hi You can try  in this way!

Here is working example for account you can impltement this  very easily.
https://trailhead.salesforce.com/modules/lightning_design_system/units/lightning-design-system4

  
<!-- JAVASCRIPT -->
<script>
  (function() {
    var contact= new SObjectModel.Contact();
    var outputDiv = document.getElementById('contact-list');

    var updateOutputDiv = function() {

      contact.retrieve(
        { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
        function(error, records) {
          if (error) {
            alert(error.message);
          } else {
            // create data table
            var dataTable = document.createElement('table');
            dataTable.className = 'slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover';

            // add header row
            var tableHeader = dataTable.createTHead();
            var tableHeaderRow = tableHeader.insertRow();

            var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);
            tableHeaderRowCell1.appendChild(document.createTextNode('Contact last name'));
            tableHeaderRowCell1.setAttribute('scope', 'col');
            tableHeaderRowCell1.setAttribute('class', 'slds-text-heading--label');

            var tableHeaderRowCell2 = tableHeaderRow.insertCell(1);
            tableHeaderRowCell2.appendChild(document.createTextNode('Contact ID'));
            tableHeaderRowCell2.setAttribute('scope', 'col');
            tableHeaderRowCell2.setAttribute('class', 'slds-text-heading--label');

            // build table body
            var tableBody = dataTable.appendChild(document.createElement('tbody'))
            var dataRow, dataRowCell1, dataRowCell2, recordName, recordId;
            records.forEach(function(record) {
              dataRow = tableBody.insertRow();

              dataRowCell1 = dataRow.insertCell(0);
              recordName = document.createTextNode(record.get('LastName'));
              dataRowCell1.appendChild(recordName);

              dataRowCell2 = dataRow.insertCell(1);
              recordId = document.createTextNode(record.get('Id'));
              dataRowCell2.appendChild(recordId);
            });

            if (outputDiv.firstChild) {
              // replace table if it already exists
              // see later in tutorial
              outputDiv.replaceChild(dataTable, outputDiv.firstChild);
            } else {
              outputDiv.appendChild(dataTable);
            }
          }
        }
      );
    }
    updateOutputDiv();
  })();
</script>
<!-- / JAVASCRIPT -->

 
Varun SinghVarun Singh
Hi @Mujahid Ahmed Aamir M
I have  created  page  for contact object  you can see  all list in alert.


  
<apex:page>
<script language="JavaScript1.2" src="/js/functions.js"></script>
<script src="/soap/ajax/9.0/connection.js" type="text/javascript"></script>
<script id="clientEventHandlersJS" language="javascript">
alert('check');
initPage();
function initPage() {
alert('test');
var existingSel = document.getElementById('select_0');
sforce.connection.sessionId = '{!$Api.Session_ID}';
 
try
    {
    alert('Select Name, Id From Contact ORDER BY Name');
    var qr = sforce.connection.query("SELECT id,name FROM Contact");
    var records = qr.getArray("records");
  alert('qr '+qr);
    }
catch (error)
    {
    alert(error.faultstring);
    }
 
if (qr.records.length > 0)
    {
    for (var i=0;i<qr.records.length;i++)
        {
         existingSel.options[i] = new Option(qr.records[i].get("Name"), qr.records[i].get("Id"));
         }
    }
    else
    {
        alert("Query to populate picklist failed. No Rows.");
    }
// End Init Page with the bracket below.
}
</script>
<body onload="initPage();">
 
<select name="select_0" id="select_0" MULTIPLE="multiple" width="200" size="10">
 
<option value="">--None--</option>
 
</select>
</body>
</apex:page>