ID's on web blocks

ID's on web blocks

  

Hi All,

I'm new to outsystems so this might be something really simple that i'm doing wrong but here goes anyway. I'm creating a new web block but when i add the name in the property box (Name) to say something like "basicaddon" etc when i publish its adding the following when inspecting in the DOM "wt9_wtbasicaddon"

What i want : <div id="basicaddon">

what i'm getting : <div id="wt9_wtbasicaddon">

Is there a setting or am i doing something wrong?

Adding other extended properties seem to work such as aria-expanded / aria-controls etc


Thanks

Neil K



Hi Neil,

You're doing nothing wrong, this is completely expected. It doesn't go only for Web Blocks, but for all screen widgets like input boxes etc. One of the reasons for this is that you can place a Web Block inside a repeater like a Table Records, List Records etc., and you'd get a name clash otherwise.

If you need to use the Id of a screen widget, always use WidgetName.Id, and you're fine.

Solution

Hi Neil.

IDs are automatically given by the platform to the elements, to try to ensure uniqueness (and because the platform needs them and can't relay on names given or not by the developers).

If the idea is defining style in the application/pages CSS, sorry, but forget. Use classes and other things.

If the idea is to pass to JavaScript or other components, give it a name and you will be able to access the ID, from inside OutSystems, as NameOfYourWebBlock.Id.

In any case, what is that you are trying to do?

Cheers,
Eduardo Jauch

Solution

Thanks for the reply guys.

Yeah, i just wanted to create a new web block that is semantically cleaner in the html than the ones in some of the UI kits and some of the functions are called in the javascript via an id

No worries if i just have to use the "wt9_wtbasicaddon.id" in the .id in the javascript.



Be aware that it won't always be "wt9_wt" as a prefix, so always use the Id property of the widget instead of relying on the prefix!