How can we help you today?

How to Execute JavaScript Inside the Code Design Element that Depends on Loading External JavaScript Assets

With 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:

  • 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:

  1. Add a helper JavaScript method loadScript, that will notify us once the JavaScript reference is loaded. 
  2. Load the JavaScript reference using the utility method instead of plain HTML.
  3. Wrap the code inside the Inline JavaScript tag into a function "onScriptLoad" so that we can control when it will be loaded.
  4. 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).


BeforeAfter

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:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 64 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more