Adapting to viewport changes

Application forms and functions can be adapted to the front-end viewport size or mobile device orientation.

Important: The windowresized predefined action has been introduced to let programs adapt the forms to the screen size or mobile screen orientation. Starting with Genero V4, to adapt dynamically the forms to the screen, consider defining forms with Responsible Layout instead.

Detecting viewport size / orientation changes

When the mobile device orientation changes, or when the current window is resized on desktop/web front-ends, the windowresized specific predefined action will be sent, if an ON ACTION handler is defined by the current dialog for this action.

Note: The windowresized action is used only to hide/show items on the current form using the standard user interface API ( ui.Form.setElementHidden()) and it is not recommended for reloading forms on the fly.

This predefined action can be used to detect viewport geometry changes and adapt the application form to the new size:

  ON ACTION windowresized
     -- Code to adapt to the new viewport size
Note: In dialogs allowing field input (INPUT / INPUT ARRAY or CONSTRUCT), take care of the current field input: The windowresized action can force the field validation. Therefore, it is not recommended to use this special action in these dialogs. The action can be safely used in DISPLAY ARRAY and MENU dialogs.
To control action view rendering defaults and current field validation behavior when the windowresized action is used, consider setting action default attributes for this action in your .4ad file as follows:
  <ActionDefault name="windowresized" validate="no" defaultView="no" contextMenu="no"/>
Another option is to define these action defaults attributes in the ON ACTION handler:

Querying the geometry of the viewport

Use the feInfo/windowSize front call to query the actual size of the front-end viewport (desktop window container, web browser tab, or mobile screen size):
CALL ui.Interface.frontCall("standard","feInfo",["windowSize"],[size])
IF size == "1200x1824" THEN