Skip to main content

How to Call a Block Action in a Mobile Screen


When working with big forms, I need to split them into several Blocks. In the mobile screen containing those Blocks, how can I trigger the validation actions of each Block?


To trigger a Block action in a mobile screen, you need to:

  1. Create a top Container in the Block. This will allow you to access the Block as the parent element of the Container. In this example, the name of the top Container is Root;
  2. In the OnReady action of the Block, use a JavaScript node to define a JavaScript function that will expose the Block actions. In this example, validatePhone function exposes ValidatePhoneNumber Block action, using the top Container rootId to access the Block parent element:

    var wbElement = document.getElementById($parameters.rootId).parentElement;
    wbElement.validatePhone = $actions.ValidatePhoneNumber;

  3. Pass the Id of the top Container as a parameter to the JavaScript node:

  4. In the consumer screen, use a JavaScript node to access the JavaScript function defined in the Block DOM element, passing the Block Id as a parameter. In this example, we use the BlockId to get Block DOM element and call its validatePhone function:

    var wbElement = document.getElementById($parameters.BlockId);