Oracle APEX Korea

20210829 - Interactive Grid 행 추가 버튼, 편집, 저장 버튼 위치 변경 및 탭 그룹화

1. 탭 그룹화

Static Content 리전을 만들고

Appearance - Template : Tabs Container로 설정

그리고 각 탭에 위치할 Sub 하위 리전들을 생성

2. 편집, 저장, 행 추가 기본 위치 좌측인데 우측으로 변경

Attributes - Advanced - JavaScript Initialization Code

function(config) {
    let $                = apex.jQuery,
        toolbarData      = $.apex.interactiveGrid.copyDefaultToolbar();
        addrowAction     = toolbarData.toolbarRemove("selection-add-row");
        saveAction       = toolbarData.toolbarRemove("save");
        editAction       = toolbarData.toolbarRemove("edit");
        actionsMenuGroup = toolbarData.toolbarFind("actions4");

    actionsMenuGroup.controls.push({
        type  : "BUTTON",
        action: "edit",
        label : "편집"
        });

    actionsMenuGroup.controls.push({
        type  : "BUTTON",
        action: "save",
        label : "저장",
        icon  : "icon-ig-save-as",
        iconBeforeLabel: true,
        hot   : true
        });

    actionsMenuGroup.controls.push({
        type  : "BUTTON",
        action: "selection-add-row",
        label : "행 추가",
        icon  : "icon-ig-add-row",
        iconBeforeLabel: true,
        hot   : true
        });

    config.toolbarData = toolbarData;
    return config;
}

참고

https://tm-apex.blogspot.com/2021/03/customize-your-toolbar-interactive-grid.html

https://www.stinolez.com/2018/10/25/interactive-grids-more-customization/

20210829 - Interactive Grid 행 추가 버튼 제어

1. IG 리전

Attributes - Advanced - JavaScript Initialization Code

function(config) { 
config.initActions = function( actions ) {
  actions.remove('selection-add-row');
  actions.add({
    name: "selection-add-row",
    label: "행 추가",
    iconBeforeLabel: "true",
    action: function(event, focusElement) {
      var vVal = apex.item("P4_PO_ID").getValue();
      if(vVal == "")
      {
        apex.message.alert("발주 내역을 먼저 등록/선택 후 상품을 등록하십시오.");
        return config;
      }

      let model = $(actions.context).interactiveGrid('getCurrentView').model;
      var vNewR = model.getRecord(model.insertNewRecord());

      model.setValue(vNewR,"PO_ID", vVal);
    }
  });
}
return config;
}

20210828 - 폼 버튼 제어 (등록시, 수정시 각 조건에 따른 보이기/감추기)

1. 신규 생성 폼 - 취소는 항상 보이기(조건없음), 등록 버튼만 보임

Create 등록 버튼

Button - Server-side Condition - Type : Item is NULL

Item : P5_PO_ID (key로 설정되어 있고, hidden 상태)

2. 수정 폼 - 저장과 삭제 버튼 보임

Button - Server-side Condition - Type : Item is NOT NULL

Item : P5_PO_ID (key로 설정되어 있고, hidden 상태)

20210827 - 상품 마스터 - 상품 입출고 디테일 Interactive Grid Master-Detail

1. 페이지 생성, Master Detail, Stacked 선택 후 테이블과 키값 입력 :

한 페이지에 Master Detail 표현

2. 마스터 SQL : 상품과 입/출고, 재고 수량

select a.prod_id
     , a.prod_nm
     , a.prod_color
     , nvl(b.sum1_qty,0) sum1_qty
     , nvl(b.sum2_qty,0) sum2_qty
     , nvl(b.sum_qty,0)  sum_qty
  from x0822_prod_mst a
     , (
         select prod_id
              , sum(decode(stock_type, '1', qty, 0)) sum1_qty
              , sum(decode(stock_type, '2', qty, 0)) sum2_qty
              , sum(decode(stock_type, '1', qty, '2', -qty, 0)) sum_qty
           from x0822_prod_stock
          group by prod_id
       ) b
 where a.prod_id = b.prod_id(+)

3. 마스터 리전 : 상품 마스터

PK PROD_ID hidden

입고, 출고, 재고는 Display Only, Source - Query Only : Enabled

저장 업데이트 시 For Update 오류 때문에 Process - Identification - Lock Row : No

4. 디테일 리전 : 상품 입출고

1) 조건 없이 Query만 등록

select STOCK_ID,
       STOCK_DATE,
       STOCK_TYPE,
       PROD_ID,
       QTY
  from X0822_PROD_STOCK

2) Master Detail - Master Region : 상품 마스터

3) 좌측 항목에서 FK PROD_ID 선택, 우측 속성에서

Master Detail - Master Column : PROD_ID (마스터 리전 것 선택)

5. 디자인 조정 : 마스터 리전의 입고, 출고, 재고 항목들은 동일 배분 사이즈가 아닌

픽셀 70으로 고정해서 작게하면 상품명과, 상품 색상은 자연스럽게 길어짐

6. 최종 화면

20210824 - 전화번호 포맷

