Try ShortPoint nowWith the ShortPoint Code Design Element, you can easily embed codes from CodePen, an online code editor with thousands of FREE code snippets, into your SharePoint page.
This tutorial will demonstrate how to properly use code from Codepen.io (like the one below) in the ShortPoint Code Design Element.
TABLE OF CONTENTS
- Prerequisites
- Step-by-step Tutorial
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
Step-by-step Tutorial
Code snippets found in Codepen.io are categorized into two: codes with preprocessors and codes without preprocessors. Codes with preprocessors must be converted into HTML, CSS, or JavaScript to work properly in the Code Design Element.
So, before proceeding with the steps below, you must first check if your code snippet has a preprocessor. To do this, simply check if a parenthesis is added to any of the code languages. For example, in the snippet below you will notice (SCSS). This means that the snippet uses SCSS preprocessor for CSS:
Alternatively, you can click the cogwheel icon beside the code language. The preprocessor, if there are any, will be indicated.
Once you have identified if your code snippet has preprocessors or not, you can now proceed to the option that best fits your needs.
Option 1: Code Snippets With Preprocessors
Follow this option if your code snippet has preprocessors.
Step 1: Convert Code Snippet
Go to Codepen.io and find the code snippet you want to use. For this guide, we will use Turning pages with CSS:
NOTEThe Code Design Element does not support adding external script resources. If your snippet has external resources, it will not work. To check if there are any, click the cogwheel icon and check if there are any links in the Add External Scripts/Pens fields.
Click the [1] down arrow icon of the code language with the preprocessor and select [2] View Compiled CSS:
You will see a green Compiled text once the conversion is successful:
NOTEIf more code languages have preprocessors, repeat the steps above.Step 2: Edit the ShortPoint Web Part
In a separate tab, open the SharePoint page you want to use and click Edit:
Click the close icon to leave the Toolbox:
Select the ShortPoint tag:
Click the Edit Properties icon:
Step 3: Insert the Code Design Element
Click the plus icon to see the library of Design Elements:
Use the search bar to look for Code and select it:
NOTEFor more details about the Code Design Element and all its features, check out Introducing ShortPoint Code Design Element.Step 4: Paste the Code
Copy the codes from Step 1 and paste them into their respective fields:
NOTEIf you wish to change anything in the code snippet, you can directly do so in the Code Design Element. And to ensure that the code snippet works properly, make sure that Sandbox mode is enabled. To do this, go to the Design tab and ensure that the toggle under Sandbox mode is blue:
Step 5: Save
Once done, click the green check mark:
Click the eye icon to see your page in real-time:
Click Save to apply all your changes:
Option 2: Code Snippets Without Preprocessors
Follow this option if your code snippet has no preprocessors.
Step 1: Find the Code Snippet You Want To Use
Go to Codepen.io and find the code snippet you want to use. For this guide, we will use Animated CSS Gradient Text:
NOTEThe Code Design Element does not support adding external script resources. If your snippet has external resources, it will not work. To check if there are any, click the cogwheel icon and check if there are any links in the Add External Scripts/Pens fields.
Step 2: Edit the ShortPoint Web Part
In a separate tab, open the SharePoint page you want to use and click Edit:
Click the close icon to leave the Toolbox:
Select the ShortPoint tag:
Click the Edit Properties icon:
Step 3: Insert the Code Design Element
Click the plus icon to see the library of Design Elements:
Use the search bar to look for Code and select it:
NOTEFor more details about the Code Design Element and all its features, check out Introducing ShortPoint Code Design Element.Step 4: Paste the Code
Copy the codes from Step 1 and paste them into their respective fields:
NOTEIf you wish to change anything in the code snippet, you can directly do so in the Code Design Element. And to ensure that the code snippet works properly, make sure that Sandbox mode is enabled. To do this, go to the Design tab and ensure that the toggle under Sandbox mode is blue:
Step 5: Save
Once done, click the green check mark:
Click the eye icon to see your page in real-time:
Click Save to apply all your changes:
That’s it! You can now use the Code Design Element to insert code snippets from CodePen. Enjoy trying this hack on your SharePoint pages.
NOTEYou can also use external stylesheets (for CSS) in the ShortPoint Code Element. Simply add them at the top of the CSS area using the string below and replace link/to/external/stylesheet.css with the external style sheet link: @import url (link/to/external/stylesheet.css);
Related articles:
