Oracle APEX Korea

20250304 - 버튼 액션 및 포커스 제거

JS :

$("#your-button-id").on("click", function(e) {

e.preventDefault();

return false;

});

CSS:

.your-button-class {

pointer-events: none;

}

Button URL:

javascript:void(0);

20250218 - 여러 종류 메세지 보이기

// 기본 alert 대신:

apex.message.showPageSuccess('저장되었습니다'); // 성공 메시지 (초록색)

apex.message.showPageError('오류가 발생했습니다'); // 에러 메시지 (빨간색)

apex.message.showPageWarning('주의가 필요합니다'); // 경고 메시지 (노란색)

apex.message.showPageInfo('참고해주세요'); // 정보 메시지 (파란색)

// 타이틀과 함께 표시:

apex.message.alert('메시지 내용', '타이틀'); // 확인 버튼이 있는 모달 창

// 콜백 함수 사용:

apex.message.confirm('저장하시겠습니까?', function(okPressed) {

if (okPressed) {

// OK 버튼 눌렀을 때 실행할 코드

}

});

// 자동으로 사라지는 메시지:

apex.message.clearErrors();

apex.message.showPageSuccess('저장되었습니다', function() {

// 3초 후 자동으로 사라짐

});

//아이콘 포함

('#SID_BTN_RADMIN').on('click', function(e) {
   e.preventDefault();
   apex.message.clearErrors();
   
   apex.message.confirm("진행을 취소하고 관리 메인 페이지로 이동하시겠습니까?", function(okPressed) {
       if (okPressed) {
           const url = `f?p=${$v('pFlowId')}:200:${$v('pInstance')}::NO:::`;
           
           apex.server.process(
               'AJAX-popup',
               {x01: url},
               {
                   success: function(pData) {
                       pData = pData.replace(",this", ",'#SID_BTN_RADMIN'");
                       apex.navigation.redirect(pData);
                   },
                   error: function() {
                       apex.message.alert("페이지 이동 중 오류가 발생했습니다.");
                   },
                   dataType: "text"
               }
           );
       }
   }, {
        title: "확인 요청",
        style: "warning"
   });
});

20250217 - IG 수정 가능항목에 폰트 색상 Class 넣기

SQL :

     , case 
         when delivery_req is null or delivery_req = '' then ''
         when regexp_instr(delivery_req, '/[0-9]|[0-9]일|[0-9].[0-9]|평일|주말|요일|[0-9]월') > 0 then 'css-red'
         else ''
       end as delivery_req_style
     , delivery_req

Column Initialization JavaScript Function :

function(options) {
    options.defaultGridColumnOptions = {
        cellCssClassesColumn: "DELIVERY_REQ_STYLE"
    }
    return options;
}

읽기 전용 항목이면, 간단히 HTML Expression으로.

     , decode(regexp_instr(nvl(delivery_req,''), '/[0-9]|[0-9]일|[0-9].[0-9]|평일|주말|요일|[0-9]월'), 0
              , '<span>'||delivery_req||'</span>'
              , '<span class="css-red">'||delivery_req||'</span>') delivery_req_css

참고

https://apexapps.oracle.com/pls/apex/r/apex_pm/ideas/details?idea=FR-2656&cs=1UuSgWyFNcx0mxFPVL9acva6DYDiz8xoQU3igQfQX24AfPiSBv0TbsWdvNk6cKRXRJnAQd-FirfRIh0qh3XMbQA

20250202 - IG 다운로드 버튼 바로 보이기 및 바로 엑셀 다운로드 실행

JS initialization Code :

function(config) {
    var $ = apex.jQuery,
        toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
        actionsMenuGroup = toolbarData.toolbarFind("actions1");
    config.initActions = function(actions) {
        actions.add({
            name: "show-download-dialog"
        });
    }

    actionsMenuGroup.controls.push({
        type: "BUTTON",
        action: "show-download-dialog",
        label: "Download",
        icon: "fa fa-download",
        iconBeforeLabel: true

    });

    config.toolbarData = toolbarData;
    return config;
}

최종

Global Variable Declaration :

var firstClickedIG = null; 

IG Initialization JavaScript Function :

function(config) {
   var $ = apex.jQuery,
       toolbarData = $.apex.interactiveGrid.copyDefaultToolbar();
   
   config.defaultGridViewOptions = {
       tooltip: {
           content: function(callback, model, recordMeta, colMeta, columnDef ) {
               var text = null;
               if (columnDef && recordMeta) {
                   let value = model.getValue(recordMeta.record, columnDef.property);
                   text = typeof value === 'object' && value.d ? value.d : value;
               }
               return text;
           },
           tooltipClass: "tooltip-custom-style"
       }
   };
   
   config.features.download.formats = ["XLSX"];
   
   var vSID = "myStaticIGPOMST1";
   config.initActions = function(actions) {
       actions.add({
           name: "custom-download1",
           action: function(event, focusElement) {
               var ig$ = apex.region(vSID).widget();
               if(firstClickedIG === null) firstClickedIG = vSID;
               ig$.interactiveGrid("getActions").invoke("show-download-dialog");
               var $hotButton = (firstClickedIG === vSID) ? 
                   $('.ui-dialog-buttonpane:first .ui-button--hot') :
                   $('.ui-dialog-buttonpane:last .ui-button--hot');
               if ($hotButton.length > 0) {
                   $hotButton.trigger("click");
               }
           }
       });
   };
   
   var rightActionGroup = toolbarData.toolbarFind("actions4");
   if (!rightActionGroup) {
       rightActionGroup = {
           id: "actions4",
           controls: []
       };
       toolbarData.toolbar.push(rightActionGroup);
   }
   
   var resetButton = rightActionGroup.controls.find(control => control.action === "reset-report");
   var resetIndex = rightActionGroup.controls.indexOf(resetButton);
   
   var downloadButton = {
       type: "BUTTON",
       action: "custom-download1",
       label: "다운로드",
       hot: false
   };
   
   if (resetIndex !== -1) {
       rightActionGroup.controls.splice(resetIndex, 0, downloadButton);
   } else {
       rightActionGroup.controls.unshift(downloadButton);
   }
   
   config.toolbarData = toolbarData;
   return config;
}

참고

20250125 - 메세지 박스 사라짐 처리 fade out

처리

apex.jQuery(function() {
  apex.theme42.util.configAPEXMsgs({
    autoDismiss: true,
    duration: 5000  // duration is optional (Default is 3000 milliseconds)
  });
});

참고

https://apex.oracle.com/pls/apex/apex_pm/r/ut/javascript-apis

20250109 - 각 리전의 높이 Height 맞추기

JS Page Load :

function equalizeHeight() {
    let regionA = apex.jQuery('#SID_MAIN');
    let regionB = apex.jQuery('#SID_SIDE');
    let maxHeightAB = Math.max(regionA.height(), regionB.height());

    regionA.height(maxHeightAB);
    regionB.height(maxHeightAB);

    let region1 = apex.jQuery('#SID_R1');
    let region2 = apex.jQuery('#SID_R2');
    let maxHeight = Math.max(region1.height(), region2.height());
    
    region1.height(maxHeight);
    region2.height(maxHeight);
}

apex.jQuery(window).on('apexwindowresized load', equalizeHeight);

참고

20250107 - 모바일 디자인 참고

1. 하단 Dock 독 메뉴

Navigation Menu - List Template : Top Navigation Tabs

네비게이션 메뉴 숨기기

Appearance - Page Template : Minimal (No Navigation)

2. 상단 GNB

HTML

<div class="c-Alert c-Alert--page c-flex-space" id="c_Alert_Success">
    <div class="t-Alert-wrap col-6">
        <div class="col col-12 apex-col-auto col-start col-end">
            <button class="t-Button t-Button--noLabel t-Button--icon t-Button--large t-Button--noUI lto22518622360929923_0" onclick="OnClickBack()" type="button" id="B22518622360929923Left" title="New" aria-label="New">
                <span class="t-Icon fa fa-arrow-left" aria-hidden="true"></span>
            </button>
        </div>
    </div>
    <div class="t-Alert-wrap col-6 c-flex-end">
        <div class="col col-12 apex-col-auto col-start col-end">
            <button class="t-Button t-Button--noLabel t-Button--icon t-Button--large t-Button--noUI lto22518622360929923_0" onclick="OnClickHome()" type="button" id="B22518622360929923Home" title="New" aria-label="New">
                <span class="t-Icon fa fa-home" aria-hidden="true"></span>
            </button>
            <button class="t-Button t-Button--noLabel t-Button--icon t-Button--large t-Button--noUI lto22518622360929923_0" onclick="OnClickCart()" type="button" id="B22518622360929923Cart" title="New" aria-label="New">
                <span class="t-Icon fa fa-shopping-cart" aria-hidden="true"></span>
            </button>
        </div>
    </div>
</div>

JS :

let selectedMODIDs;

function OnClickBack() {
  window.history.back();
}

function OnClickHome() {
  apex.navigation.redirect ("f?p=&APP_ID.:Home:&APP_SESSION.::NO:RP::");
}

function OnClickCart() {
  apex.navigation.redirect ("f?p=&APP_ID.:ViewCart:&APP_SESSION.::NO:RP::");
}

CSS :

.t-Header-branding {
    display: none;
    visibility: hidden;
}

.t-Form-fieldContainer--floatingLabel {
  --ut-field-fl-label-offset: 0;
}

.c-flex-space {
    display: flex;
    justify-content: space-between;
}
.c-flex-end {
    display: flex;
    justify-content: flex-end;
}
.fa-arrow-left {
    color: white;
}
.fa-home {
    color: white;
}
.fa-shopping-cart {
    color: white;
}
.t-Alert--page {
    transition: none;
    transition-duration: none;
    transition-timing-function: none;
    transition-delay: none;
    transition-property: none;
    left: 0;
    right: 0;
    top: 0;
    padding: 0;
    background-color: transparent;
}

.t-Alert {
    border-style: none;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    box-shadow: none;
}

3. 하단 Sticky 버튼

Appearance - Template : Buttons Container

Appearance - Template Options : Stick to Bottom for Mobile

4. 다음 기능

참고