# Call functions externally

**URL:** <https://talk.atomisystems.com/t/call-functions-externally/2884>\
**Category:** Support Questions\
**Created:** [March 10, 2020, 9:50am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884 "2020-03-10T09:50:39Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![mackavi](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/mackavi/32/353_2.png) [@mackavi](https://talk.atomisystems.com/u/mackavi)\
**Post date:** [March 10, 2020, 9:50am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/1 "2020-03-10T09:50:39Z")

</div>

Is it possible to access the functions I’ve created from the browser console?

I know I can do something like AtomiSaola.topDocs[0].getElement() to use your functions but couldn’t find the functions I’ve created.

Cheers

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [March 10, 2020, 10:09am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/2 "2020-03-10T10:09:47Z")

</div>

Hi Mackavi,

You can use `doc.getFunction('your-function-name'`), for example:

```javascript
var myFunction = AtomiSaola.topDocs[0].getFunction('myFunction');
if (myFunction)
  myFunction(/*arguments*/);

```

Regards

---

<div class="post-metadata">

**Author:** ![mackavi](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/mackavi/32/353_2.png) [@mackavi](https://talk.atomisystems.com/u/mackavi)\
**Post date:** [March 10, 2020, 4:22pm UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/3 "2020-03-10T16:22:11Z")

</div>

Brilliant that does the trick.

---

<div class="post-metadata">

**Author:** ![wei\_xie](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/wei_xie/32/3430_2.png) [@wei\_xie](https://talk.atomisystems.com/u/wei_xie)\
**Post date:** [December 17, 2021, 4:59am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/4 "2021-12-17T04:59:32Z")

</div>

doc is undefined?  
I want to embed the webpage generated by saola animate into another program, the program can call functions in saola, what should I do

---

<div class="post-metadata">

**Author:** ![wei\_xie](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/wei_xie/32/3430_2.png) [@wei\_xie](https://talk.atomisystems.com/u/wei_xie)\
**Post date:** [December 17, 2021, 5:02am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/5 "2021-12-17T05:02:32Z")

</div>

![fg](https://talk.atomisystems.com/uploads/default/original/2X/8/8216940967537be894fa930009ff49a99ea86ea4.png)

---

<div class="post-metadata">

**Author:** ![wei\_xie](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/wei_xie/32/3430_2.png) [@wei\_xie](https://talk.atomisystems.com/u/wei_xie)\
**Post date:** [December 17, 2021, 5:03am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/6 "2021-12-17T05:03:03Z")

</div>

![223](https://talk.atomisystems.com/uploads/default/original/2X/2/20a7484f2f10b3153d3d00fa42be92270b5d5ddd.png)  
I am a newbie in coding, can you provide an example? For example: define a function in the head html, the function calls the function in the saola animate program.please…thanks.  
Because I know how to call the function in html, but I don’t know how to call the function in the program

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [December 17, 2021, 6:15am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/7 "2021-12-17T06:15:13Z")

</div>

Hi wei\_xie,

It’s likely that you define your function with a `doc` parameter but you don’t pass a value for this parameter when calling the function.

```auto
var doc = AtomiSaola.topDocs[0];
var myFunction = doc.getFunction('myFunction');
if (myFunction)
  myFunction(doc); // if your function declaration is function myFunction(doc) {...}

```

Regards

---

<div class="post-metadata">

**Author:** ![wei\_xie](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/wei_xie/32/3430_2.png) [@wei\_xie](https://talk.atomisystems.com/u/wei_xie)\
**Post date:** [December 17, 2021, 9:02am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/8 "2021-12-17T09:02:07Z")

</div>

It works good,thanks,Can I define function calls in the head html? The program I want to embed allows me to communicate with the functions in the head html. I am a novice, which is really difficult for me.I want to use the saola animate to make a responsive UI for my program.Where should I write your code to complete the communication between the two?

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [December 17, 2021, 9:37am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/9 "2021-12-17T09:37:08Z")

</div>

I’m not sure what the two you want them to communicate is, can you please be specific?

Regards

---

<div class="post-metadata">

**Author:** ![wei\_xie](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/wei_xie/32/3430_2.png) [@wei\_xie](https://talk.atomisystems.com/u/wei_xie)\
**Post date:** [December 17, 2021, 10:02am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/10 "2021-12-17T10:02:55Z")

</div>

> **[FREE: Web UI (HTML/CSS/JS Interface)](https://forums.unrealengine.com/t/free-web-ui-html-css-js-interface/103275)**
>
> \---------- WebUI Plugin ---------- Documentation: cdn.tracerinteractive.com/webui/documentation.pdf Download: github.com/tracerinteractive/UnrealEngine/releases (scroll down if you get a 404 error) The WebUI plugin allows developers to create...

I want to use saola animate to make ue4 UI. Now I know how to pass the click event in the saola animate to UE4, but I don’t know how to pass the UE4 event to the saola animate.  
I don’t know if this is allowed。

---

<div class="post-metadata">

**Author:** ![wei\_xie](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/wei_xie/32/3430_2.png) [@wei\_xie](https://talk.atomisystems.com/u/wei_xie)\
**Post date:** [December 17, 2021, 10:12am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/11 "2021-12-17T10:12:36Z")

</div>

[![](https://img.youtube.com/vi/g0wTXSm5mN0/maxresdefault.jpg "Creating WebGL apps with Google Web Designer and Verge3D") ](https://www.youtube.com/watch?v=g0wTXSm5mN0)

I will use saola animate as a UI tool for UE4 and verge 3d，  
saola animation is cool。

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [December 17, 2021, 11:05am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/12 "2021-12-17T11:05:26Z")

</div>

Hi,

Do you embed your UE4 or Verge 3d content through a [HTML Widget](https://atomisystems.com/html5-animation/saola-animate-3/add-html-widgets-in-saola-animate-3/)?  
If so, you can do as follows to communicate between Saola Animate and your content:

```auto
// get JavaScript window and document object of your content from Saola Animate
// and call your content public functions from them ....
var frameNode = doc.getElement('your HTML Widget name').embeddedDom;
var embeddedWindow = frameNode.contentWindow;
var embeddedDocument = frameNode.contentDocument;

// get Saola Animate document from your content and call Saola Animate functions
var SaolaDoc = window.parent.AtomiSaola.topDocs[0];

```

Regards

---

<div class="post-metadata">

**Author:** ![wei\_xie](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/wei_xie/32/3430_2.png) [@wei\_xie](https://talk.atomisystems.com/u/wei_xie)\
**Post date:** [December 18, 2021, 7:49am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/13 "2021-12-18T07:49:05Z")

</div>

No, I embed the page made by saola into UE4, and the two can interact.  
Describe it in another way, can I write a function in the head html to call the function I created in the program.  
For example, I wrote a click button in the head html and a function play timeline in the program. Can I click this button in the head html to trigger the function to play the timeline? (Because I know how to use UE4 to call the functions in the head html of the saola animate. If the above functions can be realized, ue4 can call the functions in the program),I have written the following code in the head html, but it is incorrect：

```auto
ue.interface.uefunction = testfunction(){
var doc = AtomiSaola.topDocs[0];
var myFunction = doc.getFunction('myFunction');
if (myFunction)
  myFunction(doc);
}

```

it works well with the following code:

```auto
ue.interface.uefunction = testfunction(){
 alert("Hello! test");
}

```

Also, thank you for your quick reply.

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [December 20, 2021, 2:37am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/14 "2021-12-20T02:37:19Z")

</div>

Hi,

Do you embed Saola Animate HTML5 into your UE4 page directly or via an `iframe`?  
If you embed it via an `iframe`, you must get `AtomiSaola` object from the iframe element:

```javascript
// suppose Saola Animate HTML5 is embedded into the first iframe
// (you can use other methods to get the iframe, e.g. document.getElementById('iframe id')
var iframe = frames[0];
var Saola = iframe.AtomiSaola;
var saolaDoc = Saola.topDocs[0];
// call Saola Animate functions from saolaDoc...

```

Please note that both your UE4 page and Saola Animate HTML5 must be hosted on the same domain, otherwise you need to configure your server where you host Saola Animate HTML5 to allow it to be accessed by your UE4 page.

Regards

---

<div class="post-metadata">

**Author:** ![wei\_xie](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/wei_xie/32/3430_2.png) [@wei\_xie](https://talk.atomisystems.com/u/wei_xie)\
**Post date:** [December 20, 2021, 1:01pm UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/15 "2021-12-20T13:01:00Z")

</div>

Can you help me see my code？  
[test file.saolapack](https://talk.atomisystems.com/uploads/short-url/x9HRTjD9p9X1awFA4oJ2kN1j9bK.saolapack) (2.5 KB)

 ![1640005133(1)](https://talk.atomisystems.com/uploads/default/original/2X/e/ebf825ddcfceb98f943031f4d71eb937a83b18bb.png) ![1640005328(1)](https://talk.atomisystems.com/uploads/default/original/2X/0/09688992356ff6f74428fa13836956c4e3f713da.png)

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [December 21, 2021, 1:39am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/16 "2021-12-21T01:39:46Z")

</div>

Hi,

```auto
var myFunction = doc.getFunction('myFunction');

```

Your function name is `'myfunction'`, not `'myFunction'`. It’s case sensitive.

Regards

---

<div class="post-metadata">

**Author:** ![Bill\_Mac](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/bill_mac/32/2641_2.png) [@Bill\_Mac](https://talk.atomisystems.com/u/Bill_Mac)\
**Post date:** [July 21, 2023, 5:28pm UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/17 "2023-07-21T17:28:30Z")

</div>

Hi,  
I have searched a few supports posts, this one was the closest.  
I have tried many variations but still not working.

Will this example posted here work from a HTML Widget code?  
 ![Screenshot 2023-07-21 130437](https://talk.atomisystems.com/uploads/default/original/2X/1/127d136ab66d6dde87b7e9ec92ac461d0b007f25.png)

I originally wanted to call a function from the ones created by using the lighting bolt.  
 ![Screenshot 2023-07-21 132210](https://talk.atomisystems.com/uploads/default/original/2X/b/bf1e81d3efd4a4f2793c7e7f488bc28a92568cfc.png)

Specifically i want to run " **elementEventHandler\_Read** from within “ **elementEventHandle\_TIMERr** ” (from the list in above image). Is that possible too?

I don’t under the example given…

> var myFunction = AtomiSaola.topDocs[0].getFunction(‘myFunction’);  
> if (myFunction)  
> myFunction(/_arguments_/);

how can myFunction be in all those places.  
do i simply put my functions’ name like this:

> var myFunction = AtomiSaola.topDocs[0].getFunction(‘ **elementEventHandler\_Read** ’);  
> if (myFunction)  
> myFunction(/_arguments_/);

The **var myFunction** is confusing me. I tried a million variations…ugh  
I know it is on my end…my lack of experience with JavaScript.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Bill\_Mac](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/bill_mac/32/2641_2.png) [@Bill\_Mac](https://talk.atomisystems.com/u/Bill_Mac)\
**Post date:** [July 22, 2023, 12:31pm UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/18 "2023-07-22T12:31:03Z")

</div>

**Update:** Ok, after further digging on the forum i was able to solve a few things.

![image](https://talk.atomisystems.com/uploads/default/original/2X/5/5aeca95651fd10904b4759f87c7f0fbd904d0ebc.png)  
If I use the Edit HTML (I guess that is the browser console??) things will work.

I can call a “normal function” i created and i can add text to a text box on the stage/canvas using:

> var myFunction = AtomiSaola.topDocs[0].getFunction( **‘NameofMyFunction’** );  
> if (myFunction)  
> myFunction(/_arguments_ /);

I can interact with a textbox on the stage/canvas. Just have to use:  
var doc = AtomiSaola.topDocs[0];  
doc.getElement( **‘NameofTextBox’** )

**What i can’t do** , is use the same html/java code in Edit HTML above in a Custom Element on the stage.  
 ![image](https://talk.atomisystems.com/uploads/default/original/2X/4/4283884f4e054169d6b7eef47fe5b325b038e2ed.png)  
I imagine i need to use “parent”. I have tried a million combinations…  
Is it possible to interact with a normal function or other elements (ie text box) on stage/canvas when writing code in the Custom Element?

p.s. I had the picture for HTML widget in original message, it is cool. I meant to refer to Custom Element.

---

<div class="post-metadata">

**Author:** ![PhuongThuy\_Le](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/phuongthuy_le/32/6090_2.png) [@PhuongThuy\_Le](https://talk.atomisystems.com/u/PhuongThuy_Le)\
**Post date:** [July 24, 2023, 2:24am UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/19 "2023-07-24T02:24:58Z")

</div>

Hi Bill,

For your information, Saola Animate doesn’t support running JavaScript code added when editing custom element’s Inner HTML.  
In this thread, our discussion revolved around calling Saola Animate script from the outside.  
However, it appears that you are interested in running scripts once the scene loads.  
If so, just add the **Run JavaScript** action in the **Scene Activate** event and call the function directly.  
For example, entering `NameofMyFunction(arguments)` instead of `AtomiSaola.topDocs[0].getFunction('NameofMyFunction');`

Best regards,  
Thuy

---

<div class="post-metadata">

**Author:** ![Bill\_Mac](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/bill_mac/32/2641_2.png) [@Bill\_Mac](https://talk.atomisystems.com/u/Bill_Mac)\
**Post date:** [July 24, 2023, 10:28pm UTC](https://talk.atomisystems.com/t/call-functions-externally/2884/20 "2023-07-24T22:28:10Z")

</div>

Thank you for the reply Thuy.  
Yes, after a while I realized the Html in the custom element is for buttons and forms only.  
I don’t know how one would get the info from an input field etc?? I just ended up using the Event Handler to call a function (but it can’t call normal functions). That was what i was trying to do in the first place.

As for what you said

> If so, just add the **Run JavaScript** action in the **Scene Activate** event and call the function directly.  
> For example, entering `NameofMyFunction(arguments)` instead of `AtomiSaola.topDocs[0].getFunction('NameofMyFunction');`

Do you mean this?  
 ![image](https://talk.atomisystems.com/uploads/default/original/2X/8/89b7d2208924c532c03557c8acdf0dea67966d8e.png)

The problem (and of course it might just be me) is, i can’t call “normal functions” using that method. that don’t show up. And of course that is because these are triggers…so no doc, e arguments.

Anyway, after searching on here, I was able to see someone’s uploaded work for a question and i learned how to use a custom html file in resource and attach it to the Html widget. That solved a lot.

[Next page](https://talk.atomisystems.com/t/call-functions-externally/2884.md?page=2)