Let’s go! Learn SPFx Today! | Build a webpart using ReactJS in Real Time - ZERO TO HERO PART 5 of 5
HTML-код
- Опубликовано: 16 сен 2024
- #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/rob...
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.buymeacoff...
📧 📫 Join us on our developer journey! Sign up to our email newsletter:
robertsdevtalk...
🐦 Follow us on Twitter:
/ robertsdevtalk
🎶 Music by Epidemic Sound:
www.epidemicso...
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 😊
great for this next level series with great features,,, waiting fo more stuff #Spfx 😍
Thanks for your kind comment and support of the channel
Thank you! This has been so helpful.
You are welcome and thanks for your support of the channel
Thank you so much. It´s so much fun to learning with you. Love your content! 👋🔥♥
Thank you for your support, much appreciated
Thank you very much for great content.. waiting for more stuff😄
Thanks for your support of the channel Shubham
Thank you very much for this cool stuff! 😀 for me it's also nice that you left mistakes in the video, makes it easier to understand.
On my wishlist would be a webpart that interacts with other webparts on the same page, e.g. list webpart for chosing an entry using it to get and show details from other lists.
Thanks for your support, good idea for child/parent webparts demo
Sir, do you have a tutorial on how to embed spfx webpart to SP site and make it accessible to other users?
Hi Roberts, tks very much . Can you do a video about how create,delete and update in the list sharepoint using react and pnp ?
Hi. In this introduction I covered reading from the list, but absolutely, I will add that to a future episode. Thanks for your comment and your support
Good afternoon. Do you think you can extend this tutorial by adding the ability to manually select any list and choose the fields to display please?
That’s a good suggestion. In the meantime see here: pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldListPicker/
I published the app on Sharepoint App Catalog when I edit the page the webpart appears ok but when I publish my page it disappears and will not work giving an error: cannot connect to web? can you please help
Have you tried hard refreshing the browser, also is it configured to point to the correct list in properties? Also updated tutorial here: Let’s go! Learn SPFx Today! | Build a webpart using ReactJS in Real Time - ZERO TO HERO PART 1 of 5
ruclips.net/video/L6KdLjONndM/видео.html
Works perfect thank you mate@@RDT
Hi Robert,
Thank you so much for this series
I have an issue with this web part. I watched 5 videos and did this FAQ web part it's perfectly fine .but it works only in the FAQ SharePoint list. When I use some other SharePoint list the web part becomes blank.
How to resolve this issue
Are you sure the column names are the same as the one in the FAQ example. If not it will not display. Also open the developer console in your browser it should give you an error, copy and paste it here and I will take a look
Yeah, I used the same column name and column type. Now it shows the SharePoint title but SharePoint body part is blank.But in SharePoint list I have body data
@@RDT
This is my issue,
=>Failed to load resource: the server responded with a status of 404 ()
vendors~main~main-pfp_ace75879.js:1
=>Failed to load resource: the server responded with a status of 404 ()
main~main-pfp_a1763e9c.js:1
=>Failed to load resource: the server responded with a status of 404 ()
main-pfp_99020a81.js:1
=>Failed to load resource: the server responded with a status of 404 ()
search-instrumentation_09c52f70.js:1
=>Failed to load resource: the server responded with a status of 404 ()
search-logger_e2fcf0d1.js:1
=>Failed to load resource: the server responded with a status of 404 ()
search-page-strings_0c5f88af.js:1
=>Failed to load resource: the server responded with a status of 404 ()
sp-pages_en-us_a003ccc222bc36a84748.js:1
Uncaught (in promise) Error: Either Guest user or Cortex is not enabled!
at new t (sp-pages_en-us_a003ccc222bc36a84748.js:1:353847)
at N (sp-pages_en-us_a003ccc222bc36a84748.js:1:354298)
at t._tryRenderAnnotations (sp-pages_en-us_a003ccc222bc36a84748.js:1:377466)
at sp-pages_en-us_a003ccc222bc36a84748.js:1:356864
at sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:18542
at Set.forEach ()
at e._handleViewPortRendered (sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:18518)
at e._tryLoadOutsideViewport (sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:18266)
at e._onComponentFinish (sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:15368)
at e.onAfterComponentRenderOrError (sp-viewport-loader_none_5b9d002ce9309de24eb0.js:1:14718)
where is the final product? it looks like nothing, how do you sell this usecase to people if youre displaying nothing at the end
I am confused, what do you mean final product? The tutorial helps you to build a fully working FAQ list which is fed off a SharePoint list of your own FAQS???
I have a tutorial here on deployment if this is what you mean ruclips.net/video/wlD196cAfAQ/видео.html
Hi Sir,
Hope your doing well, I would like to know when are going to upload videos in which you can create Add-on in SPFx and deploy on Tenet server. and please let me know how can I contact you regarding SPFx.
I am not planning on doing any on premise examples only online 👍 thanks for your support of the channel