This document summarizes a presentation about developing user-friendly SharePoint Framework (SPFx) web parts with governance in mind. It discusses design considerations for different types of users, the four experiences involved in using a web part from initial placement to full configuration, and making plans to condense functionality and optimize for mobile. It also covers exposing relevant properties for configuration and controlling web parts, and obtaining property controls from the SharePoint repository. The presentation emphasizes designing for non-technical users, simplifying experiences, using available controls, and getting feedback.

1. Developing User-Friendly SPFx Web Parts
with Governance In-Mind
SHAREPOINT CONNECT CONFERENCE, HAARLEM, NETHERLANDS
D’ARCE HESS & ERWIN VAN HUNEN

2. AGENDA
Introductions
2
3
4
1
Design Considerations
Development & Controls
Take Away

3. INTRODUCTIONS

4. Erwin van Hunen
MCM, MVP
Product Manager, Rencore
https://www.erwinmcm.com
@erwinvanhunen
https://www.linkedin.com/in/erwinvanhunen/

5. D’arce Hess, MVP, PSM
President | DH Consulting LLC
dhess@dhconsulting.me
https://darcehessllc.com
@darcehess
https://www.linkedin.com/in/darcehess

6. DESIGN
CONSIDERATIONS

7. Types of Users
Content Creator Content Consumer

8. Four Experiences
STEP THREE
Content Creator
STEP TWO
Content Creator
STEP ONE
Content Creator
Initial web part
placement on page
Configuration of
web part properties
Edit item properties
Full configured/
Published web part
STEP FOUR
Content Creator/ Content Consumer

9. DEMO

10. The fact that you know
SharePoint for years should not
be reflected in your design

11. Users are not technical. Treat
them as such.

12. MAKE A PLAN

13. What outcome do you
want to achieve?

14. Can you condense the
need for multiple web
parts into one?

15. What is the experience
for mobile users?

16. Adoption is directly
related to ease of use

17. DEVELOPMENT &
CONTROLS

18. Expose properties
where relevant

19. DEMO

20. Get the Controls
https://github.com/sharepoint/sp-dev-fx-property-controls
npm install @pnp/spfx-property-controls
Will install the controls into your solution:
Source Code:

21. A FINAL REVIEW

22. Who is the audience
Remember…
Make it Simple Use the Controls Get Feedback

24. THANK YOU