Upgrade SharePoint Framework Solution Using Upgrade Actions

SharePoint Framework is the new development model in which a lot of work has been going on since it went to General Availability on Feb. 23, 2017. It is a page and Web part model, which provides full support for client-side SharePoint development, easy integration with SharePoint data and support for an open source tooling. With SharePoint Framework, you can use modern Web technologies and tools in your preferred development environment to build productive experiences and apps in SharePoint.

In a previous article, we saw how to set up the development environment for SharePoint Framework. We also saw the basic Hello World Webpart creation, how to retrieve and display the list items, using SharePoint Framework. We also saw how to provision SharePoint List with custom Site Columns and Content Type here. In this article, we will see how to upgrade the previous solution, which was used to deploy a list so that we can deploy a second list along with the same solution.

Upgrade the solution

Once we have deployed the solution, if we make some changes at a later point, upgrade actions are available. Deploying without an upgrade will install a fresh copy of the solution. To retain the existing data, we will go with the upgrade option. However, to do the upgrade, we should add a new element file say elementsV2.xml.

SharePoint

Upgrade the solution and add a new list

In our case, we are trying to add a new list along with the previously deployed solution. In the new elements file, we will specify the list instance declaration for a custom list.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<ListInstance FeatureId="00bfea71-de22-43b2-a848-c05709900100" Title="ListAddedViaUpgrade" Description="List added through Upgrade Action" TemplateType="100" Url="Lists/ListAddedViaUpgrade"> </ListInstance>
</Elements>

We will also add an upgrade action, which will contain the information about the newly added elements.xml file.

SharePoint

<ApplyElementManifests>
<ElementManifest Location="7BC1C758-F2A2-4775-B26E-DC60F8620E9A\elementsV2.xml" />
</ApplyElementManifests>

As the last step, we have to update the package-solution.json file by adding elementsV2.xml to the elementsmanfiest tag and we will also add the upgrade action's file reference.

SharePoint

{
"solution": {
"name": "provision-sp-list-client-side-solution",
"id": "f26589ce-0cd0-49c4-9ca3-f4a559851a0d",
"version": "2.0.0.0",
"features": [{
"title": "provision-sp-list-client-side-solution",
"description": "provision-sp-list-client-side-solution",
"id": "7BC1C758-F2A2-4775-B26E-DC60F8620E9A",
"version": "2.0.0.0",
"assets": {
"elementManifests": ["elements.xml", "elementsV2.xml"],
"elementFiles": ["schema.xml"],
"upgradeActions": ["upgradeactionsV2.xml"]
}
}]
},
"paths": {
"zippedPackage": "solution/provision-sp-list.sppkg"
}
}

Package and Deploy the solution

Save the files and run gulp serve to package the solution file. Now, let’s go ahead and upload the sppkg solution file to SharePoint App Catalog.

SharePoint

On clicking OK, it will give a warning whether to replace it with the new solution or not. Click Replace it so that the new version is added.

SharePoint

We can see that the version has upgraded from 1.0.0.0 to 2.0.0.0.

SharePoint

Heading over to the site contents, we can see that the new list ListAddedViaUpgrade has been provisioned in addition to the existing Employee list.

SharePoint

Resolve Package Errors

Once the solution has been uploaded to SharePoint, ensure that there are no errors mentioned in the columns given below.

At times, if we have some error in the package, it will be displayed, as shown below. Ensure that we resolve any such errors by analyzing the error message. The error given below was thrown because of a white space at the beginning of the Elements.XML file.

SharePoint

Summary

Thus, we saw how to upgrade SharePoint Framework solution, using Upgrade Actions. Stay tuned for more SharePoint Framework articles.