How to use jQuery with the ShortPoint Code Design Element

This article will show you how to use jQuery with the Code Design Element.

Quick Walkthrough

1. Edit the ShortPoint Web Part.

2. Click the plus icon and insert the Code Design Element.

3. Copy the string below and paste it into the JavaScript field:

shortpoint.$

4. Add your JavaScript code after the string.

5. Go to the Design tab and disable Sandbox Mode.

6. Click the green checkmark to apply your changes.

7. Click Save to keep your changes.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Insert the ShortPoint Code Design Element
  • Step 3: Copy and Paste String
  • Step 4: Add Your JavaScript
  • Step 5: Disable Sandbox Mode
  • Step 6: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must prepare the JavaScript code you will use together with the jQuery.

Interactive Tutorial

Before starting the interactive tutorial, copy the string below:

shortpoint.$

Step-by-step Tutorial

Follow the detailed guide to learn how to use jQuery:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Click the close icon to leave the Toolbox:

• Select the ShortPoint tag.
• Click the Edit Properties icon:

Step 2: Insert the ShortPoint Code Design Element

NOTEBefore proceeding, make sure you have already prepared the JavaScript code you will use together with the jQuery.

• Choose where you want to add the Code Design Element and click the plus icon to see the library of Design Elements:

• Look for Code using the search bar and select it.

Step 3: Copy and Paste String

• Copy the string below to start accessing jQuery:

shortpoint.$

Step 4: Add Your JavaScript

• Add the JavaScript Code you prepared after the string:

Step 5: Disable Sandbox Mode

• Navigate to the Design tab.
• Disable Sandbox Mode.

NOTEMake sure to not skip this step. Otherwise, jQuery will not work as expected.

Step 6: Save

• Click the green check mark to apply your changes.
• Click Save to keep your changes:

That’s it! You now know how to use jQuery with the Code Design Element.

Related articles:

• How to Add a Background Image to the Page Header Using the ShortPoint Code Design Element
• How to Embed a Chat Widget Using the ShortPoint Code Design Element
• How to Insert a Weather Widget Using the ShortPoint Code Design Element
• How to Embed a YouTube Video Playlist into a Modern SharePoint Page Using the Code Design Element
• How to Embed a Vimeo Video Playlist into a Modern SharePoint Page Using the Code Design Element
• How to Embed the Microsoft Stream Video into a SharePoint Page