Dynamically update tab titles

Forms
1

I’m looking to update the title on a Tab based on a field within the form.

I currently have a tab called ‘Project’ and I’d like to update this to show ‘Project - In Progress’ depending on a choice field (which has ‘Not Started, In Progress and Complete’ as the 3 options.

Looking at something like the below, but can’t see where I can update the tab titles with javascript, is it possible?

fd.field(‘Status’).$on(‘change’, function(){
//some code to update the tab title
};

Thanks
Andy

2

Dear Andy,
Please, try to add the following code to the JS editor in the designer:

fd.spRendered(function() {
    fd.field('Status').$on('change', function(value) {
        $(fd.container("Tab0").$el).find("li:eq(0) .nav-link").html("Project - " + value);
    });
});

Update 0 in li:eq(0) with the number of the tab, starting from zero.

P.S. You can also use the following code, so the tab updates on Edit form when the form opens:

fd.spRendered(function() {
    fd.field('Status').$on('change', function(value) {
        setTabName(value);
    });

    function setTabName(value){
        $(fd.container("Tab0").$el).find("li:eq(0) .nav-link").html("Project - " + value);
    }

    //run code when form opens:
    setTabName(fd.field('Status').value);
});
3

Thanks Nikita this works really well!

1 Like
4

Hi @Nikita_Kurguzov.

What would the equivalent code be to dynamically change an Accordian container title?

Thanks

5

Hello @stormanh,

To change the title of the accordion tab dynamically you can use this code:

$(fd.container("Accordion1").$el).find("div:eq(0) .nav-link").html("New Title")

Update 0 in div:eq(0) with the number of the tab, starting from zero.

1 Like