Let’s go! Learn SPFx Today! | Build a webpart using ReactJS in Real Time - ZERO TO HERO PART 3 of 5
Вставка
- Опубліковано 29 сер 2022
- #spfx #sharepoint #webpart
In this mini series of 5 episodes we set up the latest 2022 1.15.2 development environment and build a SharePoint webpart using the SharePoint Framework and the PnP Controls
pnp/sp
spfx-react-controls
spfx-react-property-controls
By the end of the 5 episodes you will know how to build a webpart using the latest SharePoint Framework and PnP Controls
For more tutorials, see our playlist/series "SharePoint Framework for Beginners"
Source Code: github.com/robpearmain/spfx-pnp
If you would like the source code, or require support please support us on Patreon at / robertsdevtalk
Why not also head over to www.robertsdevtalk.com and sign up, for latest news
Whether you develop in Javascript or a Javascript framework such as ReactJS or VueJS, you will benefit from this weekly series.
☕️ Don't forget, old developers need coffee (and.. beer and pizza too 🍺 🍕)
www.buymeacoffee.com/Robertsd...
📧 📫 Join us on our developer journey! Sign up to our email newsletter:
robertsdevtalk.com
🐦 Follow us on Twitter:
/ robertsdevtalk
🎶 Music by Epidemic Sound:
www.epidemicsound.com/referra...
Our gear - click through to support our channel! :)
Camera (Canon M50)
🇬🇧 UK: amzn.to/3sUbzuL
🇺🇸 US: amzn.to/3uBsG5c
Camera mic (RODE VideoMic Pro)
🇬🇧 UK: amzn.to/3ml8xgC
🇺🇸 US: amzn.to/2RkGxyi
Camera tripod (Manfrotto Compact tripod):
🇬🇧 UK: amzn.to/3fJGyWU
🇺🇸 US: amzn.to/3mF4oV2
Voiceover Mic (Blue Yeti)
🇬🇧 UK: amzn.to/2PV7UOQ
🇺🇸 US: amzn.to/3uMiEym
Chris's dev mouse for PC (Logitech MX Master 3)
🇬🇧 UK: amzn.to/39K7BNV
🇺🇸 US: amzn.to/3uKYvso
Chris's dev keyboard for PC (Logitech MX Keys)
🇬🇧 UK: amzn.to/3rSbHcX
🇺🇸 US: amzn.to/3a6Unef
Rob's dev keyboard for Mac (Apple Magic Keyboard)
🇬🇧 UK: amzn.to/3dEQpKG
🇺🇸 US: amzn.to/3sb6JZc
Rob's dev mouse for Mac (Apple Magic Mouse)
🇬🇧 UK: amzn.to/3sRCQhr
🇺🇸 US: amzn.to/3mFi6qS
Icons in this video kindly provided by FlatIcon from Freepik
www.freepik.com
www.flaticon.com
Disclaimer - some of our links are affiliate links, which means that we receive a small commission for any sales made via those links, at no extra cost to you - so a great way to support our channel! Thank you so much for your support 😊
thank for all ...
You are very welcome
Thank you !
Excellent - thanks
Thanks for your kind comment and support of the channel
Thanks sir you have helped me a lot.
Glad to hear that. Thanks for supporting the channel
great feature looking forward ,,,,
Thanks for the kind comment and support of the channel
@@RDT waiting for more sir...
sweet
Nice, thx.
One question. What do you prefer/like (or best practise) create interface or use any type ?
I would always use a type. Due to some issue with PnP and the context the workaround is currently to use ‘any’ which is a shame and hopefully will be resolved. If you need to create a type from an API I have a video here which makes it easy Typescript Interface from a JSON API in 2 Minutes using QuickType
ua-cam.com/video/7Y_2ywQMQEY/v-deo.html
Is it possible to extract the ATTACHMENTS default column of the list please? I do get "false" on rendering. Thanks.
Yes, pnp.github.io/pnpjs/sp/attachments/
Merry Christmas. You code now works perfect. however I have a list with 1700 items your code displays only first 100..... any ideas how to fix this please?
Yes, on the url call to the api to get list items add &top=1000 or however many you want
how to change base url , currently its using local url , but i want to setup anotherone api base url
Hi. You can change the URL for the debug site in the config file. If you mean change API for lists, you can use the full path but it may struggle with credentials.
How render the list as drop-down menu?
This might help stackoverflow.com/questions/61764911/spfx-show-list-items-in-a-drop-down-not-in-web-part-property
@@RDT I mean I have the list data from SharePoint how to convert that data and render it in a drop-down menu..could you help?
Thank you
const LOG_SOURCE = 'FAQ Webpart'; build failed variable delcared but never used any suggesitons please
If you comment it out does it build.?
That worked for me@@RDT
notice how tutorials always skip over the person field ;)
That's true! Maybe I should do a tutorial dedicated to the person field
I have the next error:
const element: React.ReactElement
Type 'DetailedReactHTMLElement' is not assignable to type 'ReactElement'.
Types of property 'props' are incompatible.
Type 'InputHTMLAttributes' is missing the following properties from type 'IFaqProps': description, isDarkTheme, environmentMessage, hasTeamsContext, and 2 more.ts(2322)
Can you help me ?
Are you passing in all of the properties from the .ts to the .tsx? The source code is here for reference github.com/robpearmain/spfx-pnp
@@RDT thanks