Uniface User Forum

Hello,
In the layout of a DSP, I would need to give dynamic id to the different div.
For instance:
<table id="uent:CALEND.SCX" border="1">
    <tbody>
        <tr id="uocc:CALEND.SCX">
              <td> <div id="This ID should be the value of ID.CALEND"><input id="ufld:DATE.CALEND.SCX" style="width:150px;" value="Input Element"/> </div></td>
        </tr>
  </tbody>
</table>

Of course, once the ID has been set, it does not need to be dynamic again.

The use case of this, is for having multiple dynalic Tabs in a screen. Number of tabs will depend on the content from one retrieve.

Is there any way to do this in the Layout ?

Thank you,

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.

Hello,
In the layout of a DSP, I would need to give dynamic id to the different div.
For instance:
<table id="uent:CALEND.SCX" border="1">
    <tbody>
        <tr id="uocc:CALEND.SCX">
              <td> <div id="This ID should be the value of ID.CALEND"><input id="ufld:DATE.CALEND.SCX" style="width:150px;" value="Input Element"/> </div></td>
        </tr>
  </tbody>
</table>

Of course, once the ID has been set, it does not need to be dynamic again.

The use case of this, is for having multiple dynalic Tabs in a screen. Number of tabs will depend on the content from one retrieve.

Is there any way to do this in the Layout ?

Thank you,

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>

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.

Hello,
In the layout of a DSP, I would need to give dynamic id to the different div.
For instance:
<table id="uent:CALEND.SCX" border="1">
    <tbody>
        <tr id="uocc:CALEND.SCX">
              <td> <div id="This ID should be the value of ID.CALEND"><input id="ufld:DATE.CALEND.SCX" style="width:150px;" value="Input Element"/> </div></td>
        </tr>
  </tbody>
</table>

Of course, once the ID has been set, it does not need to be dynamic again.

The use case of this, is for having multiple dynalic Tabs in a screen. Number of tabs will depend on the content from one retrieve.

Is there any way to do this in the Layout ?

Thank you,

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 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>

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.

Hello,
In the layout of a DSP, I would need to give dynamic id to the different div.
For instance:
<table id="uent:CALEND.SCX" border="1">
    <tbody>
        <tr id="uocc:CALEND.SCX">
              <td> <div id="This ID should be the value of ID.CALEND"><input id="ufld:DATE.CALEND.SCX" style="width:150px;" value="Input Element"/> </div></td>
        </tr>
  </tbody>
</table>

Of course, once the ID has been set, it does not need to be dynamic again.

The use case of this, is for having multiple dynalic Tabs in a screen. Number of tabs will depend on the content from one retrieve.

Is there any way to do this in the Layout ?

Thank you,

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.

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 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>

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.

Hello,
In the layout of a DSP, I would need to give dynamic id to the different div.
For instance:
<table id="uent:CALEND.SCX" border="1">
    <tbody>
        <tr id="uocc:CALEND.SCX">
              <td> <div id="This ID should be the value of ID.CALEND"><input id="ufld:DATE.CALEND.SCX" style="width:150px;" value="Input Element"/> </div></td>
        </tr>
  </tbody>
</table>

Of course, once the ID has been set, it does not need to be dynamic again.

The use case of this, is for having multiple dynalic Tabs in a screen. Number of tabs will depend on the content from one retrieve.

Is there any way to do this in the Layout ?

Thank you,

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.

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 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>

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.

Hello,
In the layout of a DSP, I would need to give dynamic id to the different div.
For instance:
<table id="uent:CALEND.SCX" border="1">
    <tbody>
        <tr id="uocc:CALEND.SCX">
              <td> <div id="This ID should be the value of ID.CALEND"><input id="ufld:DATE.CALEND.SCX" style="width:150px;" value="Input Element"/> </div></td>
        </tr>
  </tbody>
</table>

Of course, once the ID has been set, it does not need to be dynamic again.

The use case of this, is for having multiple dynalic Tabs in a screen. Number of tabs will depend on the content from one retrieve.

Is there any way to do this in the Layout ?

Thank you,

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.

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 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>

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.

Hello,
In the layout of a DSP, I would need to give dynamic id to the different div.
For instance:
<table id="uent:CALEND.SCX" border="1">
    <tbody>
        <tr id="uocc:CALEND.SCX">
              <td> <div id="This ID should be the value of ID.CALEND"><input id="ufld:DATE.CALEND.SCX" style="width:150px;" value="Input Element"/> </div></td>
        </tr>
  </tbody>
</table>

Of course, once the ID has been set, it does not need to be dynamic again.

The use case of this, is for having multiple dynalic Tabs in a screen. Number of tabs will depend on the content from one retrieve.

Is there any way to do this in the Layout ?

Thank you,

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.

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.

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 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>

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.

Hello,
In the layout of a DSP, I would need to give dynamic id to the different div.
For instance:
<table id="uent:CALEND.SCX" border="1">
    <tbody>
        <tr id="uocc:CALEND.SCX">
              <td> <div id="This ID should be the value of ID.CALEND"><input id="ufld:DATE.CALEND.SCX" style="width:150px;" value="Input Element"/> </div></td>
        </tr>
  </tbody>
</table>

Of course, once the ID has been set, it does not need to be dynamic again.

The use case of this, is for having multiple dynalic Tabs in a screen. Number of tabs will depend on the content from one retrieve.

Is there any way to do this in the Layout ?

Thank you,

• 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.

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.

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.

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 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>

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.

Hello,
In the layout of a DSP, I would need to give dynamic id to the different div.
For instance:
<table id="uent:CALEND.SCX" border="1">
    <tbody>
        <tr id="uocc:CALEND.SCX">
              <td> <div id="This ID should be the value of ID.CALEND"><input id="ufld:DATE.CALEND.SCX" style="width:150px;" value="Input Element"/> </div></td>
        </tr>
  </tbody>
</table>

Of course, once the ID has been set, it does not need to be dynamic again.

The use case of this, is for having multiple dynalic Tabs in a screen. Number of tabs will depend on the content from one retrieve.

Is there any way to do this in the Layout ?

Thank you,