Monday 21 September 2015

ReactJS and Salesforce Lightning SLDS 101




Having worked on writing visualforce page with React using Salesforce Lighting Design System I would like to share some experience  through this blog post.

Clearly  ReactJs can cherry pick difference in the DOM structure and updates the only part of DOM that is part of component, you read this post to know little in detail about ReactJs on getting started and understaning basics.

ReactJs with Remote Objects

Salesforce Remote Objects allows you query salesforce without glueing apex and purely writing UI intensive apps see here. I wrote code snippet that consume remote object and query salesforce, on top of it, he have imported Lighting Design System to fabricate the UI.


Salesforce Lighting Design System (CSS from Salesforce)

Salesforce have opened stylesheets now, for the world to incorporate Salesforce user experience with new Lighting UI. Out of the many components available, I will be using datatable component and header components to carve the layout of this page.


Single Page Application (SPA)

To showcase, component driven functionality with React, I wrote single page, keeping concepts simply to absorb, to give a kick start and direction for consuming this framework in the universe of Salesforce.Below is visualforce page that consume React component, click below to open in new page




Code Walkthrough

If you carefully notice, we reference all external javascript through CDN and some hosted on github, learn how to use Github as CDN with Salesforce.



The components are divided from top to bottom in two prime category of components nested

1. Account View : Parent component nesting child component
2. Account List : Child component polling Salesforce to list data rows

To visualize neatly you can see this tree structure shown below

  --Accountview
      ---AccountList
--Account 1
--Account 2
--Account 3


As you can see three component are primary designed here, Account Component is component to draw header of the table (list) declared as below


Secondly, AccountView is nesting drawing the view of table and nesting list component that queries Salesforce in the back




AccountList binds data into Tabular view and generates table



Notice, the use of  promises with Visualforce Remote Objects using code from in this repo (check it out) and not a single line of html code is written on visualforce end besides skeleton of the page, all code is written in JSX compiled into Javascript, also note for converting React JSX to javascript in production release, you can do it through Node React Tool


Whole code snippet is embedded below is ready to be served out of the box (import all required resources from CDN)


45 comments:

  1. Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is fantastic, let alone the content!

    3D animation Company
    Chatbot Development Company
    Android app development in Coimbatore

    ReplyDelete
  2. Thanks for sharing this blog.This article gives lot of information. reactjs training in Hyderabad

    ReplyDelete
  3. Your article is really good and was extremely helpful to the readers. Thanks for sharing post of this sort and in a better way.
    react js training in hyderabad

    ReplyDelete
  4. Thanks for posting such a Useful information .You have done a great job.
    React JS Online training

    ReplyDelete
  5. The article is so appealing. You should read this article before choosing the Big data engineering services you want to learn.

    ReplyDelete
  6. Thanks for sharing! Check out this great comparison of Angular and React from Cleveroad

    ReplyDelete
  7. Thank you for taking the time to provide us with your valuable information.
    Blockchain online training in Hyderabad!

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. Full stack Training in Chennai
    Thanks for giving great kind of information
    Full Stack Classes in Chennai

    ReplyDelete
  10. I've a researched article explaining major difference between React and Angular . It will help everyone to decide which framework is best for their website.

    ReplyDelete
  11. Great Post. Very informative. Keep Sharing!!

    Apply Now for Reactjs Training in Noida

    For more details about the course fee, duration, classes, certification, and placement call our expert at 70-70-90-50-90

    ReplyDelete
  12. I was looking for an appropriate clarification on salesforce field service. I much appreciate the administrator for sharing such extraordinary substance on this theme. Presently I have all I require about it. Here’s another enlightening substance for Salesforce Field Service , you will get well-informed data about it here.

    ReplyDelete
  13. I later this message,and that i wager that they having a laugh to log on this say,they shall proclamation you'll a satisfying web site to make a advocate,thank you for sharing it to me... Avast VPN License

    ReplyDelete
  14. this is such a nice useful resource that you are supplying and also you meet the price of it away for forgive. I hero reward seeing Websites that take at the value of supplying a setting useful resource for set wandering. it's far the primeval what goes on the order of comes almost about recurring..... Grammarly Cracked

    ReplyDelete
  15. Blissful Fathers Day is a grouping of ways to deal with say cheery birthday father, It will be hard to figure out what to express similarly as how to say it. Our fathers are one of the essential overseeing powers in our lives. They are who we call when we anticipate deals with any consequences regarding an issue. totally exciting save posting. Happy Father's Day 2022

    ReplyDelete
  16. Thank you for your blog.We are a mobile app Development service in mohali that create software that can be installed on the every device, and enabling backend services for data access through APIs.

    ReplyDelete
  17. Thanks for writing this blog, You may also like the Job seekers database

    ReplyDelete
  18. It will show an inventory of all applications you have installed on your PC. Go through the list to discover any programs that are related to SaveFrom.net. Then, select the program you want to uninstall and “Uninstall.” en.savefrom.net remove

    ReplyDelete
  19. Thanks for sharing this informative article on ReactJS and Salesforce Lightning SLDS 101. If you want to Hire MERN Stack Developer for your project. Please visit us.

    ReplyDelete

  20. World of Metals Iron and steel store

    We at WOM Offer a wide range of services ranging from Steel Fabrication, Factor Shed Fabrication and Installation, Smart Houses, Modular Houses, LGFS, PEB Buildings. We are also distributors for Tata BlueScope steel and Tata Steel-Nest in products for the state of Uttar Pradesh.

    ReplyDelete
  21. The blog effectively combines React JS and Salesforce Lightning Design System, providing readers with insights into the integration of these technologies and guiding them through the process of building UI-intensive applications using React JS within the Salesforce ecosystem. It is very good keep it up.

    ReplyDelete
  22. Thanks for sharing this informative article on ReactJS and Salesforce Lightning SLDS 101. If you want to reactjs development company for your project. Please visit us.

    ReplyDelete
  23. This is a great post. I like this topic.This site has lots of advantage.I found many interesting things from this site. It helps me in many ways.Thanks for posting.our sclinbio.com

    ReplyDelete
  24. you have provided the informative blog related to react js company. if Any one want react js development services for their project. kindly visit our website.

    ReplyDelete
  25. It is such a nice blog content , I very feel of informative content and timely taken also. If you want to learn Best Mern Stack Training in noida, Then contact us now.

    ReplyDelete
  26. The most beguiling sound I have ever heard in that framework is your voice. The most flawless spot I have ever been to is in your arms. thnx for shareing our https/-sclinbio.com

    ReplyDelete
  27. Great information Thank you.

    ELearn InfoTech Offers placement focused React JS Training Institute in Hyderabad. The trainers at ELearn InfoTech are corporate professionals providing in-depth React JS Training in Hyderabad. We are one of best React JS Institutes in Hyderabad. Our React JS course Content includes from Basic to Advanced Level React JS Course. We have designed our React JS course curriculam based on students Requirement to Achieve Goal. We offer both React JS classroom Training and React JS online Training in Hyderabad with real time projects.

    ReplyDelete

Introducing Lightning Base Components

Lightning Base Components are great addition to the platform and in fact revolutionary .One of the concerns around lightning component ...