1. JS 파일 업로드 (파일 다운로드는 하단 링크 참조)

Shared Components - Static Workspace Files

select rowid
     , user_mobile
     , replace(to_CHAR(user_mobile,'000,9999,9999'),',','-') user_mobile_vw
     , user_nm
     , role
  from x0822_users

var gridID = "myStaticIG";

var ig$ = apex.region(gridID).widget();

var grid = ig$.interactiveGrid("getViews","grid");

var model = ig$.interactiveGrid("getViews","grid").model;

var selectedRecords = grid.getSelectedRecords();

for (idx = 0; idx < selectedRecords.length; idx++) {

record = model.getRecord(selectedRecords[idx][0]);

model.setValue(record, 'USER_MOBILE', this.triggeringElement.value);

}

/* reference

//insert new record on a model

var myNewRecordId = model.insertNewRecord();

console.log(record);

console.log(model.getValue(record,"USER_NAME"));

참고 :

https://css-tricks.com/input-masking/

https://github.com/RobinHerbots/Inputmask

20210824 - 임의 랜덤 데이터 생성 준비 : 이름 및 전화번호

1. DB Function 함수 생성

CREATE OR REPLACE FUNCTION GET_KORNM 
    ( V_FROM IN VARCHAR2,
      V_TO   IN VARCHAR2 )
RETURN VARCHAR2 
IS
    OUT_REAL_NM VARCHAR2(100);
    TYPE V_ARR IS TABLE OF VARCHAR2(10);
    V_FIRST V_ARR;
    V_LAST V_ARR;
    V_MID V_ARR;
BEGIN 
    V_LAST := V_ARR('김' , '이' , '박' , '최' , '정'
                  , '강' , '조' , '윤' , '장' , '임' 
                  , '오' , '한' , '신' , '서' , '권' 
                  , '황' , '안' , '송' , '유' , '홍' 
                  , '전' , '고' , '문' , '손' , '양' 
                  , '배' , '조' , '백' , '허' , '남');
                  
    V_MID := V_ARR('민' , '현' , '동' , '인' , '지'
                 , '현' , '재' , '우' , '건' , '준' 
                 , '승' , '영' , '성' , '진' , '준' 
                 , '정' , '수' , '광' , '영' , '호' 
                 , '중' , '훈' , '후' , '우' , '상' 
                 , '연' , '철' , '아' , '윤' , '은');
                 
    V_FIRST := V_ARR('유' , '자' , '도' , '성' , '상' 
                   , '남' , '식' , '일' , '철' , '병' 
                   , '혜' , '영' , '미' , '환' , '식' 
                   , '숙' , '자' , '희' , '순' , '진' 
                   , '서' , '빈' , '정' , '지' , '하' 
                   , '연' , '성' , '공' , '안' , '원'); 
                   
SELECT SUBSTR(V_LAST(ROUND(DBMS_RANDOM.VALUE(1 , 30), 0)) ||
              V_MID(ROUND(DBMS_RANDOM.VALUE(1 , 30), 0)) ||
              V_FIRST(ROUND(DBMS_RANDOM.VALUE(1 , 30), 0)) ||
              V_MID(ROUND(DBMS_RANDOM.VALUE(1 , 30), 0)) ||
              V_FIRST(ROUND(DBMS_RANDOM.VALUE(1 , 30), 0)) 
             , V_FROM, V_TO)
     INTO OUT_REAL_NM 
    FROM DUAL; 
    
    RETURN OUT_REAL_NM; 
    
END;

출처: https://cyh0214.tistory.com/entry/무작위-한글이름-만들기 [맑은안개이야기]

입력 변수를 통해 1글자, 2, 3, 4, 5자 성명 글자 생성

select GET_KORNM('1','3') from dual

전화번호는 너무 진짜같지 않게 중간에 0000 으로 생성

select trim('0100000'||trunc(DBMS_RANDOM.value(0,9)*1000)) from dual

20210824 - 프로토타입 페이지 작성 - 메인홈 카드 리전 Lottie Animation

1. 카드 리전 추가 후 SQL 작성 (Lottie File 위치 추가)

select '발주, 배송관리 시스템' card_title
     , '' card_subtitle
     , '주문 등록, 배송 관리, C/S업무' card_body
     , '' card_secondary_body
     , 'fa fa-package' card_icon
     , '81' card_badge
     , 'https://assets10.lottiefiles.com/private_files/lf30_ow8fqzzg.json' card_image
  from dual

2. Lottie Animation 사용 설정

Page 설정에서

Javascript - File URLs : https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js

CSS - Inline :

lottie-player {

margin: 0 auto;

}

Card Region - Attributes - Appearance - Layout : Grid

Grid Columns : 4 Columns

Title - Column : CARD_TITLE

Subtitle - HTML Expression :

<lottie-player src="&CARD_IMAGE." background="transparent" speed="1" style="width: 200px; height: 200px;" loop autoplay></lottie-player>

Body - Column : CARD_BODY

Icon and Badge - Icon Source : Icon Class Column

Icon Column : CARD_ICON

Badge Column : CARD_BADGE