What is in lightning component and how to use in lightning components?.

What is <aura:iteration> in lightning component and how to use <aura:iteration> in lightning components?.

aura:iteration iterates over a collection of items and renders the body of the tag for each item.

Data changes in the collection are rerendered automatically on the page. aura:iteration supports iterations containing components that have server-side dependencies or that can be created exclusively on the client-side.

Example Using Data from a Server-Side Controller

This example shows a dynamic iteration that displays data from a standard Opportunity object when user clicks on the button.

Apex Class:

public with sharing class OpporutnityLightningController {

   

    @AuraEnabled

    public static List<Opportunity> getOpportunities(){

        List<Opportunity> opplist = [select id,Name from opportunity];

        return opplist;

    }

}

Lightning Opportunity Component : 

Opportunity Component Controller.JS

Opportunity component App:

Output : 

In this example i am giving basic idea of how to use <aura:iteration> with apex class.

for more details you can refer salesforce documentation.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_iteration.htm

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_iteration.htm

Read more »

What are Server-Side Controllers in lightning components and how to use server-side controllers?.

What are Server-Side Controllers in lightning components and how to use server-side controllers?.

Server-Side Controller

Create a server-side controller in Apex and use the @AuraEnabled annotation to enable client- and server-side access to the controller method.

Only methods that you have explicitly annotated with @AuraEnabled are exposed. Calling server-side actions aren’t counted against your org’s API limits. However, your server-side controller actions are written in Apex, and as such are subject to all the usual Apex limits.

This Apex controller contains a serverEcho action that prepends a string to the value passed in.

public with sharing class SimpleServerSideController {

    //Use @AuraEnabled to enable client- and server-side access to the method

    @AuraEnabled

    public static String serverEcho(String firstName) {

        return ('Hello from the server, ' + firstName);

    }

}

In addition to using the @AuraEnabled annotation, your Apex controller must follow these requirements.

•     Methods must be static and marked public or global. Non-static methods aren’t supported.
•     If a method returns an object, instance methods that retrieve the value of the object’s instance field must be public.

Creating an Apex Server-Side Controller

Use the Developer Console to create an Apex server-side controller.

1.      Open the Developer Console.

2.      Click File | New | Apex Class.

3.      Enter a name for your server-side controller.

4.      Click OK.

5.    Enter a method for each server-side action in the body of the class. 

6.    Click File | Save. 

7.    Open the component that you want to wire to the new controller class. 

8.    Add a controller system attribute to the <aura:component> tag to wire the 

   component to the controller. For example:

<aura:component controller="SimpleServerSideController" >

Returning Errors from an Apex Server-Side Controller

Create and throw a System.AuraHandledException from your server-side controller to return a custom error message.

Errors happen. Sometimes they’re expected, such as invalid input from a user, or a duplicate record in a database. Sometimes they’re unexpected, such as... Well, if you’ve been programming for any length of time, you know that the range of unexpected errors is nearly infinite.

When your server-side controller code experiences an error, two things can happen. You can catch it there and handle it in Apex. Otherwise, the error is passed back in the controller’s response.

If you handle the error Apex, you again have two ways you can go. You can process the error, perhaps recovering from it, and return a normal response to the client. Or, you can create and throw an AuraHandledException.

The benefit of throwing AuraHandledException, instead of letting a system exception be returned, is that you have a chance to handle the exception more gracefully in your client code. System exceptions have important details stripped out for security purposes, and result in the dreaded “An internal server error has occurred…” message. Nobody likes that. When you use an AuraHandledException you have an opportunity to add some detail back into the response returned to your client-side code. More importantly, you can choose a better message to show your users.

Here’s an example of creating and throwing an AuraHandledException in response to bad input. However, the real benefit of using AuraHandledException comes when you use it in response to a system exception. For example, throw an AuraHandledException in response to catching a DML exception, instead of allowing that to propagate down to your client component code.

