How to Use Placeholders in the ShortPoint Code Editor Web Part

When writing custom HTML, CSS, or JavaScript code in the ShortPoint Code Editor Web Part, you'll often encounter variables that need to change between different uses. Manually updating code for each new requirement can be cumbersome and time-consuming.

The ShortPoint Code Editor addresses these scenarios by using placeholders. In this article, we'll explore how to use placeholders in your custom code.

Quick Walkthrough

1. Get the custom code that you want to implement on your SharePoint page.
2. Replace variable values with the appropriate ShortPoint Code Editor placeholder format.
3. Copy the resulting custom code.
4. Edit the SharePoint page where you'll add your custom code.
5. Insert the ShortPoint Code Editor Web Part.
6. Click Edit properties and Import or paste your custom code.
7. Adjust the Code Editor settings as needed.
8. Enter your desired values in the Custom Fields section.
9. Close the Code Editor and Publish.

TABLE OF CONTENTS

• Quick Walkthrough
• Prerequisite
• What are placeholders?
• How does it work in the ShortPoint Code Editor Web Part?
• Understanding Placeholder Syntax and Format
• Step-by-step Tutorial: Using placeholders in the ShortPoint Code Editor Web Part
  • Step 1: Prepare your code
  • Step 2: Add placeholders
  • Step 3: Insert the ShortPoint Code Web Part
  • Step 4: Add your custom code
  • Step 5: Input new values in the Custom Fields
  • Step 5: Apply changes and publish

Prerequisite

• You must already have the ShortPoint Code Web Part installed on your SharePoint page. To learn how to do this, check out How to Install ShortPoint Code Editor in SharePoint.

What are placeholders?

Placeholders are temporary values in your custom code that serve as defaults or fill-ins until they're replaced with actual values. They either show what kind of value is expected or act as generic examples until users input their specific requirements.

Placeholders are especially useful when your code's output needs to adapt to different requirements. For example, you might need to reduce an embedded app's width when using it on different department pages due to varying layouts. Placeholders let you easily adjust these values on the fly to fit any scenario.

How does it work in the ShortPoint Code Editor Web Part?

The ShortPoint Code Editor web part lets you use placeholders in your custom code. It recognizes these placeholders and automatically creates custom fields in its editing interface, allowing users to easily update their values.

For example, in the Weather Large Widget that we want to embed into a SharePoint page, we've added two placeholders in the custom code. When you open the editor, you'll see two Custom Fields appear, showing which parameters can be modified. As you adjust these parameters to your desired values, the changes are automatically implemented in the code.

Understanding Placeholder Syntax and Format

The ShortPoint Code Editor Web Part uses a specific format to identify placeholders. Adding these to your custom code enables you to use this powerful feature.

Placeholder syntax and format: /* FieldNumber (Field0 to Field19, should be unique) ||| Field Title (ex. Background Color (Default: red) ||| Field Default Value (ex. red) */

where

• FieldNumber is the unique identifier used for the Custom Fields section of the Code Editor interface. You can use up to 20 fields, numbered from Field0, Field1 through Field19.
• Field Title is the descriptive label shown for each Custom Field that helps users understand what values they're customizing and provides any relevant additional information.
• Field Default Value is the initial placeholder value shown in the Code Editor that remains until a user enters a new value in the corresponding Custom Field.

Here is an example of a custom code snippet:

.weather-card {
    border-radius: 20px !important;
    width: 100%;
    max-width: 500px;
    zoom: 1.5;
    text-align: center;
}

Instead of using fixed values, you can make your code more flexible by adding placeholders that allow users to quickly input new values where needed.

Here's how we transformed the code using placeholders:

.weather-card {
    border-radius: 20px !important;
    width: 100%;
    max-width: /* Field0 ||| Max Width (Default 500px) ||| 500px */;
    zoom: /* Field1 ||| Overall Size (Default 1.5) ||| 1.5 */;
    text-align: center;
}

Step-by-step Tutorial: Using placeholders in the ShortPoint Code Editor Web Part

Let's explore how to add placeholders to your custom code to take advantage of this feature:

Step 1: Prepare your code

• First, determine the custom code you want to implement in the ShortPoint Code Editor Web Part.
  • For inspiration, check out our list of use cases in the ShortPoint Code Editor Web Part: Resources & Awesome Use Cases article.
  • For additional assistance, you can use ChatGPT. Learn more in our blog post on How to Code with ChatGPT for SharePoint Sites.

Step 2: Add placeholders

• Review your custom code and identify which variables should have placeholders
• Write the placeholder code using the required syntax and format, then update the variables in your custom code accordingly
• You can now copy and paste your prepared custom code into a ShortPoint Code Editor on any SharePoint page

Step 3: Insert the ShortPoint Code Web Part

• Edit the SharePoint page where you'd like to add your custom code
• Insert the ShortPoint Code Web Part
• Click Edit Properties

Step 4: Add your custom code

Now, let's insert your custom code with the added placeholders into the HTML, CSS, and JavaScript fields.

• There are 2 ways to insert custom code into the Code Editor.
  • Click Import to add your copied custom code, then click OK twice. Or,
  • Paste your code directly into the provided fields. Be sure to click Save after manually pasting the code.
• (Optional) You can make additional edits to the code.
• (Optional) Customize the Code Editor settings according to your preference

Step 5: Input new values in the Custom Fields

• Scroll down to the Custom Fields section and update values as needed. You'll see your custom code's output in real-time.

Step 5: Apply changes and publish

Once you're satisfied with the results, apply your changes.

• Close the Code Editor interface
• Publish the page

To reuse this custom code on other SharePoint pages, simply click Export to copy it to your clipboard.

Well done! You now know how to add placeholders to custom code and use them in the ShortPoint Code Editor Web Part.

Related articles:

• ShortPoint Code Editor Web Part: Resources & Awesome Use Cases
• How to Install ShortPoint Code Editor in SharePoint
• How to Embed a Weather Widget into a Modern SharePoint Site