20210916 - 모달 다이얼로그 팝업 창 Modal Dialog Popup

일단 시작점은 상품명을 입력하고 찾는 부분부터.


1. 상품명 Dynamic Action

Name : DA_ItemChangePNM

When - Event : Change

Selection Type : Item

Item : P15_PRODNM

True - Identification - Action : Execute JavaScript Code

Code : apex.event.trigger($("#btnOpenDialogPROD"),"click","");

내용을 입력한 후 Item Change에 대한 이벤트가 감지되면 상품명 옆의 찾기 버튼을 클릭한 것과 같이 이벤트를 트리거함.

찾기 버튼 속성 중 Advanced - Static ID : btnOpenDialogPROD


2. 찾기 버튼 Dynamic Action

Name : DA_FindClick

When - Event : Click

Selection Type : Button

Button : FIND

True - Identification - Action : Execute JavaScript Code

Code :


var vFindV = apex.item("P15_PRODNM").getValue();
var vArray;
var l_url = 'f?p=#APP_ID#:16:#SESSION#::NO:RP,16:P16_FINDC,P16_FINDV:#FINDC#,#FINDV#';

apex.message.clearErrors();
apex.item("P15_PRODID").setValue("", "", true);
apex.item("P15_PRODNM").setValue("", "", true);
apex.event.trigger( "#myStaticIR", "apexrefresh" );

apex.server.process(
    'prodFindDA-select1',
    {x01: vFindV},
    {success: function (pData) {

            vArray = pData.split(":");
            if (vArray[0] == 1)
            {
                apex.item("P15_PRODID").setValue(vArray[1], vArray[1], true);
                apex.item("P15_PRODNM").setValue(vArray[2], vArray[2], true);
                //이어서 조회, refresh
                return true;
            }
            
            l_url = l_url.replace('#APP_ID#',  $v('pFlowId'));
            l_url = l_url.replace('#SESSION#', $v('pInstance'));
            l_url = l_url.replace('#FINDC#',   'prodnm');
            l_url = l_url.replace('#FINDV#',   vFindV);

            // execute PL/SQL API apex_uti.prepare_url to generate a valid Session State Protection checksum
            apex.server.process(
                'prodFindDA-popup',
                {x01: l_url},
                {success: function (pData) {
                        pData = pData.replace(",this", ",'#btnOpenDialogPROD'");
                        apex.navigation.redirect(pData); // Call Modal Dialog Page
                        
                    },
                    dataType: "text"
                }
            );

            return true;
        },
        dataType: "text"
    }
  );

입력한 값을 기준으로 팝업을 오픈하기 전에 select 를 해 보아서 1건만 있으면 바로 찾아온 값을 셋팅하고 없거나 여러 건이라면 팝업 창을 오픈해서 선택할 수 있도록 하는 코드.


3. Select 하여 1건만 있는지 찾기 Ajax

Processing - Ajax Callback 

Identification - Name : prodFindDA-select1

Type : Execute Code

Editable Region : -Select-

Source - PL/SQL Code


declare
  l_value  varchar2(4000);
  l_pid    x0822_prod_mst.prod_id%type;
  l_pnm    x0822_prod_mst.prod_nm%type;
begin
  l_value := apex_application.g_x01;
    
  begin
    select prod_id, prod_nm
      into l_pid, l_pnm
      from x0822_prod_mst 
     where (prod_nm like '%'||l_value||'%');
    
    exception
      when no_data_found then htp.prn('0'); return;
      when too_many_rows then htp.prn('2'); return;
  end;

  htp.prn('1:'||l_pid||':'||l_pnm);
end;


4. 팝업을 위한 URL 만들기 Ajax

Processing - Ajax Callback 

Identification - Name : prodFindDA-popup

Type : Execute Code

Editable Region : -Select-

Source - PL/SQL Code


declare
    l_url    varchar2(2000);   
    l_result varchar2(4000);
begin
    l_result := apex_util.prepare_url(apex_application.g_x01);
    htp.prn(l_result);
end;


5. Modal 팝업 창에서 더블클릭시 값 반환, 창 닫기 Dynamic Action

Identification - Name : DA_DoubleClickIR

When - Event : Double Click

Selection Type : jQuery Selector

jQuery Selector : #myStaticIR td

True - Identification - Action : Execute JavaScript Code

Code :


var vPID = $(this.triggeringElement).closest('tr').find('td[headers="myStaticPID"]').text();
var vPNM = $(this.triggeringElement).closest('tr').find('td[headers="myStaticPNM"]').text();
apex.item("P16_PRODID_RTN").setValue(vPID, vPID, true);
apex.item("P16_PRODNM_RTN").setValue(vPNM, vPNM, true);



Identification - Action : Close Dialog

Setting : Items to Return : P16_PRODID_RTN,P16_PRODNM_RTN


6. 메인 페이지 Dialog Closed Dynamic Action 에서 팝업 창에서 반환된 값 수신

Identification - Name : Dialog Closed from

When - Event : Dialog Closed

Selection Type : jQuery Selector

jQuery Selector : body >> 이렇게 써야한다는 것을 어떻게 알겠습니까.

True - Identification - Action : Execute JavaScript Code

Setting - Code :


var vPID = this.data.P16_PRODID_RTN;
var vPNM = this.data.P16_PRODNM_RTN;

apex.item("P15_PRODID").setValue(vPID, vPID, true);
apex.item("P15_PRODNM").setValue(vPNM, vPNM, true);

그런 후에 관련 리전 Refresh.


7. 뽀나스 : 조회버튼 클릭시 (상품코드, 기준일자) 조건 체크 후 없으면 메세지 보이기

Dynamic Action


var vPRODID = apex.item("P15_PRODID").getValue();
var vSDATE  = apex.item("P15_SDATE").getValue();

vPRODID = vPRODID.trim();
vSDATE  = vSDATE.trim();

if( typeof vPRODID === 'undefined' || vPRODID === null || vPRODID == ""){
    apex.item("P15_PRODNM").setFocus();
    apex.message.clearErrors();
    apex.message.showErrors([{
            type: "error",
            location: ["page", "inline"],
            pageItem: "P15_PRODNM",
            message: "상품명을 입력해 주십시오.",
            unsafe: false
        }
    ]);    
    return false;
}

if( typeof vSDATE === 'undefined' || vSDATE === null || vSDATE == ""){
    apex.item("P15_SDATE").setFocus();
    apex.message.clearErrors();
    apex.message.showErrors([{
            type: "error",
            location: ["page", "inline"],
            pageItem: "P15_SDATE",
            message: "조회기준일을 입력해 주십시오.",
            unsafe: false
        }
    ]);    
    return false;
}



참고해서 구현 해 보면 좋은 것 같은.

https://www.ostrowskibartosz.pl/2019/12/open-modal-page-using-pretius-apex-context-menu/




댓글 없음:

댓글 쓰기

20250202 - IG 다운로드 버튼 바로 보이기

JS initialization Code : function (config) {     var $ = apex.jQuery,         toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),  ...