Getting Started With ShortPoint Code Editor Web Part

Learn how to enhance your Modern SharePoint pages with custom code using the ShortPoint Code Editor Web Part. This guide walks you through everything you need to know to get started.

TABLE OF CONTENTS

• Before we begin
• List of Detailed Resources
• What is the ShortPoint Code Editor Web Part?
• ShortPoint Code Editor Web Part Basics
  • Installation and Deployment
  • Adding Custom Code
  • Editing and Customizing Code
  • More Features

Before we begin

This article is for you if

• You are a SharePoint designer who is looking to add HTML, CSS, or Javascript code to your SharePoint Online or SharePoint 2019 pages
• You have the appropriate permissions to install a third-party SPFx application to your SharePoint sites

List of Detailed Resources

For those who prefer to dive straight into specifics, here's a comprehensive list of step-by-step tutorials that expand on the topics covered in this article:

• Installation: How to Install ShortPoint Code Editor Web Part into SharePoint
• Inserting Code Editor Web Part: How to Add Custom Code to Modern SharePoint Page
• Adding Custom Code
  • How to Add HTML Code to a SharePoint Page 
  • How to Add Custom CSS to a SharePoint Page 
  • How to Inject Javascript to a SharePoint Page
• Visibility: How to Set Visibility in ShortPoint Code Editor
• Import and Export Code: How to Use the Import and Export Feature in ShortPoint Code Editor
• Code Web Part Use Cases
  • How to Embed a Weather Widget to a Modern SharePoint Page
  • How to Add a Stock Widget to a SharePoint Page
  • How to Add a Web Page Animation to a SharePoint Page
  • How to Embed YouTube Video Playlist to a SharePoint Page
  • How to Embed Vimeo Video Playlist to a SharePoint Page
  • How to Embed a Chat Widget into a SharePoint Page
  • How to Add a Background Image to the SharePoint Page Header
  • How to Embed Social Media Posts to a SharePoint Page
    • Facebook posts
    • Facebook Feed
    • X posts
    • X Feed
    • Instagram posts
    • LinkedIn posts
    • Viva Engage Feed

What is the ShortPoint Code Editor Web Part?

The ShortPoint Code Editor is a powerful and user-friendly web part that lets you enhance your SharePoint pages with custom code. This free tool enables you to add HTML, CSS, and Javascript to improve your pages' appearance, interactivity, and functionality. Built on Microsoft's SharePoint Framework (SPFx), it's developed by ShortPoint - experts in intranet design solutions.

ShortPoint Code Editor Web Part Basics

Let's explore the essential features and capabilities of the ShortPoint Code Editor Web Part to help you get started:

Installation and Deployment

Installing and deploying the Code Editor web part to your SharePoint sites is quick and easy. Here's what you'll need to do:

1. Download the ShortPoint Code Editor SPFx package from our official website
2. Upload the package to your SharePoint tenant's App Catalog
3. Deploy the application to your entire tenant or specific Site Collections

To get a detailed step-by-step tutorial of this process, check out our article on How to Install ShortPoint Code Editor Web Part into SharePoint.

Adding Custom Code

Once installed, you can easily access the Code Editor through your SharePoint site's web parts library. Adding it to your pages works the same way as any standard SharePoint web part. Follow these steps:

1. Edit the SharePoint page

2. Press the Add new web part plus icon

3. Select ShortPoint Code

   After inserting the Code Editor web part, you'll see default content.

4. Click Edit properties button

5. Insert custom HTML, CSS, or Javascipt snippets

6. Publish the page

With this simple process, you can harness the power of the ShortPoint Code Editor web part to create custom, dynamic SharePoint sites that stand out from standard SharePoint designs.

For a detailed walkthrough, check out our guide on How to Add Custom Code to a Modern SharePoint Page which includes step-by-step instructions.

Editing and Customizing Code

The Code Editor comes with features not found in out-of-the-box SharePoint or other third-party web parts. Whether you're new to coding or an experienced developer, its user-friendly interface makes customization easy. Here are the key features you can use:

• Dedicated code fields - you'll find separate entry fields for HTML, CSS, and JavaScript code that work seamlessly together when executed
• Edit code fast - if you wish to edit the code that you inserted, simply press the brackets icon to enter edit mode and make your changes
• Coding support - write code with real-time error detection and syntax highlighting, thanks to the built-in intelligent code editor
• Real-time view - instantly preview your custom code changes with a real-time view of how they will appear on your page
• Parameter fields - the web part also automatically detects customizable parameters and creates user-friendly input fields, making it easy to modify settings without touching any code

Explore our comprehensive step-by-step guides on individual use cases to see these features in action. They can inspire your creative solutions for enhancing SharePoint pages.

More Features

Finally, the ShortPoint Code Editor Web Part includes several additional features that enhance its functionality and make it even more versatile for your SharePoint development needs:

Import/Export

The Import/Export feature lets you easily reuse code across different pages. Simply use Export to copy code from an existing web part, then use Import to apply that code to a new web part on another page. This saves time and ensures consistency across your SharePoint sites. Find out How to Use the Import and Export Feature in ShortPoint Code Editor by following this link.

Sandbox Mode

Sandbox Mode gives you precise control over the scope of your custom code. When enabled, your code changes only affect the content within the web part. When disabled, the code can modify elements across the entire page. This is particularly useful for implementing site-wide customizations.

Auto Height

With Sandbox Mode enabled, you can adjust the Code Editor container's height to ensure all added elements display correctly on your page.

Contain CSS Styles

By default, this feature ensures that custom CSS code in the Code Editor web part won't affect the styling of other web parts or page elements. However, you may need to disable this feature to apply your CSS changes to a specific SharePoint web part or across the page.

Visibility

Configure visibility settings to control how your web part appears across different devices. You can hide content specifically on desktop computers, tablets, or mobile devices. Learn more about these options in our article on How to Set Visibility in ShortPoint Code Editor.

Thank you for exploring the ShortPoint Code Editor Web Part! We're excited to see how you'll use these features to enhance your SharePoint pages. Have questions or want to share your experience? Join our community on the ShortPoint subreddit or reach out to our support team at support.shortpoint.com.

Related articles:

• ShortPoint Code Editor Web Part: List of Resources
• How to Install ShortPoint Code Editor in SharePoint
• How to Add Custom Code Using the ShortPoint Code Editor Web Part