Try ShortPoint nowIn this article we are presenting the ShortPoint Code Design Element available starting from ShortPoint SPFx version 6.9.35.x.
Similar to the Script Editor web part for 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, 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 closer look at ShortPoint Code Design Element.
TABLE OF CONTENTS
Prerequisite:
- You have a ShortPoint SPFx version 6.9.35.x or higher. Click here to check and download the latest available version of ShortPoint.
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 with adding a ShortPoint web part to your page by clicking the plus sign and selecting ShortPoint from the list of the web parts.
Then, click the blue Insert button to open the ShortPoint Page Builder.
Note: If adding the ShortPoint web part for the first time, Info Design Element will be added automatically. Click the cross icon to remove it. Then, click the blue Insert button to open the Page Builder.
Classic page:
1. Choose the Insert tab in the Ribbon.
2. Click the blue Insert button.
Then, select the Code Design Element from your ShortPoint Page Builder menu:
Features
Settings tab
Once, you have added the ShortPoint Code Design Element, the Settings tab will open.
Coding modes
You can add or remove the check marks of the coding modes. Use these in any combinations:
- 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:
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.
You can put a check mark for Errors to check whether there are any errors in your code and fix them.
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 for other members in 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 make better difference between your elements in edit mode:
Once you have added and checked the code, set the modes and added edit mode labels when necessary, click Update to add your Code Design Element to the page.
Then, save and/or 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.
For example, this is how it will look like if you put 20% padding-right value:
Even though in most cases applying different padding on small screens are 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 cellphones.
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.
For example, this is how it will look like if you put 20% margin-top value:
Even though in most cases applying different margins on small screens are 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
And here is the example of the page with the Code Design Element that added a background image to the page header:
