How to Add Custom Code Using the ShortPoint Code Editor Web Part

This article explains the basics of how to add custom HTML, CSS, or JavaScript code to a Modern SharePoint page using the ShortPoint Code Editor Web Part. For a quick overview of the steps, refer to the Quick Walkthrough section. For more detailed instructions, see the Step-by-step Tutorial.

For specific use cases, visit our support site to search for what you need. If you have a unique requirement, you can also visit our ShortPoint subreddit to get help from our amazing ShortPoint Community.

TABLE OF CONTENTS

• Prerequisites
• Quick Walkthrough
• Step-by-step Tutorial
  • Step 1: Get a custom code
  • Step 2: Edit the SharePoint page
  • Step 3: Insert the ShortPoint Code web part
  • Step 4: Add your custom code
  • Step 5: (Optional) Modify and enable features
  • Step 6: Republish the page

Prerequisites

• The ShortPoint Code Editor Web Part is installed on your SharePoint site. To learn how to do this, read our article on How to Install ShortPoint Code Editor in SharePoint.
• You have the appropriate SharePoint permissions to edit the page where you want to add custom code.

Quick Walkthrough

1. Prepare the custom code you want to use
2. Open the SharePoint page where you want to apply your code and hit Edit
3. Press the Add new web part button to open the web parts library
4. Search for ShortPoint Code and select it, this will add default content to your page
5. Start editing the web part by clicking the Edit properties button
6. Enter your custom code and adjust the settings as needed
7. Once you are satisfied, Republish the page

Step-by-step Tutorial

Here are detailed instructions for adding custom code using the ShortPoint Code Editor:

Step 1: Get a custom code

You can either write your custom code or copy existing code from reliable resources, depending on your SharePoint customization needs. For example, to add a dynamic weather widget to our page, we'll use code from weatherwidget.org.

The site provides tools to customize the weather widget and generate code you can copy.

Step 2: Edit the SharePoint page

• Open the SharePoint page where you want to add your custom code
• Click the Edit button.

Step 3: Insert the ShortPoint Code web part

• Close the Toolbox to get a full view of the page while editing.

• Press the plus icon to Add a new web part

• Search for ShortPoint Code in the web parts library and select it

Placeholder content will appear on your page.

Step 4: Add your custom code

• Click the Edit properties button. This will open the ShortPoint Code Editor window.
• Replace the default content by either pasting your copied code or writing custom code directly in the fields. In our example, we'll paste our weather widget's HTML code into the HTML field.
• Save your changes.

Step 5: (Optional) Modify and enable features

The ShortPoint Code Editor offers additional settings you can use.

• Code Parameters: If your code contains adjustable parameters, additional fields will appear. You can enter values to customize these parameters as needed.
• Export/Import Code: You can export custom code from an existing implementation and import it to other pages using ShortPoint Code Editor.
• Sandbox Mode: Enable this mode to restrict your custom code's effects to just the added web part, or disable it to apply the code across the entire page.
• Auto Height: You can adjust the Code Editor container's height to ensure all added elements display correctly on your page. This is available when Sandbox Mode is enabled.
  
• Contain CSS Styles: This setting is enabled by default and prevents your custom code from affecting other web parts and elements on the page. Note that some custom code may require this setting to be disabled.
• Visibility: Control which elements are displayed or are hidden on desktop computers, tablets, and mobile devices.

Step 6: Republish the page

• Once you're satisfied with how your custom code works on the page, click Republish.

Your users can now see the enhancement. To explore more possibilities with the ShortPoint Code Editor web part, check out other use case articles in the related articles section below. You can also visit our subreddit to see how other SharePoint designers are using this tool.

Related articles:

• ShortPoint Code Editor Web Part: List of Resources
• Getting Started With ShortPoint Code Editor Web Part
• How to Install ShortPoint Code Editor in SharePoint
• How to Present a Weather Widget on Your Page