diff --git a/samples/react-add-js-css-ref/README.md b/samples/react-add-js-css-ref/README.md index 93891e399..d8a4283bd 100644 --- a/samples/react-add-js-css-ref/README.md +++ b/samples/react-add-js-css-ref/README.md @@ -1,31 +1,46 @@ +--- +page_type: sample +products: +- office-sp +languages: +- javascript +- typescript +extensions: + contentType: samples + technologies: + - SharePoint Framework + platforms: + - react + createdDate: 04/24/2017 12:00:00 AM +--- ## SPFx webpart to add JS and CSS reference on Modern Pages via SPFx application customizer extension -This repo is a react based SPFx web part and extension that allows users to add/modify/delete custom js and css file references using SPFx application customizer extension all modern pages within SP online site. This web part provides an interface to JS and CSS file references so that we don't have to modify code when we need to change references or add new references in the future. As part of security measures, this actions on web part can be only accessed by users who have Manage web permission on site. +This repo is a react based SPFx web part and extension that allows users to add/modify/delete custom js and css file references using SPFx application customizer extension all modern pages within SP online site. This web part provides an interface to JS and CSS file references so that we don't have to modify code when we need to change references or add new references in the future. As part of security measures, this actions on web part can be only accessed by users who have Manage web permission on site. WebPart in Action ![Webpart in action](assets/webpartinaction.gif?raw=true "Webpart in action") Challanges/Drawback with ONLY using SPFx extension for adding js and css file references. -* JS and CSS file refereces links needs to be hardcoded in solution +* JS and CSS file references links needs to be hardcoded in solution * Changes to code required if we need to change add new reference or remove existing reference. * Redeployment of package and installation -* Diffrent solution would be required for diffrent site collections as we would defintely need diffrent header js and css file refereces for each site collection(most of case) -* High maintananence and time consuming for simple task. +* Different solution would be required for different site collections as we would definitely need different header js and css file references for each site collection(most of cases) +* High maintenance and time consuming for simple task. -To overcome this drawbacks, this solution comes handy. This is resuable component which can be used by developers to eliminate creating Extension on thier own. Feel free to connect on twitter:@siddh_me for any details. +To overcome this drawbacks, this solution comes handy. This is reusable component which can be used by developers to eliminate creating Extension on thier own. Feel free to connect on twitter:@siddh_me for any details. ### Features of solution * WebPart to configure JS and CSS file reference. -* Edit functionality if atleast one JS or CSS reference is already added via this solution +* Edit functionality if at least one JS or CSS reference is already added via this solution * Completely remove all the references added via this solution -* Support for relative url also, if your js and css file is refered from some document library in same site collection. -Path can be '/sites/mysc/style library/js/custom.js' or '/sites/mysc/style library/css/custom.css' +* Support for relative url also, if your js and css file is referred from some document library in same site collection. +Path can be `/sites/mysc/style library/js/custom.js` or `/sites/mysc/style library/css/custom.css` ## Used SharePoint Framework Version -![drop](https://img.shields.io/badge/version-1.9.1-green.svg) +![1.9.1](https://img.shields.io/badge/version-1.9.1-green.svg) ## Applies to @@ -37,7 +52,7 @@ Path can be '/sites/mysc/style library/js/custom.js' or '/sites/mysc/style libra Note - If you don't want to build and package on your own, you can directly download package at this [location](./sharepoint/solutions/react-add-js-css-ref.sppkg) and upload to app catalog and install app on required site collection. Skip below steps and directly go to How to use section. Clone the solution and make sure there is no error before packaging. Try first on local work bench. -Change the pageURL property in /config/serve.json - This should be a valid modern page on your site collection. +Change the `pageURL` property in `/config/serve.json` - This should be a valid modern page on your site collection. ```bash git clone the repo @@ -48,28 +63,28 @@ gulp serve ```bash gulp bundle --ship ``` -- Execute the following task to package your solution. This creates an updated webpart.sppkg package on the sharepoint/solution folder. +- Execute the following task to package your solution. This creates an updated `webpart.sppkg` package on the `sharepoint/solution` folder. ```bash gulp package-solution --ship ``` - Upload or drag and drop the newly created client-side solution package to the app catalog in your tenant. -- Based on your tenant settings, if you would not have CDN enabled in your tenant, and the includeClientSideAssets setting would be true in the package-solution.json, the loading URL for the assets would be dynamically updated and pointing directly to the ClientSideAssets folder located in the app catalog site collection. +- Based on your tenant settings, if you would not have CDN enabled in your tenant, and the `includeClientSideAssets` setting would be true in the `package-solution.json`, the loading URL for the assets would be dynamically updated and pointing directly to the `ClientSideAssets` folder located in the app catalog site collection. ### How to Use Solution -* Once app is deployed to app catalog sucessfully. +* Once app is deployed to app catalog successfully. * Install app to required site collection -* Create new modern page. Add 'addJsCssReference' webpart to page. Publish the page. -* Use grid to add js and css file references, both are seperate sections. +* Create new modern page. Add **addJsCssReference** webpart to page. Publish the page. +* Use grid to add js and css file references, both are separate sections. * On Success message - Refresh the page and you would see your js and css files will be loaded. -* To Edit/Remove, go to same page again and Use 'Activate' or 'Deactivate'. +* To Edit/Remove, go to same page again and Use **Activate** or **Deactivate**. * Only Users with Manage Web permission will be able to access webpart and add/modify references. ### High level design of Solution * SPFx solution with 2 components 1. SPFx Webpart 2. SPFx Extension Application Customizer * Disables Automatic activation of SPFx extension when app is installed. -* React based solution +* React based solution * Register Custom action with ClientSideComponentId of Extension component * Passes parameters to Extension with ClientSideComponentProperties @@ -93,4 +108,4 @@ For any issue or help, Buzz me on twitter:([siddh_me](https://twitter.com/siddh_ > Sharing is caring! - \ No newline at end of file +