Oracle APEX Korea: 12월 2021

20211228 - 버튼 컨테이너 리전에서의 버튼 위치들, 페이지 가운데 정렬 포함

1. 모바일 화면에서 활용하게될 버튼의 중앙 정렬을 위해 CSS를 찾아보았지만 역시 테마와 디자이너에서 지원하므로 Change 위치에 버튼을 놓으면 됨

참고

https://apex.oracle.com/pls/apex/apex_pm/r/ut/button-container

20211219 - 링크 파일 다운로드

1. 파일 업로드

Shared Components - Static Application Files

2. 버튼 생성 및 설정

Button - Behavior - Action : Redirect to URL

Target : #APP_IMAGES#오늘의집_옵션코드_업로드샘플.xlsx

참고

20211219 - Dynamic Action 버튼 보이기/감추기

if (vTMD.v === "CD") 
{
  $('#btnOpenDialogTLT').show();
  $('#btnOpenDialogSAMPLE').show();
}
else
{
  $('#btnOpenDialogTLT').hide();
  $('#btnOpenDialogSAMPLE').hide();
}

참고

20211219 - 캘린더 일정 관리, 완료 일정 취소선 Strike 처리

1. Page - CSS - Inline

.apex-cal-default-strike div { background-color: #2578CF; border-color: #2578CF; color: #FFFFFF; text-decoration-line: line-through; }
.apex-cal-black-strike div { background-color: #303030; border-color: #303030; color: #FFFFFF; text-decoration-line: line-through; }
.apex-cal-blue-strike div { background-color: #4183D7; border-color: #4183D7; color: #FFFFFF; text-decoration-line: line-through; }
.apex-cal-bluesky-strike div { background-color: #6BB9F0; border-color: #6BB9F0; color: #404040; text-decoration-line: line-through; }
.apex-cal-brown-strike div { background-color: #D88935; border-color: #D88935; color: #404040; text-decoration-line: line-through; }
.apex-cal-cyan-strike div { background-color: #1ABC9C; border-color: #1ABC9C; color: #404040; text-decoration-line: line-through; }
.apex-cal-darkblue-strike div { background-color: #1F5F97; border-color: #1F5F97; color: #FFFFFF; text-decoration-line: line-through; }
.apex-cal-gray-strike div { background-color: #A0A0A0; border-color: #A0A0A0; color: #404040; text-decoration-line: line-through; }
.apex-cal-green-strike div { background-color: #2ECC71; border-color: #2ECC71; color: #404040;text-decoration-line: line-through; }
.apex-cal-lime-strike div { background-color: #28A346; border-color: #28A346; color: #FFFFFF; text-decoration-line: line-through; }
.apex-cal-orange-strike div { background-color: #F39C12; border-color: #F39C12; color: #404040; text-decoration-line: line-through; }
.apex-cal-red-strike div { background-color: #D91E18; border-color: #D91E18; color: #FFFFFF; text-decoration-line: line-through; }
.apex-cal-silver-strike div { background-color: #BDC3C7; border-color: #BDC3C7; color: #404040; text-decoration-line: line-through; }
.apex-cal-white-strike div { background-color: #F0F0F0; border-color: #F0F0F0; color: #404040; text-decoration-line: line-through; }
.apex-cal-yellow-strike div { background-color: #F1C40F; border-color: #F1C40F; color: #404040; text-decoration-line: line-through; }

2. Calendar 리전 - SQL Query

select a.cal_id
     , decode(nvl(a.complete_yn, 'N'), 'Y', nvl(b.css_cal,'')||'-strike', nvl(b.css_cal,'')) as css
     , a.sdt
     , a.edt
     , nvl(b.cal_type_nm||': ','') ||a.mst as mst
     , a.dtl
  from info_calendar     a
     , info_calendar_css b
 where a.css_id = b.css_id(+)

3. 구현된 화면

참고

20211209 - IG LOV 기본 값 셋팅하기 - 행 추가 후 기본 값

1. IG 컬럼 >> Advanced

JavaScript Initialization Code :

function( config ) {
    config.defaultGridColumnOptions = {
        defaultValue: function () {
            return {d:"관리자", v: "21"};
        }
    }
    return config;
}

이렇게 하지 않고 보통 다른 컬럼들 하는 것처럼 default 값을 셋팅하게 되면 value 는 셋팅이 되지만 Display 값은 셋팅되지 않아서 위와 같이 json 형식으로 셋팅하면 됨

참고

https://hardlikesoftware.com/weblog/2017/03/31/how-to-hack-apex-interactive-grid-part-4/

https://www.jmjcloud.com/blog/workaround-for-issue-setting-a-default-value-for-the-apex-192-popup-lov

https://community.oracle.com/tech/developers/discussion/4335748/how-to-set-default-value-for-popup-lov

https://docs.oracle.com/en/database/oracle/application-express/21.2/aexjs/model.html#.FieldMeta

    config.initActions = function(actions) {
        var addRow = actions.lookup("selection-add-row");
        var originalAction = addRow.action;
        addRow.action = function(event,el) {
            // do your own stuff before original action if needed
            originalAction(event,el);
            // do your own stuff after original action if needed. This is what page 17 does:
            // after the grid has had a chance to change the selection
            setTimeout(function() {
                apex.item("P17_ENAME").setFocus();
            }, 100);
            return true; // because focus was set
        }
    }

function( config ) {
    config.defaultGridColumnOptions = {
        defaultValue: function( model, record ) {
            return ...;
        }
    }
    return config;
}

var val,
    model = this.data.model,
    rec = this.data.record,
    meta = model.getRecordMetadata(this.data.recordId);

if ( meta.inserted ) {
    val = model.getValue(rec, "JOB")
    if ( val.v === val.d ) {
        model.setValue(rec,"JOB", {d:apex.item("C_JOB").displayValueFor("CLERK"), v: "CLERK"});
    }
    val = model.getValue(rec, "ONLEAVE"); 
    if ( val.v === val.d ) {
        model.setValue(rec,"ONLEAVE", {d:apex.item("C_ONLEAVE").displayValueFor("N"), v:"N"});
    }
}

function(config) {
    config.defaultGridColumnOptions = {
        defaultValue: function( model, srcRecord ) {
            let m,
                name = "";

            if ( srcRecord ) {
                name = model.getValue( srcRecord, "ENAME" ),
                m = /(.*)(\d+)$/.exec( name );

                if ( m ) {
                    name = m[1] + ( parseInt( m[2], 10 ) + 1 );
                } else {
                    name += "_1";
                }
            }
            return name;
        }
    }
    return config;
}

20211204 - Interactive Grid 더블 클릭해서 새로운 윈도우 창 열기

1. Dynamic Action

Name : DoubleClick_POMSTIG

When - Event : Double Click

Selection Type : Region

var ig$             = apex.region("myStaticIGPOMST").widget();
var grid            = ig$.interactiveGrid("getViews","grid");
var model           = grid.model;
var selectedRecords = grid.view$.grid("getSelectedRecords");
var record1         = selectedRecords[0];

var l_url = 'f?p=#APP_ID#:9:#SESSION#::NO:RP,9:P9_PO_ID:#POID#';

l_url = l_url.replace('#APP_ID#',  $v('pFlowId'));
l_url = l_url.replace('#SESSION#', $v('pInstance'));
l_url = l_url.replace('#POID#',    model.getValue(record1, "PO_ID"));

// execute PL/SQL API apex_uti.prepare_url to generate a valid Session State Protection checksum
apex.server.process(
    'BTN-popup',
    {x01: l_url},
    {success: function (pData) {
            apex.navigation.openInNewWindow(pData);
        },
        dataType: "text"
    }
);

2. Ajax Callback

Name : BTN-popup

Type : Execute Code

Source - Location : Local Database

Language : PL/SQL

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;

참고

https://docs.oracle.com/en/database/oracle/application-express/21.2/aexjs/apex.navigation.html#.openInNewWindow

Oracle APEX Korea