Prototyping UX Solutions with Playgrounds and Lightning Web Components

1. Prototyping UX Solutions with Playgrounds and Lightning Web Components Barry Hughes

2. @bluewavegroup

3. @devinthecloud (me!)

4. Prototyping with Lightning Design System Starter Kit Github: https://github.com/salesforce-ux/design-system-starter-kit Webinar: https://youtu.be/Z1eNth9Yau Londons Calling 2017: https://youtu.be/oJm2nQz-tKM DF18 (Matilde and Jorge FinancialForce): https://youtube.com/watch?v=Pf9AKfKnlyc

5. 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.

6. The ‘Instant Experience’ Prototype

7. ‘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

8. 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!!

9. The Course and Scenario – with Lightning Web Components DX Ready Application developed in both Aura and LWCs

10. 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!

11. Github Repo and the Workshop bit Public Github Repo available https://github.com/barryhughes1/pluralSightQuestionnaires_LWCs DX Ready https://github.com/barryhughes1/pluralSightQuestionnaires_LWCs/wiki/09.-SECTION-2:-Creating-Lightning-Web-Components-in-Playgrounds

12. Salesforce Playgrounds 4 components in the Prototype - qlist = list of Questionnaires - qCard = displaying a Questionnaire in the List - qLWC = displaying a Questionnaire with Answers for completion - qAnswer = displaying an individual question with inputs to answer

13. Salesforce Playgrounds Demo / Workshop

14. Comparing Prototyping Tools Design System Starter Kit • 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 Playgrounds • Allows for Code progression • Supports lwc library imports • Not Secure • Not Persistent • Requires LWC development skills • Immediate Previews and Feedback • Intended for Developer use

15. Completing the Solution LWC topics learned in the workshop • kebab-case and camelCase • @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 (ConnectedCallback, RenderedCallback) https://youtu.be/C-SPSwQKTx4

16. LWC Design Pattern #1 Saving a parent record while saving a record Questionnaire List Questionnaire Card Questionnaire Answer Questionnaire createreturn (questionId) oncreatereturn createQuestionnaireReturn @apireturnId renderedCallback() fires and creates the Answer. NOTE: {returnId} in template 1. Creates a Questionnaire_Return__c 2. Updates @track questionnaireReturnedId 3. Passed into all Answers via the ‘return-id’ attribute

17. LWC Design Pattern #1 Saving a parent record while saving a record Demo / Workshop

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

19. LWC Design Pattern #2 Refreshing the List of Questionnaires Demo / Workshop

20. LWC CRUD Operations AccountCreator Wiki: Step 28 https://github.com/barryhughes1/pluralSightQuestionnaires_LWCs/wiki/28.-CRUD-Operations-in-Lightning-Web-Components Demo / Workshop

21. 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

22. Join us for drinks @18:00 sponsored by Workshop and Course Details Github Repo https://github.com/barryhughes1/pluralSightQuestionnaires_LWCs Github Wiki https://github.com/barryhughes1/pluralSightQuestionnaires_LWCs/wiki PluralSight Course https://www.pluralsight.com/courses/play-by-play-prototyping-ux-solutions-playgrounds-lightning-web-components This slidedeck is available at https://devinthecloud.wordpress.com Catch me on twitter @devinthecloud Community sponsors: NonProfit-track sponsor: