Re-visited Creating a Lightning Single Page Application
"Exploring the transition from Visualforce Single Page Application to Lightning Single Page Application by Senior Developer Barry Hughes. Discover the journey of Project Timesheets, a feature-rich application, now re-created using Lightning Components. Dive into the challenges and solutions faced in adapting to the new framework, focusing on seamless interaction and efficient CRUD operations. Explore the evolution of the project and the developer's insights."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Project Timesheets Re-visited Creating a Lightning Single Page Application from a Visualforce Single Page Application Barry Hughes Senior Developer Barry.hughes@bluewavegroup.eu @devinthecloud
Blue Wave Group and me bluewavegroup.eu IBM Principal Certified Developer (since 2000) Based in the UK and Ireland Salesforce Certified Advanced Developer (2013) 30 Employees Certified App Builder & Platform Developer I & II Salesforce Silver Cloud Alliance Partner Co-organiser of SF Developer Group in Dublin IBM Premier Partner (since 2000) Salesforce Certified Instructor (2012) barry.hughes@bluewavegroup.eu
Project Timesheets A personal project that ended up in Production and at Dreamforce 15 A feature rich Single Page Application Consists of a single Visualforce page No Apex / Controller uses Remote Objects Bootstrap 3 Project Timesheet AngularJS v1.x Opportunity Project C3.js Javascript Accessible via Salesforce Hybrid Remote Mobile SDK app All code (incl unmanaged package) available at devinthecloud.wordpress.com
Visualforce Single Page Application Example and Code available at: devinthecloud.wordpress.com github.com/barryhughes1
What is a Single Page Application? A list of records with CRUD controls The list disappears to open a form/record viewing screen With seamless interaction between screens
Project Timesheets: Re-visited Re-creating the SPA using Lightning Components Issues to Consider: Most Lightning Component examples are Single Screen Applications or widgets Lightning Components framework does not have the router-template engine that AngluarJS has Use SLDS instead of Bootstrap CRUD operations and refreshing the list of records when required Menu System
Project Timesheets Lightning Components TitleBar component SLDSX Tabs - - - Salesforce Labs Open-source set of Lightning Components Unmanaged Package https://github.com/ForceDotComLabs/sldsx List of Records - - - slds-table (Responsive out-of-the-box) aura:iteration over records SLDSX buttonGroup & button https://lightningdesignsystem.com
Navigation: List to Record Component Controller 1. Use CSS to hide list and show Record Div Main SPA Component if (activeRoute == routes[i]) { $A.util.removeClass(routes[i],"route--hide"); } else { $A.util.addClass(routes[i],"route--show"); } List of Records Div 1. Component 2. List of records (retrieved via Apex) 3. CRUD actions 1. Add an <aura:dependency> tag to the Main SPA Component that refers to the Record display component. RecordRoute Div Add Dependency <aura:dependency resource="markup://c:ProjectTimesheetForm" /> (An empty div with an aura:id)
Project Timesheets Lightning Components Component Controller 3. Create the Record View component Main SPA Component editRecord : function(component, id) { $A.createComponent( "c:ProjectTimesheetForm", { "id": id, "editMode": "Edit , "processMode": "Edit" }, function(cmp){ //Add the new button to the body array if (component.isValid()) { var body = component.find("recordRoute").get("v.body"); body.push(cmp); component.find("recordRoute ).set("v.body", body); }} )} List of Records Div Edit button pressed RecordRoute Div Record View component is pushed into and generated here
Navigation Processing Records Main SPA Component 3.Main SPA listening for Event 4.The Event will hide the (empty) Form div and show List of Records div Router Event Refresh Event List of Records 2.Callback calls Router Event with params, then destroys itself 5. List of Records refreshes if a param is passed to router event Record Saved Form Screen 1.Controller invokes Apex method to update database
Destroying a Lightning Component saveTimesheet : function(component) { var action = component.get("c.saveProjectTimesheet"); action.setParams({ pt : component.get("v.project_timesheet") }); Main SPA Component List of Records Div action.setCallback(this, function(a) { if (a.getState() === "SUCCESS") { // record was saved var appEvent = $A.get("e.c:MyTimesheetsCmpRouter"); appEvent.setParams({ pageToOpen: "refreshList }); appEvent.fire(); component.destroy(); } else if (a.getState() === "ERROR") { .. } }); $A.enqueueAction(action); } RecordRoute Div User exits the record (Save or cancel) Component inside is destroyed in callback.
Conclusions A Design Pattern showing the Event based communication of Lightning Components Visualforce will always be supported and creating this SPA with a Visualforce Page is recommended in Trailhead Flexible and Re-usable Don t replace Visualforce for Lightning if it is not necessary Lightning Applications are URL addressable which allows a hybrid-remote Mobile SDK app to directly use Lightning Lightning Out is a good compromise where a Lightning Component can enhance an existing Visualforce solution Main SPA Component can be re-used within Lightning Experience as an enhanced related list mechanism Javascript engines are having effects on Lightning functionality but this is improving Spring 16 enhancements
Q & A Barry Hughes Senior Developer Blue Wave Group barry.hughes@bluewavegroup.eu @devinthecloud devinthecloud.wordpress.com
Thank You Remember to tell us what you think in the event survey www.LondonsCalling.net/survey/ Barry Hughes Senior Developer, Blue Wave Group barry.hughes@bluewavegroup.eu @devinthecloud
