sp-dev-fx-webparts/samples/react-versiondisplay
Hugo Bernier 7202809a7d Changed docs links to learn 2022-10-24 09:42:45 -04:00
..
.devcontainer Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00
assets Removed office product from sample.json 2022-03-28 10:22:43 -04:00
config Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00
src Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00
teams Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00
.gitignore Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00
.npmignore Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00
.yo-rc.json Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00
README.md Changed docs links to learn 2022-10-24 09:42:45 -04:00
gulpfile.js Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00
package-lock.json Bump eventsource from 1.1.0 to 1.1.1 in /samples/react-versiondisplay 2022-06-02 04:05:27 +00:00
package.json Bump ajv from 5.2.5 to 6.12.3 in /samples/react-versiondisplay 2022-02-14 03:22:52 +00:00
tsconfig.json Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00
tslint.json Upgraded to SPFx 1.13.1 2022-02-08 01:03:23 -05:00

README.md

Compatibility

This sample is designed to be used in the following enviroments:

Compatibility

This sample is designed to be used in the following enviroments:

page_type: sample products:

  • office-sp languages:
  • javascript
  • typescript extensions: contentType: samples technologies:
    • SharePoint Framework platforms:
    • React createdDate: 4/10/2020 12:00:00 AM description: Display your SharePoint solution version within your web parts

Version Display

Summary

Display your SharePoint solution version within your web parts.

Version Display

Compatibility

SPFx 1.13.1 Node.js v14 | v12 Compatible with SharePoint Online Does not work with SharePoint 2019 Does not work with SharePoint 2016 (Feature Pack 2) Local Workbench Unsupported Hosted Workbench Compatible Compatible with Remote Containers

For more information about SPFx compatibility, please refer to https://aka.ms/spfx-matrix

Applies to

Prerequisites

There are no pre-requisites.

Solution

Solution Author(s)
react-versiondisplay Hugo Bernier (Tahoe Ninjas, @bernier)

Version history

Version Date Comments
1.0 March 31, 2020 Initial release
2.0 February 7, 2022 Upgraded to SPFx 1.13.1

Minimal Path to Awesome

  • Clone this repository
  • Set the version node in the package.json file, or by using npm version major, npm version minor or npm version patch
  • in the command line run:
    • npm install
    • gulp serve

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for more information.

Features

The sample uses a custom gulp task to synchronize the version node from the NodeJS package.json to the SharePoint solution's package-solution.json.

The solution demonstrates how to import the package-solution.json into a web part using a static import and a require statement.

Using npm version to set the version

To change the package.json version (which will also change your SharePoint solution version), use npm version, using one of the following parameters:

npm version major
npm version minor
npm version patch

The following table shows when you should call which npm version command, depending on the types of changes you're making to your solution:

Type of change Stage Versioning rule Example version NPM command
First release New solution Start with 1.0.0 1.0.0 npm version major
Backward compatible bug fixes Patch release Increment the third digit 1.0.1 npm version patch
Backward compatible new features Minor release Increment the middle digit and reset last digit to zero 1.1.0 npm version minor
Changes that break backward compatibility Major release Increment the first digit and reset middle and last digits to zero 2.0.0 npm version major

To use the custom gulp task in your solutions

NOTE: if you use the PnP SPFx Yeoman generator, there is already a built-in gulp command that will synchronize your version number when you use npm version. You only need to follow the steps below if you use the regular SPFx Yeoman generator.

If you'd like to use the custom gulp task in your solutions, copy the code from this solution's gulpfile.js between:

// BEGIN: Add custom version sync task

and

// END: Add custom version sync task

To your own gulpfile.js.

To use the version using the web part's manifest

The BaseClientSideWebPart class context property provides a manifest which contains a version property. To use it in your web part, simply use:

this.context.manifest.version

This approach provides a version number that follows the 1.0.0 format, instead of the usual 1.0.0.0 format. However, since the gulp tasks describe above append an additional .0 to the end of the package.json version number, you can choose to append .0 yourself when displaying the manifest version. For example:

this.context.manifest.version + '.0'

To use the version using a static import

  1. Copy the content of this solution's src\typings.d.ts to your own src folder in your own project.
  2. In the code where you want to insert the solution version, add the following import statement:
import * as packageSolution from '../../../config/package-solution.json';

Keep in mind that you may have to adjust the path to your package-solution.json depending on where you're adding the code within your solution.

To use the version using a require

In the code where you want to insert the solution version, add the following require statement:

const packageSolution: any = require("../../../config/package-solution.json");

Keep in mind that you may have to adjust the path to your package-solution.json depending on where you're adding the code within your solution.

For More Information

If you'd like to read more about the concepts illustrated in this sample, please refer to the following links:

Help

We do not support samples, but we this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.

If you're having issues building the solution, please run spfx doctor from within the solution folder to diagnose incompatibility issues with your environment.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

You can also try looking at discussions related to this sample and see what the community is saying.

If you encounter any issues while using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.