skybow Script Editor introduction

Table of Contents

• Overview
• Configuring the skybow Script Editor Web Part
• Properties of skybow Script Editor web part
• Authoring HTML and Script 
• Loading External Files

Overview

This article describes the skybow Script Editor web part and all of its configuration options available on modern SharePoint pages.

The skybow Script Editor web part lets a page author embed custom HTML, CSS, and JavaScript directly into a modern SharePoint page, extended with skybow expression and a visible condition on the web part itself. 

Depending on the configuration, the web part can be used to:

• Render custom HTML elements
• Apply custom CSS styles
• Execute JavaScript
• Reference external script and stylesheet files
• Conditionally display the web part
   

Configuring the Script Editor Web Part

skybow Script Editor is available on Modern pages in the Advanced category. To add the skybow Script Editor web part to a modern SharePoint page navigate to the modern SharePoint page, in Edit mode open the web part toolbox. In the toolbox, scroll to the Advanced group and locate skybow Script Editor. Click the web part to insert it into the page, just like any other standard web part.

Click the Edit button on the web part to open the HTML editor. 

Enter your HTML, CSS, and JavaScript. You can also insert skybow expressions and placeholders using the Expression Builder.  Save it.

Click Publish to make your changes live. Script only ever runs on a published, viewed page — edit mode always shows the raw markup and never executes it. 

Back to top

Properties of skybow Script Editor web part

After adding the skybow Script Editor web part to a modern SharePoint page, the author can configure its properties from the web part property pane. In the skybow Script Editor you can configure Layout and HTML  properties:

Back to top

Authoring HTML and Script 

The Script Editor can be used to add custom client-side content to a SharePoint page. For example, HTML can be used to create a custom interface:

<div class="custom-message">
    Welcome to our SharePoint site!
</div>

Custom CSS can then be used to control the appearance:

.custom-message {
    padding: 20px;
    font-size: 20px;
    font-weight: bold;
}

JavaScript can be used to add client-side behavior:

document.querySelector('.custom-message').addEventListener('click', function () {
    alert('Hello from skybow Script Editor!');
});

The HTML, CSS, and JavaScript can be combined to create custom UI elements and client-side functionality directly on a modern SharePoint page. In addition, the Script Editor supports using skybow expression evaluation and placeholders, which can be used to insert dynamic values into the generated HTML, CSS, or JavaScript. Wrap a placeholder in double square brackets, for example [[@Web.Title]]. At runtime the placeholder is replaced with its resolved value; in edit mode it is shown as raw text.

Best practice: Use the Expression Builder picker as the source of available placeholders.

For example:

<div>
    Hello, [[User.Email]]!
</div>

Placeholders can also be used inside JavaScript:

const userEmail = '[[User.Email]]';

console.log('Current user:', userName);

When using placeholders inside JavaScript or HTML attributes, make sure that the resulting value is valid for the context in which it is inserted.

Loading External Files

The Script Editor can also be used to load external resources such as JavaScript, HTML or CSS files. External JavaScript can be referenced when functionality is maintained separately from the page content. You can reference to the external file using script tag with src attribute :

<script src="https://example.com/scripts/custom.js"></script>

Or you can render content or a script held in a file on your site into the web part using placeholder [[GetFileContent]]: 

[[@Functions.GetFileContent('/sbSolutionAssets/<solutionId>/Files/hero-banner.html', true)]]

Important: To use [[GetFileContent]] you have to enable Allow HTML from placeholders for the rendered result to appear as HTML rather than escaped text.

Important: It is highly recommended do not use reference to script to the external sources. External scripts usage may be block due to Content-Security-Policy (CSP). Better to save script in to a file and store it in the recommended libraries:  

• /sbSolutionAssets/<solutionId>/Files/ — Use for anything shipped as a Solution Studio solution. Contents are provisioned automatically and copied across when the solution is reused or transferred to a new solution ID, keeping references intact.

In a case you are not able to save script or HTML content in a file and store it in the skybow libraries, you need to add external resources  into the Trusted script sources in SharePoint admin center. Read more here.

IMPORTANT: Script Execution Mechanics: All <script src> files load before any inline <script> block runs. If an inline block expects a variable from a library loaded via src, put the configuration in the library file instead — the library always finishes loading first. If your markup contains also HTML and CSS the execution order would be as follow: HTML, CSS and than <script src> and the inline <script>

Back to top