Dynamic Tab Label as ID

[shedev]

I am interested in dynamically labeling the first tab of each item as its list ID number as illustrated below.

In this great post, I see dynamic titles applied but looks to be static Ability to reference Tab by tab.title instead of tab[x] - #6 by vhancock

There may be a breadcrumb in this post too where tab renaming occurs Change tab name as soon as a certain value is selected

This is what I’d like to achieve. If anyone has accomplished this and is willing to share the code and screen captures too, I welcome both.

WHAT DOESN’T WORK (but I tried)

fd.spRendered(function() {
var currentItemID = fd.itemID;
fd.container('HeaderTab').tabs[1].title.value = currentItemID;
});

Thanks in advance!

[Margo]

Hello @shedev,

There are errors in the code you shared that is why it doesn't work:

• Use fd.itemId to get the current item id
• The tab index start with 0, so to change the first tab title it must be fd.container('HeaderTab').tabs[0]
• There is no property value for the title

I updated the code, please test it:

fd.spRendered(() => {
  var currentItemID = fd.itemId;
  fd.container('HeaderTab').tabs[0].title = currentItemID;
});

[shedev]

@Margo - lovely, thank you.

I had tried it with and without the .value but the => eluded me. I have successfully used your code to dynamically rename the tab and have also applied the same logic to the second tab. Here is how it looks in my JS console.

//>>>>>>>>>>>>>> Populates the first tab with the Item ID value, concatenated to read "My Assignment #1"
fd.spRendered(() => {
  var currentItemID = fd.itemId;
  fd.container('HeaderTab').tabs[0].title = 'Item ID: ' + currentItemID;
});
//
//>>>>>>>>>>>>>> Populates the second tab with the inum value, concatenated to read "Item ID: 1"
fd.spRendered(() => {
  var currentiNum = fd.field('inum').value;
  fd.container('HeaderTab').tabs[1].title = 'My Assignment #' + currentiNum;
});

And here is what the end product looks like.

Compared to fd.spRendered(function() { can you educate me on exactly what this is doing? I get tripped up on the => and why it is needed.

fd.spRendered(() => {

Your knowledge and help is so appreciated, always.

Thank you so very much.

[shedev]

Building the ability to dynamically add values to the tab names, I further enhanced a tab based on stakeholder feedback. The update added a longer string of text and required a small change to the CSS. I wanted to share it here in case anyone else runs into the same gotcha.

When the tab was active, the text fit perfectly, but the passive (not clicked) tab cut off the text. I added a min-width to the passive CSS and it worked as desired.

/* SECOND TAB, PASSIVE  */.fd-form .tabset li:nth-child(2) a {min-width: max-content;

}

/* SECOND TAB, ACTIVE  */.fd-form .tabset li:nth-child(2) a.active {background-color: #F6DA80 !important;color: black !important;

}