Create reference to Block Name

I noticed that Blocks have their names set in the HTML code as their id, so they're addressable via 

<div data-block="data-block" class="OSBlockWidget" id="NameInsideStudio">



This would be extremely useful inside JavaScript blocks to change attributes to a specific component or change attributes. Also to call functions like collapsing or hiding parts of custom Blocks. If a block is only used once it can be found via the class it has, but with more blocks of the same type added, this becomes unreliable since they all have the same class, and the unique Outsystems ID would be a true identifier in the JavaScript code.

I do need, however, some way of assigning the block name into a local variable so it can be reached via the $parameter.<whateverName> construct or some other way.

Not even the JavaScript API ApplicationContext seems to handle this one. I've read various threads here on the forum, but so far they seem mostly to be about bubbling up the event from the block to the parent which I don't see solving this issue.

The only workaround I can come up with so far is something like adding a local variable called BlockName which I can refer to via $parameter.BlockName and then use to call the right JS with the right parameters.

What am I not seeing? :) 


Hi Soren,

You can use the name property in the block (or any other element for that matter) and use the <Name>.Id as an input to your javascript. It will refer to the id the element it will take at runtime.

In my example above, WB_Step1.Id is the programmatic way to refer to the id of the block at run time.

If you need to trigger an action of a block from a parent block / screen, you can also do the approach mentioned in this tutorial.

Kind Regards,

Thank you, passing the ID of the block via $parameters and doing parent gets me exactly the block I'm looking for. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.