20211015 - 탭스 컨테이너 제어 Tabs Container

1. 탭 리전 생성

Identification - Title : Tabs, Type : Static Content

Appearance - Template : Tabs Container

Advanced - Static ID : myStaticTabs

2. 탭 리전 안에 첫번째 서브 리전 생성 IG

IG 통상적인 기본설정 + Layout - Parent Region : Tabs

Advanced - Static ID : myStaticIGPOMST1

3. 탭 리전 안에 두번째 서브 리전 생성 IG

IG 통상적인 기본설정 + Layout - Parent Region : Tabs

Advanced - Static ID : myStaticIGPOMST2

4. Page Main

Javascript - Execute when Page Loads :

$("#myStaticTabs").on( "atabsactivate", (event, ui) => 

{

    if (ui.active.href === "#SR_myStaticIGPOMST1") {

        apex.item("P8_RMV").hide();

    }

    else if (ui.active.href === "#SR_myStaticIGPOMST2") {

        apex.item("P8_RMV").show();

    }

    else {

        alert("Call to Admin");

    }

    apex.item("P8_ACTIVETAB").setValue(ui.active.href);

    if (vPageLoad) {

        var vMemoryTab = apex.item("P8_MEMORYTAB").getValue();

        if(vMemoryTab) {

            if(vMemoryTab != ui.active.href) $("#myStaticTabs .a-Tabs").aTabs("getTabs")[vMemoryTab].makeActive();

        }

        vPageLoad = false;

    }

    

} );

이렇게 하면 탭을 선택할 때마다 해당 페이지 아이템 show/hide 처리 가능

* Dynamic Action에서 처리를 위해 atabsactivate를 활용해 custom event를 생성 해 보았지만 정상적으로 작동하지 않았음.

참고

ref1 : $('#myStaticTabs ul.t-Tabs:first').aTabs('getTabs').tab$[0].id

ref2 : ui.active.panel$.find(".a-IG").interactiveGrid("refresh");