How to Upgrade SharePoint Framework solutions

How to Upgrade SharePoint Framework solutions


It is a continuation of previous article, if you’ve missed it. I recommend you to first walk through the links provided above suggestion for SharePoint Framework.

Suggested Topics

What is SharePoint Framework (SPFx)

Future prospects of SharePoint Framework (SPFx)

Required tools and libraries for SharePoint Framework (SPFx) development

Setup Microsoft 365 tenant for SharePoint Framework development

Setup SharePoint Framework client side web part development environment

Build SharePoint client side web part using SharePoint Framework (SPFx) – I

Build SharePoint client side web part using SharePoint Framework (SPFx) – II

Build SharePoint client side web part using SharePoint Framework (SPFx) – III

How to Debug SharePoint Framework Solutions in Visual Studio Code

What is the Developers Point of View on SharePoint Framework

What is Required Toolchain for SharePoint Framework

How to Integrate gulp tasks with SharePoint Framework Toolchain

How to Provision SharePoint assets with solution packages

How to Upgrade SharePoint Framework client side solutions in SharePoint Online

Let’s begin

In this article, I’ve used same project which I had created in previous article “How to Provision SharePoint assets with solution packages“.

Here, I’ll demonstrate, how to upgrade existing SharePoint Framework (SPFx) app in SharePoint Online.

Now, open existing project in Visual Studio Code and add a new element file named as “elements-v2.xml” with content showed below:

upgrade-sharepoint-framework-app-1

Add another XML file “upgrade-actions-v2.xml” for upgrade action. It should’ve location based on the folder name as a GUID which is placed under SharePoint -> Solution -> debug.

upgrade-sharepoint-framework-app-2

Now make below highlighted changes in “package-solution.json”. You must change below mentioned attributes:

  1. version – It should be increased.
  2. elementManifests – It will also include “elements-v2.xml” file.
  3. upgradeActions – It will hold file name of upgrade actions i.e. “upgrade-actions-v2.xml”

upgrade-sharepoint-framework-app-3

Now run below command:

gulp bundle –ship

upgrade-sharepoint-framework-app-4

Thereafter, create a package for our solution using below command:

gulp package-solution –ship

upgrade-sharepoint-framework-app-5

Now, again deploy (refer “How to Provision SharePoint assets with solution packages”) package .sppkg file. After deployment, you’ll see upgraded version of file in app catalog as below:

upgrade-sharepoint-framework-app-6

If you click on app’s tile, you shall see message to to get upgraded version of app.

upgrade-sharepoint-framework-app-7

Click on Get IT button and see the effect. You’ll see additional new list under site contents.

upgrade-sharepoint-framework-app-8

 

I hope you enjoyed learning this tutorial and It will help you to move forward in SharePoint Framework (SPFx) world.

Please share your suggestions in the comment box below about this tutorial. This will help me to provide useful content moving forward .


Hope you enjoyed reading it.

Please don't forget to Share, Follow and Like to get updated with latest posts.

It gives me motivation to share more knowledge with you.


About Author

Satyendra Mishra

Project Management Professional (PMP) and Microsoft certified, motivated, energetic and accomplished Project Manager / Architect with 15+ years of work experience in Management, Architecture, Analytics, Development and Maintenance. I have been fortunate to be a part of over 25+ .Net / SharePoint projects delivery with various companies across different industry sectors. This has provided me a valuable insight and experience especially in successful implementation of SharePoint based solutions.

My experience in Web application implementation includes technology strategy and road-map definition, business and technical requirements identification, governance, platform architecture, solution design, configuration, development, quality assurance, training, post-production support, team lead and overall project delivery along with project management.

Satyendra Mishra holds a B.Tech. in Computer Science & Engineering and PG Diploma in Advance Computing from Center for Development and Advance Computing, Pune, India. He is also a certified Project Management Professional (PMP).

I love to share Project Management Tips and Tricks by writing Blogs in the Project Management India Community. I have written around 300+ articles in the Project Management, .Net, SharePoint and related client side technologies.

SharePoint