Dynamic id field in Layout

Does the id of the div need to match the value id ID.CALEND or do you just need each div to have a unique ID that you can identify?

If the latter, you can create a field in the occurrence using an AttributesOnly widget, and bind your div to that (e.g. ufld:DIV.CALEND.SCX), then Uniface will automatically generate a unique ID for each occurrence. You can then get details of the field if needed using the JavaScript API uniface.Field.getBoundElement() to get the element, and inspect its .id attribute.

You don't say exactly why you need the id. If you're not doing anything with it then you could just create an unbound HTML div with no id attribute.

Thanks for the answer David.
My goal is to create Dynamic Tabs in the screen. The HTML in the browser should look something like this:

The Tab id is listed twice there: once in the Nav tabs in the data-bs-target property and afterwards in the Tab panes in the id property.

So far we worked with static Tabs and had no problem. In this new screen, the Tabs will be defined by a retrieve and it would be handy to use the values of some Uniface fields. I was thinking that having something like %%id.calend would be great. (Of course the assignation would only be done at screen exec; no more change afterwards in the Layout).

If this does not work, we will find a plan B via javascript.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

1. Replace the tablist (myTab) HTML unordered list with a bound Attributes Only field placeholder
2. Bind the tab-content div to Uniface occurrences
3. Bind the tab-pane divs to Attributes Only fields in those occurrences
4. webactivate a JavaScript function to dynamically replace the tablist placeholder with dynamically injected HTML list items.

Thanks David.

Indeed if there is no direct possible with Uniface, we will perform some javascript. We will create the html as close as possible as what we need and afterwards will call a javascript weboperation for a few changes.

The option we decided to use and have started development is full procscript:

- We insert in the layout some specific markers.

- In the PostActivate trigger, we intercept the html generated by Uniface with webgen

- In the intercepted html, we can replace the markers by the real html that we need
- We send back to the client the modified html with $webinfo("output")

It is not yet ready but I believe that it should work fine and that will avoid some javascript.

• The selector in the Bootstrap tabs widget doesn't need to use the html id attribute -  you can use any CSS selector (at least in Bootstrap 5).
  
  I used name, e.g. div[name="tab-profile"] instead of "#tab-profile" on the button. I think it should be similar in Bootstrap 4, or you can use the JavaScript API if not).
  
  
• HTML properties such as data-bs-target="tab-profile" can be added to the default layout on the server using $occproperties and $fieldproperties, e.g. when creating the buttons:
  
  putitem/id $fieldproperties(BUTTON.<$entname>), "html:data-bs-target", $concat("div[name=%%"tab-", $lowercase(TITLE.<$entname>), "%%"]")
  
  and in trigger preSerialize on the tabbar entity add the property:
  
  putitem/id $fieldproperties(BUTTON.<$entname>), "html:data-bs-target", $concat("div[name=%%"tab-", $lowercase(TITLE.<$entname>), "%%"]")
  
  You can set other attributes such as html:href (for the Bootstrap 4 version) in a similar manner to the data- attribute examples above.

Hi David,

Thanks for the support.

I will need to check it and see the trigger preSerialize; I have never used it so far.

On our side, we also found a working solution.

The list of Tabs is created after the retrieve and some html is written into a Raw Html field. This field is added in the Layout. This part is very simple.

For the content part of the Tabs, we have 2 divs.

The first one contains the Uniface uent id of the entity and all necessary classes for the Tabs to work.
The second one is inside the first one and has the correct Tab ID.
in order to be working, we just call a Javascript weboperation that inverts the 2 div IDs.

After inverting them, the Tab div has the correct id and the Div inside has the uniface uent ID.
So the Tabs are working as expected and Uniface has not lost its structure and can still work with it.