SharePoint Framework Tutorial 1 - HelloWorld Web Part

Подписаться 55 тыс.

Просмотров 62 тыс.

50% 1

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 RU-vid - aka.ms/m365/vi...
• Microsoft 365 Platform Community - aka.ms/m365pnp
Sharing is caring! You are awesome! 🧡

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 44

@Mark-nm9sm Год назад

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

@maxscootss 2 года назад

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.

@cliffordkpalam3988 15 дней назад

I have an issue with the default values. I followed all the steps and I still have "undefined" on my webpart

@lethabomashike 2 года назад

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 2 года назад

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.

@VeganSmasher 2 года назад

This is a lot of fun! 😁

@mathiasmyrmellmoen3859 4 дня назад

Is it possible to have the project on github, thus updates pushed to the master branch will automatically update the page?

@kannuruharish3452 7 месяцев назад

Thank you so much. It helped me a lot

@MicrosoftCommunityLearning 7 месяцев назад

Thanks for your feedback, appreciated

@akshaynangare1887 9 месяцев назад

Great information, I have started today

@MicrosoftCommunityLearning 9 месяцев назад

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.

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

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

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

@nebilibrahim2290 2 года назад

Or do you have your own RU-vid channel? Or is this it?

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

@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 2 года назад

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

@MSandovalPhD 2 года назад

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 2 года назад

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!

@heziyi1176 2 года назад

i have only 18 lines of code for HelloWorldWebPart.d.ts

@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

@leviuzodike9061 6 месяцев назад

Had to run `Set-ExecutionPolicy -ExecutionPolicy Unrestricted` to get permissions to run `yo @microsoft/sharepoint`

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

@nebilibrahim2290 2 года назад

Are you available on telegram or WhatsApp?

@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

@chandramouli3618 2 года назад

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

@MicrosoftCommunityLearning 2 года назад

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.

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