A Simple Way To Re-use Your Existing Script Editor's customization in SPFx Web Part

When migrating to SharePoint modern experience, one of the questions you will be faced with is how to replace your existing Script Editor customizations  with the new SharePoint Framework since scripting is not allowed in the modern sites, meaning Script Editor web part is not available for use (note: you can enable it if you want but it is not recommended). This may leave you thinking about if you have to go learn TypeScript/React, how long it will take and, if and how you can re-use your existing scripts within SPFx. Well, let me tell you the good news, yes you can re-use your existing scripts and it is simple. But it is recommended that you re-write them in TypeScript/React if budget and time permit. So if your goal is re-using the existing scripts as much as possible in the short term while you learn the new language this post is for you.

This post will explain the general steps to re-using your existing script within an SPFx web part but you may need to make some changes to the script to make it work. This depends on the libraries you are using in your code.  Note: There is a custom Modern Script Editor that you can download here but this is not a fit-all situations web part like the classic Script Editor. If your code uses SharePoint JSOM for instance, the script editor cannot help you. So you have to build your own. 

In this simple walk-through, I will use JavaScript and SharePoint JSOM to customize the DOM of a survey list. Note customizing DOM in the modern experience is discouraged but hey we just want to re-use our existing scripts for now!

Requirements:

When a user has not completed the survey, change the "Respond to this Survey" text on the button to Start a New Form, and hide the button when the user has responded. I know this is dumb but the use case helps to show how you can use your existing code in spfx.

Let's get started.

  1. Create a survey list in your modern site and name it Test or any name you want
  2. Add these 3 questions: What is your Name, What is your Department and UserName. UserName is not a question, we only need it to for some logic. We will store the current user's UserName (i.e. LoginName)in the field by setting it's default value to [Me]. Note data type for all the fields are Single line of text but for UserName, set the Default Text field to [Me], choose Calculated.
  3. Then over to VS Code. Scaffold a new spfx project by running yo @microsoft/sharepoint. 
  4. When the scaffold completes, open the project in VS Code 
  5. Register SharePoint JSOM APIs as external scripts as below
  6. then install typings for the JSON
    npm install @types/microsoft-ajax @types/sharepoint --save-dev
  7. Because SharePoint JSOM is not distributed as a module, we cannot import it directly in your code. Instead, we need to register its TypeScript typings globally. Open tsconfig.json and add references to microsoft-ajax and sharepoint in the types array as follows 
  8. Open your .ts file i.e src>webparts>solutionfolder>yourwebpart.ts, add the following after the last import statement. 
Set this.domElement.innerHTML to empty string by removing the all the div elements i.e. this.domElement.innerHTML=" ";
With all these done, we are ready to load our existing script inside the web part without re-writing any part of the script. Depending on what your script does, you would generally follow the same steps to load 3rd party libraries i.e. externalize them, use the require keyword after the import to references them in your .ts file. once you have set all the dependencies up this way you are ready to load your script. 

To load our script we need to import SPComponentLoader. Copy and paste the line below just above the require statements
import { SPComponentLoader } from '@microsoft/sp-loader';

Copy the script below and save as .js, use whatever name you want. Then upload it to Site Asset library in your site

Note: If you are using your script, you will need to strip   away from the code unlike Script Editor where it is required.

Then after the require statements copy and paste the line below to load your script from your Site Asset library

SPComponentLoader.loadScript('https://yourdomain.sharepoint.com/sites/modern/SiteAssets/quizscript.js');

Now you are ready to deploy your web part. To test, run the following command one after the other:

  • gulp build
  • gulp bundle
  • gulp package-solution
Upload the sppkg file in SharePoint > solution folder to app catalog, then add the web part to the survey overview.aspx page. You should see your survey customized like this:

Try to respond to the survey. When you submit, "Start a New Form" should be hidden.

This is just a simple walk-through to show how you can re-use your existing script in SPFx. If you are using  jquery library, you may need to include reference to the globalName you used in  the externals array of config.json file in your YourWebPart.ts. For example, include something like: jQuery.ajax({  })in your YourWebPart.ts file to avoid error when loading the script that relies on jquery externally.





Comments

Popular posts from this blog

Generate Word Document From A SharePoint List Item Using Microsoft Flow

Calling Microsoft Graph API from an Angular 5 Single Page Application (SPA)

Creating SharePoint Framework Client Web Part and solving the challenges with _RequestDigest Token value using React