diff --git a/config/config.json b/config/config.json index d8c14472d..f62067511 100644 --- a/config/config.json +++ b/config/config.json @@ -37,9 +37,6 @@ }, "externals": {}, "localizedResources": { - "ControlStrings": "lib/loc/{locale}.js", - "ControlsTestWebPartStrings": "lib/webparts/controlsTest/loc/{locale}.js", - "ControlsTestFormCustomizerStrings": "lib/extensions/testForm/loc/{locale}.js", - "TestApplicationCustomizerStrings": "lib/extensions/testApp/loc/{locale}.js" + "ControlStrings": "lib/loc/{locale}.js" } } diff --git a/docs/documentation/docs/guides/mpa.md b/docs/documentation/docs/guides/mpa.md index 8ff2676a2..fed1dc2c1 100644 --- a/docs/documentation/docs/guides/mpa.md +++ b/docs/documentation/docs/guides/mpa.md @@ -4,59 +4,66 @@ The shortest way to prepare your local copy of the project for development and t ## Install prerequisites -Before you start contributing to this project, you will need Node.js. This project has been tested with the 10.x version of Node.js and the version of NPM that comes with it. You can use [Node Version Manager](https://github.com/nvm-sh/nvm) to switch between different versions of Node.js. +Before you start contributing to this project, you will need Node.js. This project (current version 3.x) has been tested with the 18.x version of Node.js and the version of NPM that comes with it. You can use [Node Version Manager](https://github.com/nvm-sh/nvm) or [Node Version Switcher](https://github.com/jasongin/nvs) to switch between different versions of Node.js. ## Get the local version of the project - fork this repository - clone your fork - in the command line, run the following commands: - - `npm install` to restore dependencies - - `npm install -g gulp-cli` in order to run `gulp` commands (run `npm list -g gulp-cli` to check if already installed on your machine or not) - - `gulp serve` to serve your project (or `npm run serve` if you want to use [`spfx-fast-serve`](https://github.com/s-KaiNet/spfx-fast-serve)) + - `npm install` to restore dependencies + - `npm install -g gulp-cli` in order to run `gulp` commands (run `npm list -g gulp-cli` to check if already installed on your machine or not) + - `gulp serve` to serve your project (or `npm run serve` if you want to use [`spfx-fast-serve`](https://github.com/s-KaiNet/spfx-fast-serve)) - Start making your changes ### Run the project locally As this project embeds a SPFx solution, you have the ability to test all the controls on your machine. +You can also debug the controls in any supported language by running one of the following commands (for example in _french_): + +- `gulp serve --locale=fr-fr` +- `npx fast-serve --locale=fr-fr` (if using `spfx-fast-serve`) + +Beware that both argument and value have to be lower case. Supported locales are listed in the following project's path: `src\loc`. + !!! warning As long as you have access to a SharePoint Online environment (for v2 and after), you can test the components from your machine. But to test the web part as a Teams Tab, you have to first deploy the SPFx solution (and sync it to Teams). You also have to deploy the [SharePoint Framework library for Microsoft Graph Toolkit](https://learn.microsoft.com/en-us/graph/toolkit/get-started/mgt-spfx) v2.9.0. So be sure to be at least **SharePoint Administrator**. #### SPFx web part -The web part is called *ControlsTest* and is available for both SharePoint Online and Teams. To test it on SharePoint, go to the workbench page [https://[SHAREPOINT_SITE].sharepoint.com/_layouts/15/workbench.aspx](https://SHAREPOINT_SITE.sharepoint.com/_layouts/15/workbench.aspx) and add the web part. +The web part is called _ControlsTest_ and is available for both SharePoint Online and Teams. To test it on SharePoint, go to the workbench page [https://[SHAREPOINT_SITE].sharepoint.com/_layouts/15/workbench.aspx](https://SHAREPOINT_SITE.sharepoint.com/_layouts/15/workbench.aspx) and add the web part. To test it on Teams, once the project deployed on the tenant accordingly, add the web part as a Tab (from a team for example). -To update the host component, open the *ControlsTest* React component located in the following project's relative path: *src\webparts\controlsTest\components\ControlsTest.tsx*. +To update the host component, open the _ControlsTest_ React component located in the following project's relative path: _src\webparts\controlsTest\components\ControlsTest.tsx_. #### SPFx application customizer -This extension is called *TestApplicationCustomizer*. To test it, go to the following URL (after updating the parameters): +This extension is called _TestApplicationCustomizer_. To test it, go to the following URL (after updating the parameters): [https://[SHAREPOINT_SITE].sharepoint.com?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"ca9eac70-7343-4972-88d6-672d50e9cf38":{"location":"ClientSideExtension.ApplicationCustomizer"}}](https://SHAREPOINT_SITE.sharepoint.com?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"ca9eac70-7343-4972-88d6-672d50e9cf38":{"location":"ClientSideExtension.ApplicationCustomizer"}}) -To update the host component, open the *TestApp* React component located in the following project's relative path: *src\extensions\testApp\TestApp.tsx*. +To update the host component, open the _TestApp_ React component located in the following project's relative path: _src\extensions\testApp\TestApp.tsx_. #### SPFx form customizer -This extension is called *TestForm*. To test it, you have to configure it first: +This extension is called _TestForm_. To test it, you have to configure it first: -1. Open the *serve.json* file (located in the *config* folder) +1. Open the _serve.json_ file (located in the _config_ folder) 2. Replace the `rootFolder` property (under `serveConfigurations` ==> `default` ==> `formCustomizer`), which contains a server relative URL, to target the list on which you want to test the extension Then go to the following URL (after updating the parameters): [https://[SHAREPOINT_SITE].sharepoint.com/_layouts/15/SPListForm.aspx?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&componentId=f9c6b930-8d5d-4550-bfd9-ed5f6ca443a8&PageType=8&RootFolder=[OPTIONAL_SERVER_RELATIVE_URL]/Lists/[LIST_NAME]](https://SHAREPOINT_SITE.sharepoint.com/_layouts/15/SPListForm.aspx?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&componentId=f9c6b930-8d5d-4550-bfd9-ed5f6ca443a8&PageType=8&RootFolder=OPTIONAL_SERVER_RELATIVE_URL/Lists/LIST_NAME) -To update the host component, open the *TestForm* React component located in the following project's relative path: *src\extensions\testForm\components\TestForm.tsx*. +To update the host component, open the _TestForm_ React component located in the following project's relative path: _src\extensions\testForm\components\TestForm.tsx_. ### Documentation -SharePoint Framework React Controls uses [MkDocs](http://www.mkdocs.org) to publish documentation pages. See more information about installing MkDocs on your operating system at http://www.mkdocs.org/#installation. +SharePoint Framework React Controls uses [MkDocs](http://www.mkdocs.org) to publish documentation pages. See more information about installing MkDocs on your operating system at . -Also, documentation uses custom MkDocs theme that should be installed as well. See [Material theme for MkDocs](https://squidfunk.github.io/mkdocs-material/). +Also, documentation uses custom MkDocs theme that should be installed as well. See [Material theme for MkDocs](https://squidfunk.github.io/mkdocs-material/). Currently, documentation is working with version 3.1.0. Once you have MkDocs installed on your machine, in the command line: diff --git a/src/extensions/testApp/TestApplicationCustomizer.ts b/src/extensions/testApp/TestApplicationCustomizer.ts index bd533064f..1fd12c892 100644 --- a/src/extensions/testApp/TestApplicationCustomizer.ts +++ b/src/extensions/testApp/TestApplicationCustomizer.ts @@ -5,7 +5,6 @@ import { BaseApplicationCustomizer, PlaceholderContent, PlaceholderName } from '@microsoft/sp-application-base'; -import * as strings from 'TestApplicationCustomizerStrings'; import TestApp, { ITestAppProps as ITestAppProps } from './TestApp'; const LOG_SOURCE: string = 'TestApplicationCustomizer'; @@ -27,7 +26,7 @@ export default class TestApplicationCustomizer private _topPlaceHolder: PlaceholderContent | undefined; public onInit(): Promise { - Log.info(LOG_SOURCE, `Initialized ${strings.Title}`); + Log.info(LOG_SOURCE, `Initialized TestApplicationCustomizer`); this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders); diff --git a/src/extensions/testApp/loc/en-us.js b/src/extensions/testApp/loc/en-us.js deleted file mode 100644 index 3ae037903..000000000 --- a/src/extensions/testApp/loc/en-us.js +++ /dev/null @@ -1,5 +0,0 @@ -define([], function() { - return { - "Title": "TestApplicationCustomizer" - } -}); \ No newline at end of file diff --git a/src/extensions/testApp/loc/myStrings.d.ts b/src/extensions/testApp/loc/myStrings.d.ts deleted file mode 100644 index 4c3c241d2..000000000 --- a/src/extensions/testApp/loc/myStrings.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -declare interface ITestApplicationCustomizerStrings { - Title: string; -} - -declare module 'TestApplicationCustomizerStrings' { - const strings: ITestApplicationCustomizerStrings; - export = strings; -} diff --git a/src/extensions/testForm/loc/en-us.js b/src/extensions/testForm/loc/en-us.js deleted file mode 100644 index 8b9890998..000000000 --- a/src/extensions/testForm/loc/en-us.js +++ /dev/null @@ -1,7 +0,0 @@ -define([], function() { - return { - "Save": "Save", - "Cancel": "Cancel", - "Close": "Close" - } -}); \ No newline at end of file diff --git a/src/extensions/testForm/loc/myStrings.d.ts b/src/extensions/testForm/loc/myStrings.d.ts deleted file mode 100644 index d58c2d48d..000000000 --- a/src/extensions/testForm/loc/myStrings.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -declare interface IControlsTestFormCustomizerStrings { - Save: string; - Cancel: string; - Close: string; -} - -declare module 'ControlsTestFormCustomizerStrings' { - const strings: IControlsTestFormCustomizerStrings; - export = strings; -} diff --git a/src/webparts/controlsTest/ControlsTestWebPart.ts b/src/webparts/controlsTest/ControlsTestWebPart.ts index 22825812b..de45e827d 100644 --- a/src/webparts/controlsTest/ControlsTestWebPart.ts +++ b/src/webparts/controlsTest/ControlsTestWebPart.ts @@ -1,8 +1,6 @@ import * as React from 'react'; import * as ReactDom from 'react-dom'; -import * as strings from 'ControlsTestWebPartStrings'; - import { IReadonlyTheme, ThemeChangedEventArgs, @@ -135,11 +133,11 @@ export default class ControlsTestWebPart extends BaseClientSideWebPart +