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.

1. PROTOTYPING UX SOLUTIONS WITH
PLAYGROUNDS AND LIGHTNING WEB
COMPONENTS
BARRY
HUGHES

2. #YeurDreamin2019
@bluewavegroup

3. #YeurDreamin2019
@devinthecloud (me!)

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: