Use an offscreen web area

Automatically translated from English

Do you need to load web pages, extract metadata, or generate pictures from the contents of pages on a headless server? If you answered “yes”, then you’re in luck because 4D v18 R3 makes it possible! Now you can create an offscreen web area with the WA Run offscreen area command. 

4D allows you to use a web area in offscreen mode. The HDI below shows you how to use it with a JavaScript API as a Google chart:

HDI offscreen web area

The WA Run offscreen area command creates a web area in memory. You need to pass all the useful information for the web area in parameter, such as:

  • The URL to load
  • The area name
  • The callback method called when an event is thrown by the web area

For example, if you want to get the title of the last 4D blog post, you need to load the “https://blog.4d.com” URL:

$params:=New object
// url of the html file with the js function to use
$params.url:="https://blog.4d.com"

// Add a callback method called on event
$params.onEvent:=Formula(GetBlogTitle )

// create offscreen web area according to $params
$title:=WA Run offscreen area($params)

And use this code in the callback method, GetBlogTitle:

If (FORM Event.code=On End URL Loading)
  $js:="document.getElementsByTagName('h2')[1].getElementsByTagName('a')[0].innerHTML"
  This.result:=WA Evaluate JavaScript(*;This.area;$js)
End if 

To make debugging easy with an offscreen web area,  we added a new command: WA OPEN WEB INSPECTOR. It opens the web inspector and allows you to verify whether or not the page is correctly loaded, or if your JavaScript code throws an error.

You can refer to the documentation to see in detail what you can do with these new commands.

Fabrice Mainguené

• Product Owner •

Fabrice Mainguené joined 4D Program team in November, 2016. As a Product Owner, he is in charge of writing the user stories then translating it to functional specifications. His role is also to make sure that the feature implementation delivered is meeting the customer need.

After obtaining a Bachelor degree in Computer Science at CNAM, Fabrice joined a small software publishing company as a Windev developer. Then he worked for different companies in industry and trade areas as a Windev and web developer as well as technical advisor on new features.