public with sharing class SimpleErrorController {     static final List<String> BAD_WORDS = new List<String> {        'bad',        'words',        'here'    }; 
    @AuraEnabled    public static String helloOrThrowAnError(String name) {         // Make sure we're not seeing something naughty        for(String badWordStem : BAD_WORDS) {            if(name.containsIgnoreCase(badWordStem)) {                // How rude! Gracefully return an error...                throw new AuraHandledException('NSFW name detected.');            }        }     
        // No bad word found, so...        return ('Hello ' + name + '!');    } 
}

Calling a Server-Side Action

Call a server-side controller action from a client-side controller. In the 
client-side controller,  you set a callback, which is called after the
server-side action is completed. A server-side action can return any object
containing serializable JSON data.

A client-side controller is a JavaScript object in object-literal notation
containing name-value pairs. Each name corresponds to a client-side action. Its
value is the function code associated with the action

Let’s say that you want to trigger a server-call from a component. The following
component contains a button that’s wired to a client-side  controller echo action.  ServerSideLightningController
contains a method that returns a string passed
in from the client-side controller.




Example : Component

 Controller

Output : 

for reference  :

Read more »

How to know which button was pressed in lightning component?

How to know which button was pressed in lightning component?

To find out which button was pressed in a component containing multiple buttons, use Component.getLocalId().

Let’s look at a component that contains multiple buttons. Each button has a unique local ID, set by an aura:id attribute.

<!--c:buttonPressed-->
<aura:component >
    <aura:attribute name="whichButton" type="String" />
    
    <p>You clicked: {!v.whichButton}</p>

    <ui:button aura:id="button1" label="Click me" press="{!c.nameThatButton}"/>
    <ui:button aura:id="button2" label="Click me too" press="{!c.nameThatButton}"/>
</aura:component>

Use event.getSource() in the client-side controller to get the button component that was clicked. Call getLocalId() to get the aura:id of the clicked button.

/* buttonPressedController.js */
({
    nameThatButton : function(cmp, event, helper) {
        var whichOne = event.getSource().getLocalId();
        console.log(whichOne);
        cmp.set("v.whichButton", whichOne);
    }
})

Example Component: 

Controller.Js  : Highlighted code

out put:

for reference : 

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_which_button_pressed.htm

Read more »

What are the standard components in lightning components?

What are the standard components in lightning components?

Components are reusable applications components. There are 2 types of components in salesforce.

1).Standard components can be used in salesforce one applications as well as in lightning application also.

2).Force.com components can only be used in salesforce one application.

Example of standard component is

aura:iteration iterates over a collection of items and renders the body of the tag for each item.

Data changes in the collection are rendered automatically on the page. aura:iteration supports iterations containing components that have server-side dependencies or that can be created exclusively on the client-side.

 

Example :

Here is my component 

Here is my component controller code

Defined getNumberList function in controller, and set the values from this controller. If you observer line number 8 I prepared listOfNums and passed to component variable “listOfNumbers”.

Finally the output is :

For reference:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_iteration.htm

Read more »

What are Global Value Providers in lightning components?

What are Global Value Providers in lightning components?

Global value providers are global values and methods that a component can use in expressions.

First we will see how to use $Browser global value provider to check the browser I am running my lightning component.

Output is:

Similarly, you can check browser information in a client-side controller using $A.get().

({

    checkBrowser: function(component) {

        var device = $A.get("$Browser.formFactor");

        alert("You are using a " + device);

    }

})

Similarly, you can check locale information in a client-side controller using $A.get().

({

    checkDevice: function(component) {

        var locale = $A.get("$Locale.language");

        alert("You are using " + locale);

    }

})

You can refer in salesforce documentation:



https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_source.htm

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_browser_value_provider.htm#expr_browser_value_provider

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_locale_value_provider.htm#expr_locale_value_provider

Read more »

How to use conditional statements IF, Else in lightning components?.

How to use conditional statements IF, Else in lightning components?.

In the below example components I am using IF and Else conditions in components.

IFComp:

In the above screen shot I am using aura:attribute  to define variable with name as “change”, data type as boolean for this I assigned a default value as TRUE.

In line number seven I am starting IF condition with <aura:if> tag. If you want to define conditional expression in lightning components we have to use <aura:if>  . if the change variable value is TRUE then I am displaying button with test as “I am True”, else I am displaying button with label as “I am false”

In line number ten I am using else block for the above if condition, for this we have to use the tag of <aura:set attribute=”else”/>

<ui:button> is used to create buttons in lightning components.

Output 1: 

Here I will the button the button label as true, because of I assigned default value for the “Change” variable as true.

Output 2:

Read more »

What are Nested components and component composition in lightning?

What are Nested components and component composition in lightning?

Component composition is nothing to use to ease the process.  Let’s say if you have 3 to 4 components so instead of calling all those components into your application what we do is create another component which is knows as nested component or wrapper component which calls all these components in itself and then in the application finally we can call that wrapper/Nested component only.

To save our time we are going to use this a lot in lightning applications.  Here is the example

I have 2 components as shown below

Component 1 :  LC.cmp 

Component 2 :  LC2.cmp

Wrapper Component / Nested Component:

Application:  Here I am including/adding that wrappercomponent in my NestedComponent application.

