SharePoint Framework Tutorial 1 - HelloWorld Web Part

Рет қаралды 57,301

2 жыл бұрын

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.com/en-us/shar...
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.com/en-us/shar...
• More details around SharePoint Framework - aka.ms/spfx
Learn more:
• Microsoft 365 Unified Sample gallery - aka.ms/m365/samples
• Microsoft 365 Platform Community in KZfaq - aka.ms/m365/videos
• Microsoft 365 Platform Community - aka.ms/m365pnp
Sharing is caring! You are awesome! 🧡

Пікірлер: 42

@VeganSmasher 2 жыл бұрын

This is a lot of fun! 😁

@Marco-bg2mv Жыл бұрын

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.

@Mark-nm9sm 11 ай бұрын

Nice tutorial , understood some basic stuff , would love to see web parts with react

@maxscootss Жыл бұрын

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.

@kannuruharish3452 4 ай бұрын

Thank you so much. It helped me a lot

@MicrosoftCommunityLearning 4 ай бұрын

Thanks for your feedback, appreciated

@akshaynangare1887 6 ай бұрын

Great information, I have started today

@MicrosoftCommunityLearning 6 ай бұрын

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.

@lethabomashike Жыл бұрын

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.

@MicrosoftCommunityLearning Жыл бұрын

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.

@mariavitoriaaugusto6381 Жыл бұрын

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??

@MSandovalPhD Жыл бұрын

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.

@MSandovalPhD Жыл бұрын

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!

@MonkeyDLuffy-rt1ro Жыл бұрын

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

@MicrosoftCommunityLearning Жыл бұрын

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.

@TheRealHouji 2 жыл бұрын

Question. Can I practice sp development without buying ms sp? I just want to practice dev with sp

@MicrosoftCommunityLearning 2 жыл бұрын

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

@nebilibrahim2290 Жыл бұрын

Or do you have your own KZfaq channel? Or is this it?

@clerkb Жыл бұрын

I followed the steps. However, no "HelloWorld" web parts appear. and no error from prompt. Could you me some advice ?

@MicrosoftCommunityLearning Жыл бұрын

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.

@csv1971 Жыл бұрын

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?

@MicrosoftCommunityLearning Жыл бұрын

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.

@csv1971 Жыл бұрын

@@MicrosoftCommunityLearning Sounds good. Do you offered this kind of web part development as a service? We would pay on a project basis ? Possible?

@MicrosoftCommunityLearning Жыл бұрын

@@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.

@chandramouli3618 Жыл бұрын

After writing gulp serve @ terminal, it's directly firing to sharepoint but it is not working

@MicrosoftCommunityLearning Жыл бұрын

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.

@ghassanrambo170 Жыл бұрын

when I pick "HelloWorld" web part I get this error "Manifest not found for component id"

@MicrosoftCommunityLearning Жыл бұрын

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.

@ramanpratap Жыл бұрын

How you done the gulp 'trust-dev-cert' it's not accepting any password. I am using mac

@MicrosoftCommunityLearning Жыл бұрын

Please add any questions to aka.ms/spfx-issues so that our engineering can help you. Thx

@masquerade0133 2 жыл бұрын

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......

@dikara7224 2 жыл бұрын

is your url which gulp serve opens the url of your sharepoint site?

@masquerade0133 2 жыл бұрын

@@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.

@dikara7224 2 жыл бұрын

@@masquerade0133 unfortunately im not into linux

@masquerade0133 2 жыл бұрын

@@dikara7224 Okay thanks for your help though. Good day :)

@chandramouli3618 Жыл бұрын

I too have same problem with it so please can you help me how to solve this issue

@nebilibrahim2290 Жыл бұрын

Are you available on telegram or WhatsApp?