Introducing ShortPoint Code Design Element

Similar to the Script Editor web part for the classic SharePoint experience, you can inject an HTML, JavaScript, or CSS snippets into the page, using the ShortPoint Code Design Element. Below is an example of using Code Design Elements to add a weather widget and videos to the page, but the possibilities are endless:

You can even add a game to your page:

Find out more about using this element, by following our Example Use Сases for ShortPoint Code Design Element: Part 1 and Example Use Cases for ShortPoint Code Design Element: Part 2 solution articles.

Let's have a closer look at the ShortPoint Code Design Element.

Prerequisites

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Adding ShortPoint Code to the page

The Code Design Element can be easily added to your pages using ShortPoint Page Builder.

Modern page

You can start by adding a ShortPoint web part to your page.

• Click the add a new web part plus sign and select ShortPoint from the list of available SharePoint web parts.
• Once inserted, you will be brought to the ShortPoint editing interface. Hit Choose a layout and select the number of columns you prefer to use.

You now have a basic layout where to insert your Code Design Element.

The Code Design Element is currently available only in Grid Mode.

• Click Switch to Grid Mode from the Action Toolbar.
• Then, click the plus Insert button to open the ShortPoint Page Builder.

Classic page

To insert a ShortPoint web part in the classic experience, follow these steps:

• Choose the Insert tab in the Ribbon.
• Click the blue Insert button.
• Hit the plus Add Design Element icon.

Then, select the Code Design Element from your ShortPoint Page Builder menu: 

ShortPoint Code Design Element Features

Once, you have added the ShortPoint Code Design Element, the Settings window will open. You will find several tabs where you can input your custom code and customize the Design Element.

Design tab

In the Design tab, you will find the first set of fields you will work with. This is where you enter the codes you want to use and configure settings related to it.

Coding modes

You can add or remove the check marks of the coding modes. Use these in any combination:

• HTML
• CSS
• JavaScript
• Errors (if you want to enable checking the code for errors)
• Preview (if you want to be able to preview your code before inserting):

Developer Mode

You may want to open the Developer Mode to edit your code in a full-screen: 

• Now, insert your HTML, CSS, or JavaScript snippets into corresponding fields. 
• Click Preview to see what the code produces:
• (Optional) You can put a check mark for Errors to check whether there are any errors in your code and fix them.

Note:
You won't be able to see any changes in case you are using script that is changing the header, since you can't see the header properly when the Page Builder is open. However, the changes will be visible after you update the element and save the page.

Sandbox mode

Click to enable this option if you would like to inject your code into an isolated iframe. This option is useful in case you don't want your code to affect anything else on the page.

After the Sandbox mode is enabled, a new option Auto Resize will appear. Click to enable it if you would like the iframe to be resized automatically based on the content in the Code Design Element.

Testing mode

Click to enable this option if you would like to test the code before making it visible to other members of your organization. While the Testing mode is enabled, only you will see the Code Design Element even if the page is published.

Edit mode label

You can add an Edit Mode Label to your Code Design Element, using this field:

So you will be able to distinguish between your elements in edit mode:

• Once you are satisfied, click Insert to add your Code Design Element to the page.
• Then, save and publish the page.

Spacing tab

Need to change the spacing for your Code Design Element? Please, switch to the Spacing tab.

Using the options in this tab, you will be able to change the inner spacing (padding) and outer spacing (margin) for the content of your element on different devices.

Custom Padding

This option allows you to set the padding - inner spacing of the content.

By default, the padding values are set in px (pixels), but you may as well use the percentage, %. Simply type the desired spacing for the top, bottom, left, and right sides. 

Even though in most cases applying different paddings on small screens is not necessary, you can still modify it as you wish. If you enable Apply different padding for Tablet Devices and/or Apply different padding for Mobile Devices options, the same fields - Top, Right, Bottom, and Left - will open. Type the padding value to the respective fields.

Note:
The same padding settings will apply to the element on all the devices if you decide not to customize padding settings for tablets and mobile phones.

Custom Margin

This option allows you to set the margin - outer spacing of the content.

By default, the margin values are set in px (pixels), but you may as well use the percentage, %. Simply type the desired spacing for the top, bottom, left, and right sides. 

Even though in most cases applying different margins on small screens is not necessary, you can still modify it as you wish. If you enable Apply different margin for tablet Devices and/or Apply different margin for Mobile Devices options, the same fields - Top, Right, Bottom, and Left - will open. Type the margin value to the respective fields: 

Visibility tab

Control who you want the ShortPoint Code Design Element to be visible for in this tab.

Important: Making Code Design Element invisible for some users or on some devices, will not affect the JavaScript code added - it will execute regardless of the visibility settings (the visibility setting will add display: none; CSS rule for the hidden elements). If you'd like to disable its work for specific people or devices, make sure to modify the JavaScript code accordingly (for example, by adding an if statement that checks the computed styles of the element).

You can set visibility for: 

• People and Groups of your organization;
• Devices, on which you do not want Code Design Element to work and be visible.

Find out more about visibility in our solution article: Managing Visibility of ShortPoint Elements.

Example

Here is an example of the page with the Code Design Element that embeds a YouTube Playlist:

Related articles:

• Example Use Сases for ShortPoint Code Design Element: Part 1
• Example Use Cases for ShortPoint Code Design Element: Part 2