PROTOTYPING UX SOLUTIONS WITH PLAYGROUNDS AND LIGHTNING WEB

PROTOTYPING UX SOLUTIONS WITH PLAYGROUNDS AND LIGHTNING WEB COMPONENTS BARRY HUGHES

@bluewavegroup #Yeur. Dreamin 2019

@devinthecloud (me!) #Yeur. Dreamin 2019

Prototyping with Lightning Design System Starter Kit Github: https: //github. com/salesforce-ux/design-system-starter-kit Webinar: https: //youtu. be/Z 1 e. Nth 9 Yau Londons Calling 2017: https: //youtu. be/o. Jm 2 n. Qz-t. KM DF 18 (Matilde and Jorge Financial. Force): https: //youtube. com/watch? v=Pf 9 AKf. Knlyc #Yeur. Dreamin 2019

The Course and Scenario: Questionnaires and Returns Custom app allowing for the creation of ‘Questionnaire’ records with sibling ‘Question’ records. Users can then create ‘Answer’ records for each Question after creating a ‘Questionnaire Return’ record – a parent for all Answer questions for specific users. Completing Questionnaires is a complex process with standard Salesforce navigation. #Yeur. Dreamin 2019

The ‘Instant Experience’ Prototype #Yeur. Dreamin 2019

‘Composite’ Aura Components Copy markup from the prototypes HTML files in to Lightning Aura Components Replace nunjucks code expressions with Lightning Component markup. Add JSON to the javascript initialization and set to an aura component. Complete the solution by adding Lightning Data Service into constituent components. https: //app. pluralsight. com/library/courses/play-by-play-prototyping-ux-solutions-lightning-components #Yeur. Dreamin 2019

Prototyping for Lightning Web Components So have things changed? Announced in December 2019 at New York World Tour A new way to create Lightning Components - uses similar Lightning Base Components - uses the same Apex Classes as Aura Components But is it the same when it comes to prototyping? I had to find out! I blame Don Robins for all of this!! #Yeur. Dreamin 2019

The Course and Scenario – with Lightning Web Components DX Ready Application developed in both Aura and LWCs #Yeur. Dreamin 2019

Playgrounds …. to the rescue! Very useful tool to learn about and try out Lightning Base Components An excellent tool for iterating code and prototyping components. - SLDS - Base Components - Custom Events (!!) Faster than pushing source to a scratch org – especially iterating and fixing errors! #Yeur. Dreamin 2019

Github Repo and the Workshop bit Public Github Repo available https: //github. com/barryhughes 1/plural. Si ght. Questionnaires_LWCs DX Ready https: //github. com/barryhughes 1/plural. Sig ht. Questionnaires_LWCs/wiki/09. SECTION-2: -Creating-Lightning-Web. Components-in-Playgrounds #Yeur. Dreamin 2019

Salesforce Playgrounds 4 components in the Prototype - qlist = list of Questionnaires - q. Card = displaying a Questionnaire in the List - q. LWC = displaying a Questionnaire with Answers for completion - q. Answer = displaying an individual question with inputs to answer #Yeur. Dreamin 2019

Salesforce Playgrounds Demo / Workshop #Yeur. Dreamin 2019

Comparing Prototyping Tools Design System Starter Kit Playgrounds • Allows for Code progression • Supports HTML and javascript only • Can be made available securely (Heroku) • Code is persistent and can be version controlled • Web Developer skills • Immediate Previews and Feedback (via npm) • Intended for User Acceptance • • Allows for Code progression Supports lwc library imports Not Secure Not Persistent • Requires LWC development skills • Immediate Previews and Feedback • Intended for Developer use #Yeur. Dreamin 2019

Completing the Solution LWC topics learned in the workshop • kebab-case and camel. Case • @api, @track • Displaying LWCs in Lightning App Builder (xml file) • Calling @cacheable Apex methods (and refreshing cache) • Lightning Data Service • One-way binding • CRUD Operations • Lifecycle hooks (Connected. Callback, Rendered. Callback) https: //youtu. be/C-SPSw. QKTx 4 #Yeur. Dreamin 2019

LWC Design Pattern #1 Saving a parent record while saving a record Questionnaire List Questionnaire Card Questionnaire Answer oncreatereturn create. Questionnaire. Return 1. Creates a Questionnaire_Return__c 2. Updates @track questionnaire. Returned. Id 3. Passed into all Answers via the ‘return-id’ attribute createreturn (question. Id) @api return. Id rendered. Callback() fires and creates the Answer. NOTE: {return. Id} in template #Yeur. Dreamin 2019

LWC Design Pattern #1 Saving a parent record while saving a record Demo / Workshop #Yeur. Dreamin 2019

LWC Design Pattern #2 Refreshing the List of Questionnaires Questionnaire List Questionnaire Card Refreshed from Apex call updatequestionnairelist listened to in a div Sets the @track operation value When onclose next fired the @wire apex method is refreshed and called. bubbles Questionnaire Answer Creating a new Questionnaire_Return__c record create. Questionnaire. Return function Creating a new Questionnaire_Answer__c record Dispatches a custom. Event called ‘updatequestionnairelist’ with an ‘operation’ paremeter value of ‘New Return’ Marking a Questionnaire_Return__c record as Completed mark. Questionnaire. Complete Dispatches a custom. Event called ‘updatequestionnairelist’ with an ‘operation’ paremeter value of ‘New Return’ bubbles Dispatches a custom. Event called ‘updatequestionnairelist’ with an ‘operation’ paremeter value of ‘New Answer’ #Yeur. Dreamin 2019

LWC Design Pattern #2 Refreshing the List of Questionnaires Demo / Workshop #Yeur. Dreamin 2019

LWC CRUD Operations Account. Creator Wiki: Step 28 https: //github. com/barryhughes 1/plural. Sight. Questionnaires_LWCs/wiki/28. -CRUD-Operations-in. Lightning-Web-Components Demo / Workshop #Yeur. Dreamin 2019

Playgrounds, Prototyping and Iterative Design on Salesforce – the future Prototyping and RAD are getting more and more love from Salesforce! Nathan Totten spoke of a new Web based IDE currently in development in Salesforce #Yeur. Dreamin 2019

Workshop and Course Details Join us for drinks @18: 00 sponsored by Github Repo https: //github. com/barryhughes 1/plural. Sight. Questionnaires_LWCs Github Wiki https: //github. com/barryhughes 1/plural. Sight. Questionnaires_LWCs/wiki Community sponsors: Plural. Sight Course https: //www. pluralsight. com/courses/play-by-play-prototyping-ux-solutionsplaygrounds-lightning-web-components This slidedeck is available at https: //devinthecloud. wordpress. com Non. Profit-track sponsor: Catch me on twitter @devinthecloud #Yeur. Dreamin 2019