Web Browser Widget : How to pass data in and out?

Development Programming & Scripting
1

How can I pass some data from the game to the UMG browser widget and the opposite?
Say I have an authenticated user in game and want him to fill in form from a webpage. I want to pass his User ID in the form automatically.

How do I proceed?

I’ve seen this in 4.9:
New: UObject instances can now be passed to SWebBrowser and accessed from browser javascript.
Is this related to my question or is it related to HTML5?

Additionally I’ve seen in 4.9:
New: Users can now provide functionality to web browser widgets to handle creation of popup windows.
New: Users can now provide functionality to web browser widgets to handle the closing of popup windows created by the browser.

How do we do that?

1 Like
2

up !
I’m really interested into this too. Any progress on that topic ?

3

Use APPEND to put together some HTML and your form values from in game. Then use Load String , you can then even interact with a PHP server. Would love to know a way how to get the data back from PHP to the game. Any help appreciated.

4

Yes! I would love to know how to get data back from web browser widget. There is a js response class implemented but no example on how to use it.

5

get data back from the webbrowser widget in the sense, to get information about the redirected url like in the case of social media login? or the webpage content?

6

Ingame web full features is something Unreal needs, and appears it’s coming…, but ■■■■, wish it could come today.

7

Please… Is there no way to do?? I want to know this method.
Hope Unreal engineer will see this topic!!

8

My first thought is that you could have your webpage javascript write your information to some file inside the project folder. Have unreal read that file as needed. Also found this: Customizing the Player Web Page in Unreal Engine | Unreal Engine 5.0 Documentation

9

I struggled a little with this but eventually found a solution, but no one is talking about this anywhere online so I thought I’d leave this here for posterity:

Basically you can use the “execute Javascript” node to run some logic in the currently open webpage inside the web browser widget. Here’s how for example I was able to parse some text from inside the webpage and get it to display in another widget text:

  • trigger the “execute Javascript” node with whatever event/button click you want
  • feed it a string variable holding your JS code
  • in that code, parse data, store it inside a JS variable
  • at the end of your JS code use console.log(variable) to post your data
  • back in UE in the details panel of your browser widget at the bottom use “on console message”, the “message” string output holds your data, feed it to a UE variable or directly to a widget
  • PROFIT

here is what my JS code looks like:

resultlist = document.querySelectorAll(".class_name");
lastresult = resultlist[resultlist.length - 1];
result = lastresult.innerHTML;
console.log(result);
  • First line finds all HTML elements with the class “.class_name” and puts them in a nodelist (an array basically)
  • second line finds the last index of the array, but you could simply write [0] at the end of the first line if you want the first result in your case
  • third line reads the actual text content inside the HTML element
  • last line posts your result to the console

You might notice I’m not using var or const to declare my variables, this is because if you run that script several times you will get an error that says something like “can’t declare a variable that is already declared”, so doing it this way works fine as long as you make sure to use a variable name that isn’t an existing JS function name.

Note that I didn’t know any JS before doing this, my only “programming” experience being blueprints, but it’s super easy to learn by searching stackoverflow or MDN, took me only a couple hours to write this snippet by looking up syntax and a lot of trial and error lol.

Hope that helps!!