Audience Manager GUI Extension - event fired when the Details tab is selected

Question

I'm implementing a GUI Extension for Audience Manager - initial steps have gone well, got my config right, script loaded etc.

I'm looking for the event I can subscribe to when the "Details" tab is clicked.

$evt.addEventHandler($display, "????", onSelectTabControl);

function onSelectTabControl () {          
}

I want to manipulate some extended details fields so need to make sure this tab is selected before I start grab fields.

UPDATE

Playing through Chrome's console when I open a Contact I can get the tab strip through:

var tabs = $display.getView().properties.controls.TabControl;

And can then detect a selection with:

tabs.addEventListener("select", function(t) { console.log(t); });

When I add these to my inserted script though I start seeing an error????

Uncaught Error: Value should be a function.

UPDATE 2

Got this working with the following code and following Albert's article as Dave mentions below. I hadn't realised that the start event was still called when the Contact View was displayed:

$evt.addEventHandler($display, "start", onDisplayStarted);

function onDisplayStarted() {
    console.log("OnDisplayStarted called");
    $evt.removeEventHandler($display, "start", onDisplayStarted);

    var tabs = $display.getView().properties.controls.TabControl;
    if(tabs!==undefined){
        tabs.addEventListener("select", function(t) { 
            console.log(t); 

            if(t.data.element.id == "DetailsTab") {
                console.log("DetailsTab!");

                // Set and fields to disabled
                $j(t.data.element).find(":input").attr('disabled','disabled');
                // Turn off any date buttons
                $j(t.data.element).find("div.button").hide();
            }
        });
    };
}

What I could do with now is a way to check which Address Book a contact is in from the Contact View - something I'm not sure is possible but a topic for a different question!

Answer 1

Using Albert's post here, i've managed to get an example working.

To an existing Gui Extension I added the config below:

<cfg:group name="GroupName">
    <cfg:domainmodel name="Name">
        <cfg:fileset>
            <cfg:file type="script" id="Id">/client/js-test.js</cfg:file>
        </cfg:fileset>
        <cfg:services />
    </cfg:domainmodel>
</cfg:group>

Then the JS file is just:

$evt.addEventHandler($display, "start", onDisplayStarted);

function onDisplayStarted() {
    console.log("OnDisplayStarted called");
    $evt.removeEventHandler($display, "start", onDisplayStarted);

    var tabs = $display.getView().properties.controls.TabControl;
    if(tabs!==undefined){
        tabs.addEventListener("select", function(t) { console.log(t); });
    };
}

Obviously you'll need to adapt this for your needs, but it should get you started.