Oracle APEX Korea

20211031 - 페이지 아이템 비활성화 Page Item Disable

// 일반 Item
$('#P5_POSTOCK').addClass('apex_disabled').attr('tabindex','-1');
$('#P5_DELIVERY').addClass('apex_disabled').attr('tabindex','-1');
$('#P5_RSTOCK').addClass('apex_disabled').attr('tabindex','-1');

// disable:
$('#P123_ITEM_CNT').attr('readonly', true);
$('#P123_ITEM_CNT').css('pointer-events','none');
$('#P123_ITEM_CNT').css('opacity','.5');
$('#P123_ITEM_CNT').off('keydown');

// enable:
$('#P123_ITEM_CNT').attr('readonly', false);
$('#P123_ITEM_CNT').css('pointer-events','');
$('#P123_ITEM_CNT').css('opacity','inherit');
$("#P123_ITEM_CNT").on('keydown');

참고.

https://tedstruik-oracle.nl/ords/f?p=25384:1025::::::

https://dickdral.blogspot.com/2016/11/disabling-apex-items-right-way.html

20211018 - 타임존에 대해서 Timezone

APEX Cloud Service는 자율주행 데이터베이스 안에서 작동하므로 시스템 시간을 읽어오는 sysdate나 timezone 셋팅을 변경할 수 없어서 local에 맞는 시간을 보여주기 위해서는 session timezone이나 current_date를 사용해야 함.

1. 자동 세션 타임존 설정

Shared Component - Globalization - Automatic TimeZone : YES

2. 테스트 테이블 생성 및 sysdate 추가

drop table xtempx;

create table xtempx (
    id                             number generated by default on null as identity 
                                   constraint xtempx_id_pk primary key,
    dt                             timestamp,
    ltz                            timestamp with local time zone
)
;

insert into xtempx (dt, ltz) values (sysdate, sysdate);

select dt, ltz from xtempx

SQL Workshop 에서 실행을 했고 해당하는 세션 타임존 설정을 못 찾음. 모두 UTC

3. 테이블을 조회하면 컬럼 속성에 따라 dt 는 UTC 그래도 ltz 는 로컬 시간으로 변경되어서 조회됨

4. 두 컬럼을 동일하게 10시 30분으로 변경한 후 시스템에서 조회하면 dt 는 입력 값 그대로 저장되고, ltz는 변환되어 저장이 됨.

결론 : 자율주행 데이터베이스에서 작동하는 APEX는 timestamp with local time zone 을 사용 필요. (아직 사용하지 말아야하는 이유는 없음)

참고

https://apex.oracle.com/pls/apex/germancommunities/apexcommunity/tipp/6381/index-en.html

https://joelkallman.blogspot.com/2020/03/how-to-show-dates-in-given-time-zone.html

20211016 - 대체 문자열 Substitution Strings

1. 템플릿 안에서 대체 문자열 Substitution Strings within Templates

#ABC#

2. 페이지, 아이템 대체 문자열 Substitution Strings for Page or Application Items

- 대문자로 써야하고, 기호 &로 시작, 마칠 때는 . 마침표

Reference the page or application item in all capital letters.
Precede the item name with an ampersand (&).
Append a period (.) to the item name.

&F101_X.

3. IG, 카드, 맵 컬럼의 대체 문자열 Substitution Strings for Interactive Grid, Cards, and Map Columns

- 위 2번과 동일한 조건

&ENAME.

4. 다른 리포트 컬럼 Substitution Strings for Other Report Columns

- 대문자로 써야하고, 시작과 끝은 모두 #으로

