Try ShortPoint nowWith ShortPoint Code Design Element you can inject an HTML, JavaScript or CSS snippets into the page. Using Code Design Element you can embed any code snippets to your pages.
TABLE OF CONTENTS
- Before we begin
- Issue
- Solution
- Step 1: Add a helper JavaScript method loadScript
- Step 2: Load the JavaScript reference using the utility method instead of plain HTML
- Step 3: Wrap the code inside the Inline JavaScript tag into a function "onScriptLoad" to control when it should be loaded
- Step 4: Execute the wrapped JavaScript code after the JavaScript reference is loaded
- Result
Before we begin:
- The Code Design Element is available since the ShortPoint SPFx version 6.9.35.x. Click here to check and download the latest available version of ShortPoint.
- To learn how to use Code, please check this article: Introducing Code Design Element.
Issue
It might happen that you need to use both inline JavaScript tag and JavaScript reference in the same Code Design Element. In this case, the inline tag will be executed before the reference is loaded by the browser.
We will show you how to avoid this effect and execute JavaScript inside the Code Design Element that depends on loading external JavaScript assets.
Solution
To execute JavaScript inside the Code Design Element that depends on loading external JavaScript assets, we need to do the following:
- Add a helper JavaScript method loadScript, that will notify us once the JavaScript reference is loaded.
- Load the JavaScript reference using the utility method instead of plain HTML.
- Wrap the code inside the Inline JavaScript tag into a function "onScriptLoad" so that we can control when it will be loaded.
- Once the JavaScript reference is loaded, execute the JavaScript that we have wrapped inside "onScriptLoad", and thus we have maintained the order of execution.
As an example, we will show you how to add a single emoji to your page, using Twitter Emoji (Twemoji) library.
There are emojis in this library that are combinations of more than one emoji. If you use the code snippet from the library without modifying it inside the Code Design Element, you will get an emoji combination (please see Before) on your page instead of one emoji (After).
| Before | After |
 |  |
This is the code we will be modifying:
<h1>
\u2764\uFE0F
</h1>
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
twemoji.parse(document.body);
</script>Note:
The <html> tag used as an emoji container should not be removed. Please do not delete it from the HTML field in Code Design Element.
Please the detailed steps below.
Step 1: Add a helper JavaScript method loadScript
This is a helper method loadScript, that we will be using:
function loadScript(src, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.onload = callback;
document.head.appendChild(script);
}Copy and paste it at the end of the inline <script> tag:
Step 2: Load the JavaScript reference using the utility method instead of plain HTML
Add the JavaScript reference source URL inside it the loadScript:
loadScript("https://twemoji.maxcdn.com/v/latest/twemoji.min.js");Put it at the top of the inline <script> tag, like this:
Now you can remove the JavaScript reference <script> tag:
Step 3: Wrap the code inside the Inline JavaScript tag into a function "onScriptLoad" to control when it should be loaded
Put the original inline JavaScript code inside the function onScriptLoad, like this:
function onScriptLoad () {
twemoji.parse(document.body);
}
Step 4: Execute the wrapped JavaScript code after the JavaScript reference is loaded
Add onScriptLoad function inside the loadScript after the JavaScript reference:
loadScript("https://twemoji.maxcdn.com/v/latest/twemoji.min.js", onScriptLoad);
Result
Now we will see only one emoji after saving/publishing the page:
This is how the modified script will look like:
<script type="text/javascript">
loadScript("https://twemoji.maxcdn.com/v/latest/twemoji.min.js", onScriptLoad);
function onScriptLoad () {
twemoji.parse(document.body);
}
function loadScript(src, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.onload = callback;
document.head.appendChild(script);
}
</script>Notes:
- You can use the same code inside the JavaScript field. Please do not forget to remove the HTML tags in this case.
- You can add the callback function right inside the loadScript without converting it to a wrapper function onScriptLoad. Just like this:
loadScript("https://twemoji.maxcdn.com/v/latest/twemoji.min.js", function() {
twemoji.parse(document.body);
})
We recommend doing this only if the inline tag does not contain many lines of code.
That's it.
Using the same steps you can add the Google Charts, custom maps and many more useful widgets to your page.
Related articles:
