Sharepoint редактор сценариев

Want to learn about the SharePoint script editor web part? In this tutorial, I have explained what is a script editor web part in SharePoint Online or SharePoint 2013/2016/2019 and the difference between content editor and script editor web part.

I will also explain, how to add JavaScript, jQuery, CSS code inside a SharePoint script editor web part.

We will see:

• SharePoint online script editor web part
• How to add script editor webpart in sharepoint online
• How to use script editor webpart in sharepoint online
• SharePoint content editor web part vs script editor
• SharePoint script editor add CSS
• SharePoint script editor add javascript
• SharePoint script editor add jquery
• SharePoint script editor add button
• SharePoint script editor background color
• SharePoint script editor background image
• SharePoint script editor redirect
• SharePoint script editor not working
• Script editor web part is missing in SharePoint Online Office 365
• Add script editor web part sharepoint online modern page
• SharePoint script editor video tutorial

The script editor web part is available in SharePoint Online as well as in SharePoint 2013, SharePoint 2016, and SharePoint Server 2019.

In modern SharePoint sites, both the SharePoint script editor and content editor web parts are not available, but we will see how to fix the script editor web part is missing in SharePoint Online Office 365 issue.

As the name suggests Script editor web part is used to adding scripts to a page in SharePoint. Script editor web part has been introduced in SharePoint 2013. Apart from scripts, we can also add HTML content inside a script editor web part.

Previously in SharePoint, there was content editor web part to inject script or HTML content on the page. But there was a problem with the content editor web part if you directly add scripts inside the content editor web part.

In a content editor web part, sometimes scripts will not run, sometimes it gave an error, sometimes it also changes the code you entered. But it will work perfectly fine if you linked to a file that contained the script. The problems have been overcome in the SharePoint script editor web part.

How to add script editor web part in SharePoint Online

Before using a script editor web part in a SharePoint Online site, we need to add script editor web part to a SharePoint web part page.

You can follow exactly the same steps to add a script editor web part to a web part page in SharePoint 2019/2016/2013 sites also.

Step-1: Open the SharePoint site and then go to the web part page and then edit the web part page, then click on Add a Web Part to the page.

Step-2: You can see a list of categories, click Media and Content, and then on Script Editor. Click on Add to create the Web Part.

Step-3: After Clicking on Add, the Script Editor Web part is created which looks like below. It contains “EDIT SNIPPET” which is a window where JavaScript and jQuery script are written and then inserted to page in SharePoint 2016/2013/Online.

Step-4: Here I have taken a small example like adding an alert box to web part using HTML and JavaScript in SharePoint.

This is how to SharePoint script editor web part to a web part page in SharePoint 2013/2016/2019.

Read: SharePoint list view threshold

How to use script editor webpart in SharePoint online

Once you have added the script editor web part in SharePoint web part page, we can see how to use script editor webpart in SharePoint Online. Here we will add a small piece of JavaScript code to the SharePoint page.

The following script forms a heading named as “JavaScript” and a button as “Try it” when we click on this try it button it will display am an alert box.

Click on EDIT SNIPPET to insert the code and click on Insert.

<h2>JavaScript Alert</h2>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>

The sharepoint online script editor web part with the script looks like below. You can also see it is rendering the HTML directly without saving.

Step-5: Click on Stop Editing from the ribbon save the page. You can see a button is created with Try it and heading as JavaScript Alert.

Step-6: Click on Try It and you can see an alert message appears on the window.

This is how to use script editor web part in sharepoint online, and exactly the same process we can follow to use the script editor web part in the SharePoint on-premise versions.

SharePoint script editor add CSS

Let us see an example how to add css using SharePoint script editor web part. In this example, I have added a button and then use CSS code to do some styling inside a script editor web part.

We need to add the CSS code inside the <style> </style> tag, like below:

<style>
#btnClick {background-color: #4CAF50; width:150px;color: white;font-size: 16px;}
</style>
<button type="button" id="btnClick">Click Me!</button>

Now, you can see the output below:

This is how to add css using script editor in sharepoint online.

SharePoint script editor add javascript

Now, let us another example on SharePoint script editor add javascript.

Like, CSS, if you want to use JavaScript code, then we need to write inside the <script> </script> tag. If you will not inside the script tag, then it will render the js code, like text.

<style>
#btnClick {background-color: #4CAF50; width:150px;color: white;font-size: 16px;}
</style>
<script>
function clickme() {
alert("You clicked me!");
}
</script>
<button type="button" id="btnClick" onclick="clickme();">Click Me!</button>

Once you add the above code, when the user clicks on the button, it will display the message, this is how to add javascript in SharePoint script editor web part.

SharePoint script editor add jquery

To work with jQuery in SharePoint, we need to add the jQuery library. In a script editor web part, we can the script to refer to the jQuery libraries.

Let us say, you can write like below, if you wan to add the jQuery file from Google CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

SharePoint script editor add button

Now let us see an example of SharePoint script editor add button.

We can add any HTML controls in a SharePoint script editor web part like Button, Textbox, radio buttons, etc. You can simply add the HTML controls inside the script editor like below:

<input type="text" id="firstname" name="firstname" value="Bijay"><br>
<input type="text" id="lastname" name="lastname" value="Doe"><br>
<input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label><br><br>
<input type="submit" id="btnSave" value="Save">

You can see the output like below:

SharePoint script editor change background color

Let us see an example on SharePoint script editor background color.

Here, you can see, we are changing the background color of the script editor web part in SharePoint. You can see like below:

This is an example on sharepoint script editor change background color.

SharePoint script editor background image

Let us see an example on SharePoint script editor background image.

Like background color, we can also set background image in SharePoint script editor web part. Here is the code, that will change the background color of the web part.

<style>
#WebPartctl00_ctl33_g_bb954c35_39ac_4fbe_ac8e_e58b0eddcb9b{
background-image: url(https://tsinfotechnologies.sharepoint.com/sites/SPGuidesClassic/Style%20Library/background.jpg);
}
</style>

Script editor web part is missing in SharePoint Online Office 365

Sometimes, you might get the issue script editor web part not showing SharePoint online or the Script Editor Web Part is missing in SharePoint Online Office 365.

One of the main reasons for script editor missing in a SharePoint site collection is that Custom Script might not be allowed at the tenant level in Office 365 SharePoint Online. You can follow this article for more information.

Else you can also use the below PowerShell SharePoint command.

$username="bijay@onlysharepoint2013.onmicrosoft.com"
$userCredential = Get-Credential -UserName $username -Message "Your password"
Connect-SPOService -Url https://onlysharepoint2013-admin.sharepoint.com -Credential $userCredential
Set-SPOsite https://onlysharepoint2013.sharepoint.com -DenyAddAndCustomizePages 0

Once you execute the about PowerShell script, wait for up to 24 hours and the script editor web part will be available in the SharePoint Online site.

Add script editor web part sharepoint online modern page

As I said before SharePoint script editor web part is not available on modern SharePoint sites. But, there is a very good article on GitHub about the Script editor web part for modern pages built in React.

By using SharePoint Framework (spfx) development you can add script editor web part in SharePoint Online modern page.

• SharePoint online spfx script editor web part

SharePoint content editor web part vs script editor

• SharePoint Content Editor Web Part is a rich text editor. It holds good and works fine for HTML and XHTML. However, if you try to add JavaScript to the page using the Content Editor Web Part in SharePoint 2013, the script tag of script entries will be removed or changed.
• To overcome the issue above mentioned Script Editor is designed, just for what its name implies. In Script Editor Web Part JavaScript and JQuery script are easily added with a script tag.

SharePoint script editor redirect

Here is an example of SharePoint script editor redirect.

Let us say, you wan to redirect from one SharePoint page to another SharePoint page or even to an external page, then we can use the script editor sharepoint web part to do the redirect.

On the page, you can simply add a script editor web part and then add the below redirect code.

<script language="javascript" src="https://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
window.location.href = "https://www.tsinfotechnlogies.com";
});
</script>

Here, when the user opens the SharePoint page (where you have added the above code), then it will be redirected to the https://www.tsinfotechnlogies.com page.

SharePoint script editor not working

If your SharePoint script editor not working, the first thing you should do is disable the “Minimal Download Strategy” site feature.

Go to the Site Settings page click on then click on Manage site features which is under Site Actions, then search for Minimal Download Strategy feature and click on Deactivate if it is activated previously.

This should solve the SharePoint script editor not working issue.

Video Tutorial SharePoint Script Editor web part

I have also uploaded a video tutorial on the SharePoint script editor web part in SharePoint Online/2013/2016/2019.

If you like the video, Subscribe to EnjoySharePoint YouTube Channel.

You may like the following SharePoint web part articles:

• SharePoint Online Highlighted Content Web Part
• SharePoint Online quick chart web part
• Embed Power BI report in SharePoint Online
• SharePoint online quick links web part – How to use
• Content Search web part in SharePoint Online
• Content query web part SharePoint Online
• SharePoint Online customize search box web part
• Choice Filter Web Part in SharePoint

Conclusion

In this SharePoint tutorial, we learned SharePoint script editor and the below topics:

• What is SharePoint script editor
• SharePoint online script editor web part
• How to add script editor webpart in sharepoint online
• How to use script editor webpart in sharepoint online
• SharePoint content editor web part vs script editor
• How to add CSS in SharePoint script editor
• Add javascript inside a SharePoint script editor web part
• How to add jquery in SharePoint script editor web part
• SharePoint script editor add button
• SharePoint script editor background color
• SharePoint script editor background image
• SharePoint script editor redirect
• SharePoint script editor not working
• Script editor web part is missing in SharePoint Online Office 365
• Add script editor web part sharepoint online modern page
• sharepoint 2013 script editor web part
• sharepoint 2016 script editor web part
• sharepoint 2019 script editor web part

Today in this article, we will learn about how to work with script editor web part in SharePoint online.

Introduction

Verify that script editor web part is not available by default:

1. Prevent users from running custom script on personal sites.
2. Prevent users from running custom script on self-service created sites)

1. Allow users from running custom script on personal sites.
2. Allow users from running custom script on self-service created sites)

Enable script editor webpart using CSOM PowerShell

To
overcome this issue run the below PowerShell script – this will immediately add the script editor and content editor web part in the web part category.  This is the reason to write and share this article.

• It should be your tenant domain account and your actual site.
• Here we have used the test trial tenant site.
• In Connect-SPOService pass your tenant admin url
• In Set-SPOsite pass the site url where you want to add the script editor web part.
• If your tenant admin account has MFA (multi factor authentication) enabled , we cannot execute this – to execute this script use the account which does not have MFA enabled.

Verify that script editor web part is available after executing the PowerShell Script:

Why Microsoft does not allow to add the script editor web part by default?

Considering the up most security – Microsoft does not recommend to add the custom script into the page. If we want to add any custom scripting in to our SharePoint online page – we need to add these out thru the SPFx framework.

Summary: What we had here?

Hence, in this article, we have learned how to enable script editor web part in SharePoint Online and work with.

References

• Allow or prevent custom script

See Also

• Security considerations of allowing custom script
• Getting started with SharePoint Online Management Shell

Modified on:
Tue, 5 Apr, 2022 at 2:58 AM

Did you find it helpful?
Yes
No

Send feedback