Finally what I am doing here is instead of calling LC,LC2 components, I am calling wrappercomponent that includes booth LC,LC2 components.

Once you click on the preview of your application you can see this output.

Read more »

Salesforce Lightning Design System(SLDS) examples.

Salesforce Lightning Design System(SLDS) Examples:

In the below examples i am using static resources that i got from SLDS unmanaged package installation. Once you installed the SLDS package you will get the static resource that contains CSS, Images, Avatars etc....

Example 1: Create a basic example of Salesforce Lightning Design System.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>

  <title>Salesforce Lightning Design System Trailhead Module</title>

  <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

</head>    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->

  <div class="slds">    

    <!-- MASTHEAD -->

    <p class="slds-text-heading--label slds-m-bottom--small">

      Salesforce Lightning Design System Trailhead Module

    </p>

    <!-- / MASTHEAD -->    

    <!-- PRIMARY CONTENT WRAPPER -->

    <div class="myapp">    

      <!-- SECTION - BADGE COMPONENTS -->

      <section aria-labelledby="badges">

        <h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>

        <div>

          <span class="slds-badge">Badge</span>

          <span class="slds-badge slds-theme--inverse">Badge</span>

        </div>

      </section>

      <!-- / SECTION - BADGE COMPONENTS -->    

    </div>

    <!-- / PRIMARY CONTENT WRAPPER -->    

  </div>

  <!-- / REQUIRED SLDS WRAPPER -->    

</body>

</html>

</apex:page>

Example2 : Salesforce Lightning Design System with List view example.

In this example i am displaying static list views details.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>

  <title>Salesforce Lightning Design System Trailhead Module</title>

  <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

</head>    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->

  <div class="slds">    

    <!-- MASTHEAD -->

    <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>

    <!-- / MASTHEAD -->    

   <!-- PAGE HEADER -->

<div class="slds-page-header" role="banner">

  <!-- LAYOUT GRID -->

  <div class="slds-grid">

    <!-- GRID COL -->

    <div class="slds-col">

      <!-- HEADING AREA -->

      <p class="slds-text-heading--label">Accounts</p>

      <h1 class="slds-text-heading--medium">My Accounts</h1>

      <!-- /HEADING AREA -->

    </div>

    <!-- GRID COL -->

    <div class="slds-col slds-no-flex slds-align-middle">

      <div class="slds-button-group" role="group">

        <button class="slds-button slds-button--neutral">

          New Account

        </button>

        <button class="slds-button slds-button--neutral">

          More

        </button>

      </div>

    </div>

    <!-- / GRID COL -->

  </div>

  <!-- / LAYOUT GRID -->

  <p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>

</div>

<!-- / PAGE HEADER -->  

<!-- PRIMARY CONTENT WRAPPER -->

<div class="myapp">

  <ul class="slds-list--dotted slds-m-top--large">

    <li>Account 1</li>

    <li>Account 2</li>

    <li>Account 3</li>

    <li>Account 4</li>

    <li>Account 5</li>

    <li>Account 6</li>

    <li>Account 7</li>

    <li>Account 8</li>

    <li>Account 9</li>

    <li>Account 10</li>

  </ul>

</div>

<!-- / PRIMARY CONTENT WRAPPER -->   

<!-- FOOTER -->

<footer role="contentinfo" class="slds-p-around--large">

  <!-- LAYOUT GRID -->

  <div class="slds-grid slds-grid--align-spread">

    <p class="slds-col">Salesforce Lightning Design System Example</p>

    <p class="slds-col">&copy; Your Name Here</p>

  </div>

  <!-- / LAYOUT GRID -->

</footer>

<!-- / FOOTER -->

  </div>

  <!-- / REQUIRED SLDS WRAPPER -->    

</body>    

<!-- JAVASCRIPT -->

<!-- / JAVASCRIPT -->    

</html>

</apex:page>

Example 3 : Salesforce Lightning Design System(SLDS) list view example with Account object.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>

  <title>Salesforce Lightning Design System Trailhead Module</title>

  <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

</head>    

<apex:remoteObjects >

  <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>

</apex:remoteObjects>    

    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->

  <div class="slds">    

    <!-- MASTHEAD -->

    <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>

    <!-- / MASTHEAD -->    

   <!-- PAGE HEADER -->

<div class="slds-page-header" role="banner">

  <!-- LAYOUT GRID -->

  <div class="slds-grid">

    <!-- GRID COL -->

    <div class="slds-col">

      <!-- HEADING AREA -->

      <p class="slds-text-heading--label">Accounts</p>

      <h1 class="slds-text-heading--medium">My Accounts</h1>

      <!-- /HEADING AREA -->

    </div>

    <!-- GRID COL -->

    <div class="slds-col slds-no-flex slds-align-middle">

      <div class="slds-button-group" role="group">

        <button class="slds-button slds-button--neutral">

          New Account

        </button>

        <button class="slds-button slds-button--neutral">

          More

        </button>

      </div>

    </div>

    <!-- / GRID COL -->

  </div>

  <!-- / LAYOUT GRID -->

  <p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>

</div>

<!-- / PAGE HEADER -->  

<!-- PRIMARY CONTENT WRAPPER -->

<div class="myapp">    

  <!-- CREATE NEW ACCOUNT -->

  <div aria-labelledby="newaccountform">

    <!-- BOXED AREA -->

    <fieldset class="slds-box slds-theme--default slds-container--small">

      <legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend>

      <!-- CREATE NEW ACCOUNT FORM -->

      <form class="slds-form--stacked">

        <div class="slds-form-element">

          <label class="slds-form-element__label" for="accountName">Name</label>

          <div class="slds-form-element__control">

            <input id="accountName" class="slds-input" type="text" placeholder="New account"/>

          </div>

        </div>

        <button class="slds-button slds-button--brand slds-m-top--medium" type="button" onClick="createAccount()">Create Account</button>

      </form>

      <!-- CREATE NEW ACCOUNT FORM -->

    </fieldset>

    <!-- / BOXED AREA -->

  </div>

  <!-- / CREATE NEW ACCOUNT -->

    

  <!-- ACCOUNT LIST TABLE -->

  <div id="accountList" class="slds-p-vertical--medium"></div>

  <!-- / ACCOUNT LIST TABLE -->    

</div>

<!-- / PRIMARY CONTENT WRAPPER -->

<!-- FOOTER -->

<footer role="contentinfo" class="slds-p-around--large">

  <!-- LAYOUT GRID -->

  <div class="slds-grid slds-grid--align-spread">

    <p class="slds-col">Salesforce Lightning Design System Example</p>

    <p class="slds-col">&copy; Your Name Here</p>

  </div>

  <!-- / LAYOUT GRID -->

</footer>

<!-- / FOOTER -->

  </div>

  <!-- / REQUIRED SLDS WRAPPER -->    

</body>    

<!-- JAVASCRIPT -->

<script>

  var account = new SObjectModel.Account();

  var outputDiv = document.getElementById("accountList");

  function updateOutputDiv() {

    account.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';

          // add header row

          var tableHeader = dataTable.createTHead();

          var tableHeaderRow = tableHeader.insertRow();

          var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);

          tableHeaderRowCell1.appendChild(document.createTextNode('Account name'));

          tableHeaderRowCell1.setAttribute('scope', 'col');

          var tableHeaderRowCell2 = tableHeaderRow.insertCell(1);

          tableHeaderRowCell2.appendChild(document.createTextNode('Account ID'));

          tableHeaderRowCell2.setAttribute('scope', 'col');

          // 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("Name"));

              dataRowCell1.appendChild(recordName);

              dataRowCell2 = dataRow.insertCell(1);

              recordId = document.createTextNode(record.get("Id"));

              dataRowCell2.appendChild(recordId);

          });

          // create data table wrapper

          var tableWrapper = document.createElement('div');

          tableWrapper.className = 'slds-scrollable--x';

          tableWrapper.appendChild(dataTable);

          if (outputDiv.firstChild) {

            // replace table if it already exists

            // see later in tutorial

            outputDiv.replaceChild(tableWrapper, outputDiv.firstChild);

          } else {

            outputDiv.appendChild(tableWrapper);

          }

        }

      }

    );

  }

    

  function createAccount() {

  var accountName = document.getElementById("accountName").value;

  var account = new SObjectModel.Account();

  account.create({Name: accountName}, function(error, records) {

    if (error) {

      alert(error.message);

    } else {

      updateOutputDiv();

    }

  });

  return false;

}  

  updateOutputDiv();

</script>

<!-- / JAVASCRIPT -->   

</html>

</apex:page>

Example 4 : Salesforce Lightning Design System(SLDS) list view example with Account object using Avatar's

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>

  <title>Salesforce Lightning Design System Trailhead Module</title>

  <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

</head>    

<apex:remoteObjects >

  <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>

</apex:remoteObjects>    

    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->

  <div class="slds">    

    <!-- MASTHEAD -->

    <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>

    <!-- / MASTHEAD -->    

   <!-- PAGE HEADER -->

<div class="slds-page-header" role="banner">

  <!-- LAYOUT GRID -->

  <div class="slds-grid">

    <!-- GRID COL -->

    <div class="slds-col">

<!-- HEADING AREA -->

<!-- MEDIA OBJECT = FIGURE + BODY -->

<div class="slds-media">

  <div class="slds-media__figure">

    <span class="slds-avatar slds-avatar--large">

      <img src="{!URLFOR($Resource.SLDS100, 'assets/images/avatar1.jpg')}" alt="portrait" />

    </span>

  </div>

  <div class="slds-media__body">

    <p class="slds-text-heading--label">Accounts</p>

    <h1 class="slds-text-heading--medium">My Accounts</h1>

  </div>

</div>

<!-- / MEDIA OBJECT -->

<!-- /HEADING AREA -->

    </div>

    <!-- GRID COL -->

    <div class="slds-col slds-no-flex slds-align-middle">

      <div class="slds-button-group" role="group">

        <button class="slds-button slds-button--neutral">

          New Account

        </button>

        <button class="slds-button slds-button--neutral">

          More

        </button>

      </div>

    </div>

    <!-- / GRID COL -->

  </div>

  <!-- / LAYOUT GRID -->

  <p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>

</div>

<!-- / PAGE HEADER -->  

<!-- PRIMARY CONTENT WRAPPER -->

<div class="myapp">    

  <!-- CREATE NEW ACCOUNT -->

  <div aria-labelledby="newaccountform">

    <!-- BOXED AREA -->

    <fieldset class="slds-box slds-theme--default slds-container--small">

      <legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend>

      <!-- CREATE NEW ACCOUNT FORM -->

      <form class="slds-form--stacked">

        <div class="slds-form-element">

          <label class="slds-form-element__label" for="accountName">Name</label>

          <div class="slds-form-element__control">

            <input id="accountName" class="slds-input" type="text" placeholder="New account"/>

          </div>

        </div>

        <button class="slds-button slds-button--brand slds-m-top--medium" type="button" onClick="createAccount()">Create Account</button>

      </form>

      <!-- CREATE NEW ACCOUNT FORM -->

    </fieldset>

    <!-- / BOXED AREA -->

  </div>

  <!-- / CREATE NEW ACCOUNT -->

    

  <!-- ACCOUNT LIST TABLE -->

  <div id="accountList" class="slds-p-vertical--medium"></div>

  <!-- / ACCOUNT LIST TABLE -->    

</div>

<!-- / PRIMARY CONTENT WRAPPER -->

<!-- FOOTER -->

<footer role="contentinfo" class="slds-p-around--large">

  <!-- LAYOUT GRID -->

  <div class="slds-grid slds-grid--align-spread">

    <p class="slds-col">Salesforce Lightning Design System Example</p>

    <p class="slds-col">&copy; Your Name Here</p>

  </div>

  <!-- / LAYOUT GRID -->

</footer>

<!-- / FOOTER -->

  </div>

  <!-- / REQUIRED SLDS WRAPPER -->    

</body>    

<!-- JAVASCRIPT -->

<script>

  var account = new SObjectModel.Account();

  var outputDiv = document.getElementById("accountList");

  function updateOutputDiv() {

    account.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';

          // add header row

          var tableHeader = dataTable.createTHead();

          var tableHeaderRow = tableHeader.insertRow();

          var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);

          tableHeaderRowCell1.appendChild(document.createTextNode('Account name'));

          tableHeaderRowCell1.setAttribute('scope', 'col');

          var tableHeaderRowCell2 = tableHeaderRow.insertCell(1);

          tableHeaderRowCell2.appendChild(document.createTextNode('Account ID'));

          tableHeaderRowCell2.setAttribute('scope', 'col');

          // 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("Name"));

              dataRowCell1.appendChild(recordName);

              dataRowCell2 = dataRow.insertCell(1);

              recordId = document.createTextNode(record.get("Id"));

              dataRowCell2.appendChild(recordId);

          });

          // create data table wrapper

          var tableWrapper = document.createElement('div');

          tableWrapper.className = 'slds-scrollable--x';

          tableWrapper.appendChild(dataTable);

          if (outputDiv.firstChild) {

            // replace table if it already exists

            // see later in tutorial

            outputDiv.replaceChild(tableWrapper, outputDiv.firstChild);

          } else {

            outputDiv.appendChild(tableWrapper);

          }

        }

      }

    );

  }

    

  function createAccount() {

  var accountName = document.getElementById("accountName").value;

  var account = new SObjectModel.Account();

  account.create({Name: accountName}, function(error, records) {

    if (error) {

      alert(error.message);

    } else {

      updateOutputDiv();

    }

  });

  return false;

}  

  updateOutputDiv();

