Prototyping UX Solutions with Playgrounds and Lightning Web Components
Download as PPTX, PDF0 likes136 views
In this workshop, you’ll learn about design and development techniques for building custom solutions for the Salesforce Lightning Platform, which provides a powerful toolset for developers and administrators to create immersive experiences for users. The workshop will provide a hands-on materials creating designs with Design System Starter Kit, creating ‘composite’ Lightning Web Components in Playgrounds, adding these as Lightning Web Components to a scratch org and completing the project using Apex calls, Data Service, and Record Operations.
Ad
More Related Content
What's hot (20)
Similar to Prototyping UX Solutions with Playgrounds and Lightning Web Components (20)
Ad
More from YeurDreamin' (19)
Ad
Recently uploaded (20)
![Download Wondershare Filmora Crack [2025] With Latest](https://cdn.slidesharecdn.com/ss_thumbnails/neo4j-howkgsareshapingthefutureofgenerativeaiatawssummitlondonapril2024-240426125209-2d9db05d-250419-250428115407-a04afffa-thumbnail.jpg?width=560&fit=bounds)
Prototyping UX Solutions with Playgrounds and Lightning Web Components
- 1. PROTOTYPING UX SOLUTIONS WITH PLAYGROUNDS AND LIGHTNING WEB COMPONENTS BARRY HUGHES
- 4. #YeurDreamin2019 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. #YeurDreamin2019 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. #YeurDreamin2019 The ‘Instant Experience’ Prototype
- 7. #YeurDreamin2019 ‘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. #YeurDreamin2019 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. #YeurDreamin2019 The Course and Scenario – with Lightning Web Components DX Ready Application developed in both Aura and LWCs
- 10. #YeurDreamin2019 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. #YeurDreamin2019 Github Repo and the Workshop bit DX Ready Public Github Repo available https://github.com/barryhughes1/pluralSi ghtQuestionnaires_LWCs https://github.com/barryhughes1/pluralSig htQuestionnaires_LWCs/wiki/09.- SECTION-2:-Creating-Lightning-Web- Components-in-Playgrounds
- 12. #YeurDreamin2019 Salesforce Playgrounds Demo / Workshop
- 13. #YeurDreamin2019 Salesforce Playgrounds Demo / Workshop
- 14. #YeurDreamin2019 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. #YeurDreamin2019 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. #YeurDreamin2019 LWC Design Pattern #1 Saving a parent record while saving a record Questionnaire List Questionnaire Card Questionnaire Questionnaire Answer @api returnId renderedCallback() fires and creates the Answer. NOTE: {returnId} in template oncreatereturn createQuestionnaireReturn createreturn (questionId) 1. Creates a Questionnaire_Return__c 2. Updates @track questionnaireReturnedId 3. Passed into all Answers via the ‘return-id’ attribute
- 17. #YeurDreamin2019 LWC Design Pattern #1 Saving a parent record while saving a record Demo / Workshop
- 18. #YeurDreamin2019 LWC Design Pattern #2 Refreshing the List of Questionnaires Questionnaire List Questionnaire Card Questionnaire Questionnaire Answer 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 Creating a new Questionnaire_Return__c record createQuestionnaireReturn function 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’ Creating a new Questionnaire_Answer__c record Dispatches a customEvent called ‘updatequestionnairelist’ with an ‘operation’ paremeter value of ‘New Answer’ bubbles bubbles
- 19. #YeurDreamin2019 LWC Design Pattern #2 Refreshing the List of Questionnaires Demo / Workshop
- 20. #YeurDreamin2019 Join us for drinks @18:00 sponsored by Community sponsors: 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 NonProfit-track sponsor: