Use code of Web file in Basic forms or Advance Forms steps scripts.

Web files are used to add some additional components to Portal. It is just like adding the attachment using Notes. Web files are reference by partial URL specified. We can configured web file for Particular web page or home page. When it is at home page then it can be reference directly as below in Web Template. Since home page will have '/' as partial URL.

<script src="/mytestscripts.js"></script>

 

The other web page which is configured it will be configured as child/under Home page. 

Take an Example, we have configured webpage with partial URL as 'test-page' & its parent is home page. We have configured JavaScript Web file which is having partial URL as 'test-page-logic.js'. While configuring web file, we have webpage which was having this 'test-page' partial URL.

Web file can be reference test-page-logic.js file in test-page web template as below.

<script src="/test-page/test-page-logic.js"></script>

 

Consuming web file on Web template is direct by using partial URL.

 

Sometime we will have web file which is having common kind of function we want to use in different places. Using in Web template is directly by linking the file.

But to use in Basic form or Advance form steps custom JavaScript logic is bit different. 

We can not directly link using HTML <script> tag.

Take an example, I have web file 'test-common-logic.js' file. It has some common variable/function as below:

 
var someVariable = "someValue";
function doSomething() {
    console.log("Perform something");
}

 

I want to use some of the function/variable of this file in Basic Form.

To use this, we need to load the function written in 'test-common-logic.js' file.

And to load, we need fetch text which will be nothing but our logical code. Append this text inside the head tag of HTML. We can push JavaScript code text when document gets ready as below.

 

 

$(document).ready(function(){
    fetch("/test-common-logic.js")
      .then(res => res.text())
      .then(jsCode => {
        var jsElement = document.createElement("script");
        jsElement.textContent = jsCode;

        //append the jscode under in head tag of loaded html
        document.head.appendChild(jsElement);
        
        //once code is added in head, we can use components from that.
        var x = someVariable;
        doSomething();
    });
});