</script>

<!-- / JAVASCRIPT -->   

</html>

</apex:page>

Example 5 : Salesforce Lightning Design System(SLDS) with List Data table using Icons.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>

  <title>Salesforce Lightning Design System Trailhead Module</title>

  <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

</head>    

<apex:remoteObjects >

  <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>

</apex:remoteObjects>    

    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->

  <div class="slds">    

    <!-- MASTHEAD -->

    <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Module</p>

    <!-- / MASTHEAD -->    

   <!-- PAGE HEADER -->

<div class="slds-page-header" role="banner">

  <!-- LAYOUT GRID -->

  <div class="slds-grid">

    <!-- GRID COL -->

    <div class="slds-col">

<!-- HEADING AREA -->

<!-- MEDIA OBJECT = FIGURE + BODY -->

<div class="slds-media">

  <div class="slds-media__figure">

    <span class="slds-avatar slds-avatar--large">

      <img src="{!URLFOR($Resource.SLDS100, 'assets/images/avatar1.jpg')}" alt="portrait" />

    </span>

  </div>

  <div class="slds-media__body">

    <p class="slds-text-heading--label">Accounts</p>

    <h1 class="slds-text-heading--medium">My Accounts</h1>

  </div>

</div>

<!-- / MEDIA OBJECT -->

<!-- /HEADING AREA -->

    </div>

    <!-- GRID COL -->

    <div class="slds-col slds-no-flex slds-align-middle">

      <div class="slds-button-group" role="group">

        <button class="slds-button slds-button--neutral">

          New Account

        </button>

        <button class="slds-button slds-button--neutral">

          More

        </button>

      </div>

    </div>

    <!-- / GRID COL -->

  </div>

  <!-- / LAYOUT GRID -->

  <p class="slds-text-body--small slds-m-top--x-small">COUNT items</p>

</div>

<!-- / PAGE HEADER -->  

<!-- PRIMARY CONTENT WRAPPER -->

<div class="myapp">    

  <!-- CREATE NEW ACCOUNT -->

  <div aria-labelledby="newaccountform">

    <!-- BOXED AREA -->

    <fieldset class="slds-box slds-theme--default slds-container--small">

      <legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend>

      <!-- CREATE NEW ACCOUNT FORM -->

      <form class="slds-form--stacked">

        <div class="slds-form-element">

          <label class="slds-form-element__label" for="accountName">Name</label>

          <div class="slds-form-element__control">

            <input id="accountName" class="slds-input" type="text" placeholder="New account"/>

          </div>

        </div>

        <button class="slds-button slds-button--brand slds-m-top--medium" type="button" onClick="createAccount()">Create Account</button>

      </form>

      <!-- CREATE NEW ACCOUNT FORM -->

    </fieldset>

    <!-- / BOXED AREA -->

  </div>

  <!-- / CREATE NEW ACCOUNT -->

    

  <!-- ACCOUNT LIST TABLE -->

  <div id="accountList" class="slds-p-vertical--medium"></div>

  <!-- / ACCOUNT LIST TABLE -->    

</div>

<!-- / PRIMARY CONTENT WRAPPER -->

<!-- FOOTER -->

<footer role="contentinfo" class="slds-p-around--large">

  <!-- LAYOUT GRID -->

  <div class="slds-grid slds-grid--align-spread">

    <p class="slds-col">Salesforce Lightning Design System Example</p>

    <p class="slds-col">&copy; Your Name Here</p>

  </div>

  <!-- / LAYOUT GRID -->

</footer>

<!-- / FOOTER -->

  </div>

  <!-- / REQUIRED SLDS WRAPPER -->    

</body>    

<!-- JAVASCRIPT -->

<script>

  var account = new SObjectModel.Account();

  var outputDiv = document.getElementById("accountList");

  function updateOutputDiv() {

  account.retrieve(

    {orderby: [{LastModifiedDate: 'DESC'}], limit: 10},

    function(error, records) {

      if (error) {

        alert(error.message);

      } else {

        var accountIcon = '<span class="slds-icon__container slds-icon-standard-account">';

        accountIcon += '<svg aria-hidden="true" class="slds-icon">';

        accountIcon += '<use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>';

        accountIcon += '</svg><span class="slds-assistive-text">Account</span></span>';  

        var html = '<div class="slds-scrollable--x"><table class="slds-table slds-table--bordered">';  

        html += '<thead><tr><th scope="col">Type</th>';

        html += '<th scope="col">Account name</th>';

        html += '<th scope="col">Account ID</th></tr></thead><tbody>';  

        records.forEach(function(record) {

            html += '<tr><td>' + accountIcon + '</td>';

            html += '<td>' + record.get("Name") + '</td>';

            html += '<td>' + record.get("Id") + '</td></tr>';

        });

        html = html + '</tbody></table></div>';

        outputDiv.innerHTML = html;

      }

    }

  );

}

    

  function createAccount() {

  var accountName = document.getElementById("accountName").value;

  var account = new SObjectModel.Account();

  account.create({Name: accountName}, function(error, records) {

    if (error) {

      alert(error.message);

    } else {

      updateOutputDiv();

    }

  });

  return false;

}  

  updateOutputDiv();

</script>

<!-- / JAVASCRIPT -->   

</html>

</apex:page>

Example 6 : Salesforce Lightning Design System(SLDS) with Record Home stype approach.

This example is not dynamic. you can use dynamic components.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>

  <title>Salesforce Lightning Design System Trailhead Module</title>

  <apex:stylesheet value="{!URLFOR($Resource.SLDS100, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

</head>    

<body>    

  <!-- REQUIRED SLDS WRAPPER -->

  <div class="slds">    

    <!-- MASTHEAD -->

    <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Trailhead Module</p>

    <!-- / MASTHEAD -->    

<!-- PAGE HEADER -->

<div class="slds-page-header" role="banner">

  <!-- PAGE HEADER TOP ROW -->

  <div class="slds-grid">

    <!-- PAGE HEADER / ROW 1 / COLUMN 1 -->

    <div class="slds-col">

      <!-- HEADING AREA -->

      <!-- MEDIA OBJECT = FIGURE + BODY -->

      <div class="slds-media">

        <div class="slds-media__figure">

          <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">

            <use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>

          </svg>

        </div>

        <div class="slds-media__body">

          <p class="slds-text-heading--label">Account</p>

          <h1 class="slds-text-heading--medium">SLDS Inc.</h1>

        </div>

      </div>

      <!-- / MEDIA OBJECT -->

      <!-- HEADING AREA -->

    </div>

    <!-- / PAGE HEADER / ROW 1 / COLUMN 1 -->

    <!-- PAGE HEADER / ROW 1 / COLUMN 2 -->

    <div class="slds-col slds-no-flex slds-align-middle">

      <div class="slds-button-group" role="group">

        <button class="slds-button slds-button--neutral">

          Contact

        </button>

        <button class="slds-button slds-button--neutral">

          More

        </button>

      </div>

    </div>

    <!-- / PAGE HEADER / ROW 1 / COLUMN 2 -->

  </div>

  <!-- / PAGE HEADER TOP ROW -->

<!-- PAGE HEADER DETAIL ROW -->

<div class="slds-grid slds-page-header__detail-row">

  <!-- PAGE HEADER / ROW 2 / COLUMN 1 -->

  <div class="slds-col--padded slds-size--1-of-4">

    <dl>

      <dt>

        <p class="slds-text-heading--label slds-truncate">Field 1</p>

      </dt>

      <dd>

        <p class="slds-text-body--regular slds-truncate">Description that demonstrates truncation with a long text field</p>

      </dd>

    </dl>

  </div>

  <!-- PAGE HEADER / ROW 2 / COLUMN 2 -->

  <div class="slds-col--padded slds-size--1-of-4">

    <dl>

      <dt>

        <p class="slds-text-heading--label slds-truncate">Field 2</p>

      </dt>

      <dd><a href="#">Hyperlink 2</a></dd>

    </dl>

  </div>

  <!-- PAGE HEADER / ROW 2 / COLUMN 3 -->

  <div class="slds-col--padded slds-size--1-of-4">

    <dl>

      <dt>

        <p class="slds-text-heading--label slds-truncate">Field 3</p>

      </dt>

      <dd><a href="#">Hyperlink 3</a></dd>

    </dl>

  </div>

  <!-- PAGE HEADER / ROW 2 / COLUMN 4 -->

  <div class="slds-col--padded slds-size--1-of-4">

    <dl>

      <dt>

        <p class="slds-text-heading--label slds-truncate">Field 4</p>

      </dt>

      <dd><a href="#">Hyperlink 4</a></dd>

    </dl>

  </div>

</div>

<!-- / PAGE HEADER DETAIL ROW -->

</div>

<!-- / PAGE HEADER -->   

<!-- PRIMARY CONTENT WRAPPER -->

<div class="myapp">

  <!-- RELATED LIST CARDS-->

  <div class="slds-grid slds-m-top--large">

<!-- MAIN CARD -->

