Obtaining or setting a DOM ID

Obtaining or setting a DOM ID

  
Say I want to generate the following HTML code with web blocks:

<div id="example">
  <ol>
    <li data-target="example"></li>
    <li data-target="example"></li>
    <li data-target="example"></li>
    ...
  </ol>

  <div class="items">
    <div class="item"></div>
    <dic class="item"></div>
    ...
  </div>
</div>

I am currently attempting to replicate the above code with 3 web blocks.

The first web block makes the wrapper <div> that sets the ID to "example" and has placeholders that define the <ol> and <div class="items"> elements.

The second web block creates the <li> elements inside the <ol> placeholder defined in the first web block.

The third web block creates the <div class="item"> elements inside the <div class="items"> placeholder defined in the first web block.

The HTML is being generated almost correctly.  Notice that the ID of the wrapper <div> is manually set, and is echoed in the <li>'s data-target attributes.  I cannot figure out how to get the ID of the wrapper div into the data-target attributes of the <li> elements.

I first tried to get the dynamically generated ID with a preparation that got the "RuntimeID" variable.  Unfortunately, this only returned the ID of the web block element (which was a <span> that contained everything), so it wasn't the ID of the <div> inside of it.

I then tried to use an input parameter so the user could supply the ID.  This is where I am now.  The HTML is compeltely correct except for setting the ID on the wrapping <div> from the first web block.  In other words, I currently have the following HTML being generated:

<div>
  <ol>
    <li data-target="example"></li>
    <li data-target="example"></li>
    <li data-target="example"></li>
    ...
  </ol>

  <div class="items">
    <div class="item"></div>
    <dic class="item"></div>
    ...
  </div>
</div>

Note how everything is fine, except the ID is not defined in the wrapping <div>.  I tried to use "id" in the Extended Properties panel to manually set an ID, but OutSystems seems to be ignoring this.  It is also not generating a dynamic DOM ID for it, so I assume it is not being overwritten.

Any help would be greatly appreciated.

I managed to solve my issue by:
  • Passing into the web block the RuntimeID of the web block and a text ID chosen by the user
  • Creating a JavaScript function that takes those two values and does the necessary DOM manipulation.  It selects the first <div> of the RuntimeID <span> (the web block), then gives it the desired ID.  Then it looks for the <li> elements and attaches the data-target attributes dynamically.
Not a huge fan of this method, but I don't see another way.  If anyone else has any ideas, please let me know.
 Hi Michael,

It should be possible to do, just like you had the block id (the one that generated the span), but you need to give a name to your container for it to appear in the assigns.

Did you try that?

Regards,
João Rosado