Point to Outermost Container of Web block, don't create a new Span

Point to Outermost Container of Web block, don't create a new Span

  

I'm having a problem where I want to separate some functionality into web blocks, but once I place the information into different blocks, I lose the ability to reference the outermost container (div) of that block.

When you reference the ID of a Web block, Outsystems creates a <span> around that web block, instead of pointing at the div it is representing.  This could also be solved if I could give that span of the web block a class, but I cannot.

This might be more of an Idea than something anyone could help me with.

<div  id="DublinTheme_wt5_block_wtMainContent" class="MainContent">
<span id="DublinTheme_wt5_block_wtMainContent_wtFirstWebBlock">
<div  class="ContainerIWantToPointTo">This web block is pointed at by ID</div >
</span>
<div  class="ContainerIWantToPointTo">This web block is NOT pointed at by ID</div >
<div >The ID of the first block is DublinTheme_wt5_block_wtMainContent_wtFirstWebBlock</div >
</div >

Here is an example Where I have two Identical web blocks, both with Names specified, and the first one is referenced in the expression at the bottom.

You can see the first one is wrapped in a span.

Here is the page Live.

Let me know if there is a workaround for this, and if not maybe I'll try and explain it in an Idea.

Hi Jordan I think the div you want to reference is inside the webBlock scope thus you dont have acess from the outside. 

One possible solution is to create your own outer div with an HTML block with a static id and then reference that.

Hi Jordan,

Couldn't exactly figure out what you're trying to do, but yes it does create a span around when you reference the webblock id. 

That said, if you want to add a class, like you said, to that span that's created, you can drag an expression widget, with escape content set to 'No' and have something like this


"<script>$(document).ready( function(){
$('#" + FirstWebBlock.Id +"').addClass('ClassName')});</script>"


Cheers

Hi,


dunno what you want to achieve exactly btw?

could you share the oml, so i have a better understanding how and what.


(and true, the span would be annoying)


Afonso Aguas wrote:

Hi Jordan I think the div you want to reference is inside the webBlock scope thus you dont have acess from the outside. 

One possible solution is to create your own outer div with an HTML block with a static id and then reference that.

Are you talking about having an un-escaped expression that adds the div with an ID inside of the web block so I have a predictable ID to target? Would break if I used that block in a list records though. But might help with some things.


J. wrote:

Hi,


dunno what you want to achieve exactly btw?

could you share the oml, so i have a better understanding how and what.


(and true, the span would be annoying)


So in my actual application I was trying to trigger a modal, and wanted to put the actually modal in a web block and still be able to trigger it from the page it is in.

Here is the OML so you can see how the Web blocks are identical but by referencing its ID it creates an extra span.


Solution

Jordan Welch wrote:

Afonso Aguas wrote:

Hi Jordan I think the div you want to reference is inside the webBlock scope thus you dont have acess from the outside. 

One possible solution is to create your own outer div with an HTML block with a static id and then reference that.

Are you talking about having an un-escaped expression that adds the div with an ID inside of the web block so I have a predictable ID to target? Would break if I used that block in a list records though. But might help with some things.


Yes, if you need to use it in a list records you can pass an integer into the webBlock with the current row and add that to the ID.


Solution

Thanks Afonso, as OS is built now, this is probably my best best for solving this.