Using LDS framework in lightening application

on
Hi guys,

I am sure we all started with all about lightening in the salesforce world.

I always wonder why salesforce forcing us to go Lightening? 
- Answer is pretty simple salesforce want it to be an event driven model with components framework which is helpful to make reusable & performance efficient applications across the board.

Now onwords you can see couple of my posts to ease the basic setups & development of lightening work. It is somehow hand tied in the beginning but it is not that different from what we do in reality. It is more client based as well as robust open source aura framework and efficient in terms of performance.

Some key points before we start developing apps & components.
  • Custom domain has to be registered.
  • Lightening has to be enabled.
  • Have customize application permission in the Profile/Permission set.
LDS: It is a CSS framework which defines the UI of next generation of salesforce. You can find more on https://www.lightningdesignsystem.com/

Steps to use LDS:

  1. Please download a specific scoped class version of LDS resource file from https://tools.lightningdesignsystem.com/css-customizer.
  2. Type in the class name you want to scope with:
                                           
    Note: Please select shorter possible class name, in my case I have used '.scoping-style-class'
  3. Once the loading finishes you will see a link generated above the button to download your resource file. Click on it.
  4. Now Upload the zip file to static resource with class name
  5. You are done!
We will see a simple example of using resources in an single application.
Steps:
  1. Out of all resource file we will focus more on CSS file which under below path:
    '/assets/styles/salesforce-lightning-design-system-ltng.min.css'
    Note: min version will take lessor loading compared to normal file.
  2. Here is the application code with resource being utilized
    <aura:application>
    <!--Load your resources here-->
    <ltng:require styles="{!$Resource.custom_lightening_resource + '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
    <!-- Wrap the LDS content with scoping class -->
    <div class="scoping-style-class">
    <br/><br/><br/><br/>
    <div class="slds-grid slds-grid--vertical-align-center slds-grid--align-center">
    <table class="slds-table slds-table--bordered slds-table--cell-buffer">
    <thead>
    <tr class="slds-text-title--caps">
    <th scope="col">
    <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
    </th>
    <th scope="col">
    <div class="slds-truncate" title="Account Name">Account Name</div>
    </th>
    <th scope="col">
    <div class="slds-truncate" title="Close Date">Close Date</div>
    </th>
    <th scope="col">
    <div class="slds-truncate" title="Stage">Stage</div>
    </th>
    <th scope="col">
    <div class="slds-truncate" title="Confidence">Confidence</div>
    </th>
    <th scope="col">
    <div class="slds-truncate" title="Amount">Amount</div>
    </th>
    <th scope="col">
    <div class="slds-truncate" title="Contact">Contact</div>
    </th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th scope="row" data-label="Opportunity Name">
    <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
    </th>
    <td data-label="Account Name">
    <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
    </td>
    <td data-label="Close Date">
    <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
    </td>
    <td data-label="Prospecting">
    <div class="slds-truncate" title="Prospecting">Prospecting</div>
    </td>
    <td data-label="Confidence">
    <div class="slds-truncate" title="20%">20%</div>
    </td>
    <td data-label="Amount">
    <div class="slds-truncate" title="$25k">$25k</div>
    </td>
    <td data-label="Contact">
    <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
    </td>
    </tr>
    <tr>
    <th scope="row" data-label="Opportunity Name">
    <div class="slds-truncate" title="Cloudhub + Anypoint Connectors"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></div>
    </th>
    <td data-label="Account Name">
    <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
    </td>
    <td data-label="Close Date">
    <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
    </td>
    <td data-label="Prospecting">
    <div class="slds-truncate" title="Prospecting">Prospecting</div>
    </td>
    <td data-label="Confidence">
    <div class="slds-truncate" title="20%">20%</div>
    </td>
    <td data-label="Amount">
    <div class="slds-truncate" title="$25k">$25k</div>
    </td>
    <td data-label="Contact">
    <div class="slds-truncate" title="jrogers@cloudhub.com"><a href="javascript:void(0);">jrogers@cloudhub.com</a></div>
    </td>
    </tr>
    </tbody>
    </table>
    </div>
    </div>
    </aura:application>
    view raw lds_with_lightning.htm hosted with ❤ by GitHub



Comments

Post a Comment