Project Timesheets Revisited Creating a Lightning Single Page

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 Based in the UK and Ireland IBM Principal Certified Developer (since 2000) 30 Employees Salesforce Certified Advanced Developer (2013) Salesforce Silver Cloud Alliance Partner Certified App Builder & Platform Developer I & II IBM Premier Partner (since 2000) Co-organiser of SF Developer Group in Dublin 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 • Angular. JS v 1. x Opportunity Project • C 3. js • Javascript Accessible via Salesforce ‘Hybrid Remote’ Mobile SDK app All code (incl unmanaged package) available at devinthecloud. wordpress. com Project Timesheet

Visualforce Single Page Application Demo

Visualforce Single Page Application Example and Code available at: devinthecloud. wordpress. com github. com/barryhughes 1

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 Angluar. JS has • Use SLDS instead of Bootstrap • CRUD operations and refreshing the list of records when required • Menu System

Project Timesheets – Lightning Components Demo

Project Timesheets – Lightning Components Title. Bar component SLDSX Tabs - Salesforce Labs - Open-source set of Lightning Components - Unmanaged Package https: //github. com/Force. Dot. Com. Labs/sldsx List of Records - slds-table (Responsive out-of-the-box) - aura: iteration over records - SLDSX button. Group & button https: //lightningdesignsystem. com

Navigation: List to Record Main SPA Component List of Records Div 1. Component 2. List of records (retrieved via Apex) 3. CRUD actions Component Controller 1. Use CSS to hide list and show Record Div if (active. Route == routes[i]) { $A. util. remove. Class(routes[i], "route--hide"); } else { $A. util. add. Class(routes[i], "route--show"); } 1. Add an <aura: dependency> tag to the Main SPA Component that refers to the Record display component. Record. Route Div (An empty div with an aura: id) Add Dependency <aura: dependency resource="markup: //c: Project. Timesheet. Form" />

Project Timesheets – Lightning Components Main SPA Component List of Records Div ‘Edit’ button pressed Record. Route Div ‘Record View’ component is pushed into and generated here Component Controller 3. Create the ‘Record View’ component edit. Record : function(component, id) { $A. create. Component( "c: Project. Timesheet. Form", { "id": id, "edit. Mode": "Edit”, "process. Mode": "Edit" }, function(cmp){ //Add the new button to the body array if (component. is. Valid()) { var body = component. find("record. Route"). get("v. body"); body. push(cmp); component. find("record. Route”). set("v. body", body); }} )}

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 5. ‘List of Records’ refreshes if a param is passed to router event List of Records Form Screen 2. Callback calls Router Event with params, then destroys itself 1. Controller invokes Apex method to update database Record Saved

Destroying a Lightning Component Main SPA Component List of Records Div save. Timesheet : function(component) { var action = component. get("c. save. Project. Timesheet"); action. set. Params({ pt : component. get("v. project_timesheet") }); action. set. Callback(this, function(a) { if (a. get. State() === "SUCCESS") { // record was saved var app. Event = $A. get("e. c: My. Timesheets. Cmp. Router"); app. Event. set. Params({ page. To. Open: "refresh. List” }); app. Event. fire(); component. destroy(); } else if (a. get. State() === "ERROR") { …. . } }); $A. enqueue. Action(action); Record. Route 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 Flexible and Re-usable Lightning Applications are URL addressable which allows a ‘hybrid-remote’ Mobile SDK app to directly use Lightning ‘Main SPA Component’ can be re-used within Lightning Experience as an enhanced related list mechanism Spring 16 enhancements Visualforce will always be supported and creating this SPA with a Visualforce Page is recommended in Trailhead Don’t replace Visualforce for Lightning if it is not necessary Lightning Out is a good compromise where a Lightning Component can enhance an existing Visualforce solution Javascript engines are having effects on Lightning functionality but this is improving

Q&A Barry Hughes Senior Developer Blue Wave Group barry. hughes@bluewavegroup. eu @devinthecloud. wordpress. com

Thank You Remember to tell us what you think in the event survey www. Londons. Calling. net/survey/ Barry Hughes Senior Developer, Blue Wave Group barry. hughes@bluewavegroup. eu @devinthecloud