SharePoint Framework Tutorial 1 - HelloWorld Web Part
HTML-код
- Опубликовано: 30 сен 2024
- This tutorial will guide you creating your first client-side web part using the SharePoint client-side development tools.
⬅️ This tutorial assumes that you have completed following steps - • Set up your SharePoint...
➡️ Next steps are in following video - • SharePoint Framework T...
You can find written version of this tutorial from following location - docs.microsoft...
April 2022 version using SharePoint Framework 1.14.
• Presenter - Vesa Juvonen (Microsoft) | @vesajuvonen
SharePoint Framework (SPFx) is the easiest professional developer option to build enterprise extensibility for Microsoft Teams, Microsoft Viva and SharePoint. There are tens of millions of monthly active users (MAU) for custom extensibility in Microsoft 365 built with SPFx.
Supporting materials:
• Tutorial documentation - docs.microsoft...
• More details around SharePoint Framework - aka.ms/spfx
Learn more:
• Microsoft 365 Unified Sample gallery - aka.ms/m365/sa...
• Microsoft 365 Platform Community in RUclips - aka.ms/m365/vi...
• Microsoft 365 Platform Community - aka.ms/m365pnp
Sharing is caring! You are awesome! 🧡
Is it possible to have the project on github, thus updates pushed to the master branch will automatically update the page?
Or do you have your own RUclips channel? Or is this it?
i have only 18 lines of code for HelloWorldWebPart.d.ts
I have an issue with the default values. I followed all the steps and I still have "undefined" on my webpart
Had to run `Set-ExecutionPolicy -ExecutionPolicy Unrestricted` to get permissions to run `yo @microsoft/sharepoint`
Ran into the same gulp serve issue mentionned earlier. after a gd hour, tried to set edge as the default browser and it worked, seems like there's a setting for firefox, let's move forward now! Thx for the video.
Nice tutorial , understood some basic stuff , would love to see web parts with react
I appreciate the video's and effort to educate us but It is very difficult to follow your tutorials at times. Please have links to previous videos if you have already covered a section on the current video so we can keep up with you.
Thanks for the input, we have included the previous and next videos on this series on the video description to make it easy to see if there re any previous steps or what you should do next. Hopefully those are the details you are looking for.
hello, how do you open a new tab in the quick links web part, I think it doesn't have that option. Would you know how to create a quick links webpart, but when you click the link it opens a new tab??
Are you available on telegram or WhatsApp?
How you done the gulp 'trust-dev-cert'
it's not accepting any password. I am using mac
Please add any questions to aka.ms/spfx-issues so that our engineering can help you. Thx
Cannot find module './HelloWorldWebPart.module.scss' or its corresponding type declarations.ts(2307)
Please add an issue at aka.ms/spfx/issues with environment version details and repro steps - SPFx team is happy to help you.
Is it possible to Customize the Navigation bar using spfx! Basically hide items like 'Shared with us' using code. If it is, please let me know how.
Thank you
This is not available by default, but as it's all html structures, you could use Application Customizer to inject CSS which hides the needed elements using style definitions. We do not really recommend hiding oob features, but if this is a hard requirement for you, it can be done.
I followed the steps. However, no "HelloWorld" web parts appear. and no error from prompt. Could you me some advice ?
Please add a message at aka.ms/spfx-issues and engineering team and/or community can provide support for you. Remember to provide environment version details etc.
when I pick "HelloWorld" web part I get this error "Manifest not found for component id"
That implies that you have a mismatch on the component id which is in the manifest and the deployment. Would submit an issue at aka.ms/spfx-issues with additional details on the steps you followed and on your environment.
Question. Can I practice sp development without buying ms sp? I just want to practice dev with sp
You can subscribe to free Microsoft 365 Developer tenant and do development there. All tooling and development models are free for you to us. Here's details on developer program - developer.microsoft.com/en-us/microsoft-365/dev-program
After writing gulp serve @ terminal, it's directly firing to sharepoint but it is not working
We would need a bit more details on how it's not working to be able to help here. Can you please submit details at aka.ms/spfx-issues and engineering team can help with this. Thx.
This is fantastic. Extremely helpful for getting your toes in the water. Can you please have Vesa do a tutorial similar to this on implementing something like Modern Taxonomy Picker or any of the controls from spfx controls react? That would be so nice, there is very minimal amount of information on this out there.
1. It is important to mention that if users don't have the same version of Gulp installed, the mismatch may cause a problem. The last version of gulp working with this framework is 2.0.1. Gulp-CLI 2.3.0 fails when following the tutorial (20/07/2022).
2. When I ran the server, I found some errors such as 'copy-static-assests' Error: Invalid or missing glob strings. Is there a previous step for the SP site itself? I believe it's a matter of security.
Update: for those with issues when using gulp. I'm on Windows.
1. In the same directory where you have package.json create a .json file with the following contents:
{
"dependencies": {
"graceful-fs": {
"version": "4.2.2"
}
}
}
2. Run npm install, and don't worry, it will update the json file.
3. Run gulp to start the project.
Enjoy!
Hi
Interesting.
Is it possible to make a chat / comments web part...
With email notifications when a new comments have been added.... And the notification will have a link to the SharePoint page where the web part exist?
Seems like a pretty basic scenario which could be indeed solved with writing the needed code with SPFx. So yes - that could be indeed done with the APIs which are available.
@@MicrosoftCommunityLearning
Sounds good.
Do you offered this kind of web part development as a service?
We would pay on a project basis ?
Possible?
@@csv1971 We as Microsoft engineering do not provide this kind of service, but there are local country level Microsoft contacts and global partner ecosystem which can be hired by customers. There are tens of thousands of partners globally in Microsoft partner ecosystem who can help on this for sure. We cannot name directly anyone from our side, but using search engines, you can easily find contacts globally.
Thank you so much. It helped me a lot
Thanks for your feedback, appreciated
Great information, I have started today
Excellent - thanks for the feedback and don't miss out the unified sample gallery for existing samples from the community at aka.ms/community/samples. Can be helpful for ideas and sample code.
Can you please help me understand why when performing 'gulp serve', the window comes up but the web part is not available, please? I have tried various troubleshooting but to no avail. I even tried using Ubuntu, but did not work either. It's driving me nuts......
is your url which gulp serve opens the url of your sharepoint site?
@@dikara7224 Hi, thanks for your help. I had managed to sort the issue. Turned out, it was the browser... I switched to Edge from Firefox and it worked fine. On another note, do you by any chance know if the steps are the same when setting up the environment on Ubuntu? I have tried but got stuck on gulp serve. And the issue was not the browser in that case.
@@masquerade0133 unfortunately im not into linux
@@dikara7224 Okay thanks for your help though. Good day :)
I too have same problem with it so please can you help me how to solve this issue
This is a lot of fun! 😁