<div class="slds-col slds-col-rule--right slds-p-right--large slds-size--8-of-12">

  <div class="slds-card">

    <header class="slds-card__header slds-grid">

      <div class="slds-col slds-media slds-media--center">

        <div class="slds-media__figure">

          <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">

            <use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>

          </svg>

        </div>

        <div class="slds-media__body">

          <h3 class="slds-text-heading--small">Contacts</h3>

        </div>

      </div>

      <div class="slds-col slds-no-flex">

        <button class="slds-button slds-button--neutral slds-button--small">Add</button>

      </div>

    </header>

    <!-- CARD BODY = TABLE -->

    <section class="slds-card__body">

      <div class="slds-scrollable--x">

        <table class="slds-table slds-table--bordered slds-max-medium-table--stacked-horizontal">

          <thead>

            <tr class="slds-no-hover">

              <th class="slds-text-heading--label slds-size--1-of-4" scope="col">Name</th>

              <th class="slds-text-heading--label slds-size--1-of-4" scope="col">Company</th>

              <th class="slds-text-heading--label slds-size--1-of-4" scope="col">Title</th>

              <th class="slds-text-heading--label slds-size--1-of-4" scope="col">Email</th>

              <th class="slds-row-action" scope="col">

                <button class="slds-button slds-button--icon-border-filled slds-button--icon-border-small">

                  <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">

                    <use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>

                  </svg>

                  <span class="slds-assistive-text">Show More</span>

                </button>

              </th>

            </tr>

          </thead>

          <tbody>

            <tr class="slds-hint-parent">

              <td class="slds-size--1-of-4" data-label="Name">Adam Choi</td>

              <td class="slds-size--1-of-4" data-label="Company">Company One</td>

              <td class="slds-size--1-of-4" data-label="Title">Director of Operations</td>

              <td class="slds-size--1-of-4" data-label="Email">adam@company.com</td>

              <td>

                <button class="slds-button slds-button--icon-border-filled slds-button--icon-border-small">

                  <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">

                    <use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>

                  </svg>

                  <span class="slds-assistive-text">Show More</span>

                </button>

              </td>

            </tr>

          </tbody>

        </table>

      </div>

    </section>

    <!-- / CARD BODY = SECTION + TABLE -->

    <footer class="slds-card__footer">

      <a href="#">View All</a>

    </footer>

  </div>

</div>

<!-- / MAIN CARD -->

<!-- COMPACT CARD -->

<div class="slds-col slds-p-left--large slds-size--4-of-12">

  <div class="slds-card">

    <header class="slds-card__header">

      <div class="slds-media slds-media--center">

        <div class="slds-media__figure">

          <svg aria-hidden="true" class="slds-icon slds-icon-standard-lead slds-icon--small">

            <use xlink:href="{!URLFOR($Resource.SLDS100, 'assets/icons/standard-sprite/svg/symbols.svg#lead')}"></use>

          </svg>

        </div>

        <div class="slds-media__body">

          <h3 class="slds-text-heading--small">Team</h3>

        </div>

      </div>

    </header>

    <section class="slds-card__body">

      <!-- LIST WITH ONE ITEM -->

      <ul>

        <li class="slds-tile slds-hint-parent">

          <p class="tile__title slds-truncate"><a href="#">Anne Choi</a></p>

          <div class="tile__detail">

            <dl class="dl--horizontal slds-text-body--small">

              <dt class="slds-dl--horizontal__label">

                <p class="slds-truncate">Email:</p>

              </dt>

              <dd class="slds-dl--horizontal__detail slds-tile__meta">

                <p class="slds-truncate">achoi@burlingtion.com</p>

              </dd>

            </dl>

          </div>

        </li>

      </ul>

      <!-- LIST WITH ONE ITEM -->

    </section>

    <footer class="slds-card__footer">

      <a href="#">View All</a>

    </footer>

  </div>

</div>

<!-- / COMPACT CARD -->

  </div>

  <!-- / RELATED LIST CARDS -->

</div>

<!-- / PRIMARY CONTENT WRAPPER -->  

    <!-- FOOTER -->

    <footer role="contentinfo" class="slds-p-around--large">

      <!-- LAYOUT GRID -->

      <div class="slds-grid slds-grid--align-spread">

        <p class="slds-col">Salesforce Lightning Design System Example</p>

        <p class="slds-col">&copy; Your Name Here</p>

      </div>

      <!-- / LAYOUT GRID -->

    </footer>

    <!-- / FOOTER --> 

  </div>

  <!-- / REQUIRED SLDS WRAPPER -->    

</body>    

<!-- JAVASCRIPT -->

<!-- / JAVASCRIPT -->    

</html>

</apex:page>

Read more »