While we have already discovered how to use the Lightning components in our VisualForce pages there are other ways available to developers to have the same look and feel of a Lightning design system in a VisualForce page without the use of any Lightning components. The Lightning design system provides a material design approach to VisualForce pages which is certainly an upgrade over the monotonous VisualForce pages. It’s event based faster response will only add more capability and enhance a VisualForce page’s functionality.
To incorporate Lightning design system on your VF pages use the “” tag in the VF page. This component/tag is used as an alternative to uploading design system file in static resource. The markup reference language can use the Lightning design system’s styles and assets under the class “slds-scope”. To use the design system’s assets such as SVG images and icons we use the URLFOR() function and $Asset global variable.
Below mentioned is a small snippet on how to use the Lightning design system in your VisualForce page. For a more advanced and a detailed example, please visit this Salesforce developer blog
Code
Once the code is incorporated in your page your page will be viewed as below, since we are using the “Contact” as standard controller we are passing the id of the Contact in the URL.
Page
With the help of apex controllers and other controller side scripting the developers can integrate a full functional page in lightning design system without any hiatus thus providing us with a UI which comprises the core functionalities of Salesforce classic incorporated with a touch of Lightning.
About Us
Greytrix as a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners across the globe. We offers Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that requires apex code incorporation into the Salesforce platform.
Greytrix has some unique solutions for Cloud CRM such as Salesforce integration with Sage Enterprise Management (Sage X3), Sage Intacct, Sage 100 and Sage 300 (Sage Accpac). We also offer best-in-class Cloud CRM Salesforce customization and development services along with services such as Salesforce Data Migration, Integrated App development, Custom App development and Technical Support to business partners and end users.
Greytrix GUMU™ integration for Sage ERP – Salesforce is a 5-star app listed on Salesforce AppExchange.
For more information, please contact us at salesforce@greytrix.com. We will be glad to assist you.
Related Posts
Pingback: Using Nested Lightning Components in Salesforce - Salesforce.com-Tips and Tricks