Reference the column name in all capital letters.
Precede the column name with a pound sign (#).
Append a pound sign (#) to the item name.

#ENAME#

5. 특수문자나 대/소문자 구별이 필요한 경우

- 쌍따옴표 " 로 표현 : &"<name>"[!<format>].

&"ITEM-OR-COLUMN-NAME".

"<name>" is an application item or page item or column name. If not quoted, then it must be in set A-Z–0-9_$#
"<name>" is APP_TEXT$<message-name>
Where <message-name> is an Application Express text message name.

6. HTML Escape 대체 문자열 Controlling Output Escaping in Substitution Strings

- HTML escapes reserved HTML characters, for example:

Item: &P1_DEPTNO!HTML.
Interactive grid column: &ENAME!HTML.
Columns in other reports: #ENAME!HTML#

- ATTR escapes reserved characters in a HTML attribute context

Interactive grid column: &ENAME!ATTR.
Columns in other reports: #ENAME!ATTR#

JS escapes reserved characters in a JavaScript context

Item: &P1_DEPTNO!JS.
Interactive grid column: &ENAME!JS.
Columns in other reports: #ENAME!JS#

RAW preserves the original item value and does not escape characters

Item: &P1_DEPTNO!RAW.
Interactive grid column: &ENAME!RAW.
Columns in other reports: #ENAME!RAW#

STRIPHTML removes HTML tags from the output and escapes reserved HTML characters, for example:

Item: &P1_DEPTNO!STRIPHTML.
Interactive grid column: &ENAME!STRIPHTML.
Columns in other reports: #ENAME!STRIPHTML#

참고

https://docs.oracle.com/en/database/oracle/application-express/21.1/htmdb/using-substitution-strings.html#GUID-CA3ABA44-D03D-4396-A527-B160F1FFE933

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");

20210926 - this.triggeringElement

- Item Name : this.triggeringElement.id

- Item Value : $v(this.triggeringElement)

20210926 - 로그인 페이지 아이콘 대신 이미지로 변경

1. 이미지를 Static Application Files 에 업로드

2. 로그인 페이지 CSS 설정

Page - CSS - Inline :

.t-Login-logo {
    background-image: url('#APP_IMAGES#20210926-LogIn-FBF9F8.bmp'); 
    background-repeat: no-repeat; 
    background-size: cover;
    width: 240px;
    height: 70px;
    background-position: center center;
}
.t-Login-title {
    font-family: 'Hahmlet', serif;
    font-weight: 500;
    font-size: 28px;
}

3. 추가 : 백그라운드 변경 (redwood light 중)

Page - CSS - Inline :

.t-Body-main {
 background-image: url('https://static.oracle.com/cdn/apex/21.1.0/themes/theme_42/1.6/images/rw/textures/texture-11.png')
}

또는

body{
 background-image: url('https://static.oracle.com/cdn/apex/21.1.0/themes/theme_42/1.6/images/rw/textures/texture-11.png');
}

참고

https://www.traust.com/oracle-apex-simple-login-page-theming/

https://www.javainhand.com/2020/07/attractive-login-page-with-social-icons-in-oracle-apex.html

http://dgielis.blogspot.com/2015/09/custom-image-on-your-apex-app-login-page.html

https://apex.oracle.com/pls/apex/gamma_dev/r/demo/redwood

20210923 - Interactive Grid 선택한 열 Row 에 대한 특정 값 찾기

1. 디테일 그리드 등록 버튼 클릭시 마스터의 KEY 값을 읽어 팝업 창으로 전달

    config.initActions = function(actions){
        actions.add({
            name: "DA_PODTL_ClickAdd",
            action: function() {
                var ig$             = apex.region("myStaticIGPO").widget();
                var grid            = ig$.interactiveGrid("getViews","grid");
                var model           = grid.model;
                var selectedRecords = grid.view$.grid("getSelectedRecords");
                var record1         = selectedRecords[0];

                if( typeof record1 === 'undefined' || record1 === null){
                    apex.message.clearErrors();
                    apex.message.showErrors([{
                            type: "error",
                            location: ["page"],
                            message: "발주내역을 먼저 등록/선택 해 주십시오.",
                            unsafe: false
                        }
                    ]);    
                    return false;
                }

                var vPOID = model.getValue(record1,"PO_ID");

                if( typeof vPOID === 'undefined' || vPOID === null || vPOID == ""){
                    apex.message.clearErrors();
                    apex.message.showErrors([{
                            type: "error",
                            location: ["page"],
                            message: "발주내역을 먼저 등록/선택 해 주십시오.",
                            unsafe: false
                        }
                    ]);    
                    return false;
                }

                var l_url = 'f?p=#APP_ID#:5:#SESSION#::NO:RP,5:P5_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#', vPOID);

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