Oracle APEX Korea: 3월 2023

20230329 - IG 하이라이트 Highlight 툴바에서 제외하기

IG > Attribute

Initialization JavaScript Function

function(config) {
    config.reportSettingsArea = false; //툴바 위치에서 제외
    return config;
}

    //툴바 위치에서 제외
    config.reportSettingsArea = false;
    
    //작업 메뉴에서 제외
    apex.util.getNestedObject(config, "views.grid.features").highlight = false;

20230324 - 커스텀 리스트 템플릿 만들기

이미 예약된 항목명과 항목 순서가 정해져서 사용되는 것에 주의.

Shared Components > Lists 에서 Dynamic으로 리스트 생성

select null  c1_level,
       'C2'  c2_name_for_label, --#TEXT#
       'C3'  c3_target_url,     --#LINK#
       'C4'  c4_is_current,
       'C5'  c5_icon_name,      --#IMAGE#
       'C6'  c6_icon_attrs,     --#IMAGE_ATTR#
       'C7'  c7_icon_alt_text,
       'C8'  c8,  --#A01#
       'C9'  c9,  --#A02#
       'C10' c10, --#A03#
       'C11' c11, --#A04#
       'C12' c12, --#A05#
       'C13' c13  --#A06#
  from dual

페이지에서 리스트 리전을 생성하고 이전에 생성한 리스트를 연결

Shared Components > Templates 에서 기존 템플릿을 복사하거나 신규로 생성

List Template Noncurrent 부분에 템플릿 HTML 생성

<tr><td><img src=/i/22.2.0/#IMAGE# border=0 #IMAGE_ATTR#></td><td><a href="#LINK#">#TEXT#</a></td></tr>
#A01#<br>
#A02#<br>
#A03#<br>
#A04#<br>
#A05#<br>
#A06#<br>

페이지의 리스트 리전에서 새로 만든 템플릿 연결

결과 확인

SAMPLE

select null      c1_level,
       ename     c2_name_for_label,
       apex_page.get_url(p_page   => 10,
                         p_items  => 'P10_EMPNO',
                         p_values => EMPNO) c3_target_url,
       null      c4_is_current,
       'fa-user' c5_icon_name,
       null      c6_icon_attrs,
       null      c7_icon_alt_text,
       sal       c8_user_attr1_badge_text
from emp
order by ename

참고

https://docs.oracle.com/en/database/oracle/apex/22.2/htmdb/creating-dynamic-lists.html#GUID-CC5C355C-E54E-474D-8F10-B1E7A1787C6E

20230320 - IG에서 폼페이지 연결 아이콘 작업

Identification

- Column Name : APEX$LINK

- Type : Link

Link

- Target : Page22

- Link Text : <span aria-label="Edit"><span class="fa fa-edit" aria-hidden="true" title="Edit"></span></span>

참고

20230310 - Validation 검증2

참고

https://hardlikesoftware.com/weblog/2022/04/25/interactive-grid-validation/

https://orclqa.com/question/how-to-validate-cell-value-in-interactive-grid-oracle-apex/

20230308 - IG 값(조건)에 따라서 다른 (하위) 리전 읽기전용 ReadOnly

완벽하지는 않지만 두 가지 설정을 조합하여 구현

1. DA에서 IG 수정 가능하게 하는 편집 버튼과 추가 버튼을 보이지 않게 처리

var model = this.data.model;

if(this.data != null) {
    if(this.data.selectedRecords[0] != null) {
        if (model.getValue(this.data.selectedRecords[0], "COMPLETED_YN") == "Y") {
            apex.region("SID_DTL_IG").call("getActions").hide("selection-add-row");
            $("#SID_DTL_IG_ig div[data-action=edit]")[0].style.display = "none";
        }
        else {
            apex.region("SID_DTL_IG").call("getActions").show("selection-add-row");
            apex.region("SID_DTL_IG").call("getActions").enable("selection-add-row");
            $("#SID_DTL_IG_ig div[data-action=edit]")[0].style.display = "block";
        }
    }
}

2) 그래도 IG 더블클릭하면 다시 수정모드로 들어가는데 이 때는 IG Allowed Row Operations Column으로 제어

     , (select decode(mst.completed_yn, 'Y', '', 'UD') from mst where mst.pid = dtl.pid) row_operation

참고

https://forums.oracle.com/ords/apexds/post/how-to-make-an-ig-region-read-only-depending-of-the-value-o-9589

20230308 - IG 값(조건)에 따라서 다른 (하위) 리전 보이기/감추기

var model = this.data.model;

if(this.data != null) {
    if(this.data.selectedRecords[0] != null) {
        if (model.getValue(this.data.selectedRecords[0], "COMPLETED_YN") == "Y") {
            $x_Hide("SID_DTL_IG");
            $x_Show("SID_DTL_IR");
        }
        else {
            $x_Hide("SID_DTL_IR");
            $x_Show("SID_DTL_IG");
        }
    }
}

20230308 - IG 다른 컬럼 조건에 따른 컬럼 읽기 전용 셋팅

우선 ROW_OPERATION 이라는 항목을 두어서 DB에서 읽어온 데이터는 'U'라는 값을 가져오도록 했고 새로 입력하게 되는 레코드는 아무런 값이 없는 상태로 아래 이미지 설정 Allowed Operations 값에 따르면 추가/수정/삭제 모두 가능해야하지만 그 아래 Allowed Row Operations Column 에 따라서 1) 수정만 가능하게 2)삭제만 가능하게 3)둘 다 모두 가능하게 만들수도 있는데 현재는 읽어온 데이터는 수정만 가능하게 하는 설정

U : Row can be updated

D : Row can be deleted

UD : Row can be updated or deleted

     , qty_a
     , qty_a_r
     , qty_a_d
     , qty_b
     , qty_b_r
     , qty_b_d
     , pid
     , 'U' row_operation

그렇게하여 수정을 가능하게 되어도 해당 레코드 항목 중에서도 상품명은 수정할 수 없도록 추가 설정

읽기 전용 Read Only를 설정할 때 Item을 선택하였음에도 (통상적으로 페이지 아이템) IG 내의 컬럼 이름을 입력하여 처리가 가능하고 Execute : For Each Row로 셋팅

Execute 설명은 아래 참고

Execute
Select when this read only condition is executed.

If you refer to Columns in your read only condition, you must specify For Each Row in order for the condition to be evaluated for each row of the Interactive Grid. Otherwise, set to Once to evaluate the condition only one time for the region.

Available options include
For Each Row : Evaluate the read only condition independently for each row.
Once : Evaluate the read only condition only once for the whole region.

참고

https://www.insum.ca/how-to-set-specific-cells-of-interactive-grids-to-read-only/

20230306 - 전자 계약서 및 동의서 작성 (클래식 리포트 템플릿 수정 포함)

좌측에 놓게될 리스트 구성은 클래식 리포트 - 미디어 리스트로 구성하였고 아이콘 있는 부분은 Activity Timeline 템플릿에서 user 부분을 참고하여 새로운 미디어 리스트 템플릿을 만들어서 적용하여 아이콘 대신 순번을 입력

커스텀 템플릿 만들기 - Media List - 20230303

이동 : Shared Components > Templates 에서 Media List 템플릿 복사 후 > Edit Report Template

아래 부분을

        <div class="t-MediaList-iconWrap">
            <span class="t-MediaList-icon u-color #ICON_COLOR_CLASS#"><span class="t-Icon #ICON_CLASS#"></span></span>
        </div>

이렇게 변경

        <div class="t-MediaList-iconWrap">
            <span class="t-MediaList-icon u-color #ICON_COLOR_CLASS#"><span class="t-Icon">#ID#</span></span>
        </div>

클래식 리포트 SQL

select 1 id
     , '계약자 정보'      list_title
     , 'Add Member Info' list_text
     , ' '               list_class
     , apex_util.prepare_url('f?p=&APP_ID.:171:&APP_SESSION.::NO:RP,171:P171_PID,P171_PID_P,P171_PID_N:1,0,2') link
     , '' link_attr
     , decode(:P171_PID, 1, 'u-color-2', 'u-color-16-bg')     icon_color_class
  from dual
union all
select 2 id
     , '계약서 미리보기'
     , 'Confirm and Preview'
     , ' '
     , apex_util.prepare_url('f?p=&APP_ID.:171:&APP_SESSION.::NO:RP,171:P171_PID,P171_PID_P,P171_PID_N:2,1,3') link
     , '' link_attr
     , decode(:P171_PID, 2, 'u-color-3', 'u-color-16-bg')     icon_color_class
  from dual
  ...
  ...
  

새로만든 템플릿으로 선택

P171_PID 페이지 아이디를 받아서 리스트 선택시 이동후 강조 색상이 변경됨 (리포트 SQL 참조)

우측에는 이전과 다음 버튼을 두어 좌측 리스트 선택과 동일하고 이동할 수 있도록 처리

P171_PID : 현재 페이지

P171_PID_P : 이전 페이지

P171_PID_N : 다음 페이지

이전과 다음 페이지는 현재 페이지를 받아서 계산한 후 기본 값으로 셋팅

select to_number(:P171_PID)-1 from dual

select to_number(:P171_PID)+1 from dual

상황에 따라 이전/다음 버튼을 보이고 감추기

이전버튼 : P171_PID가 1인 경우가 아니면 보이기

Server-side Condition - Type : Item != Value

Item : P171_PID

Value : 1

다음버튼 : P171_PID가 4, 5인 경우가 아니면 보이기

Server-side Condition - Type : Item is NOT in colon delimited list

Item : P171_PID

List : 4:5

계약서 미리보기에서 마크다운(Markdown) Clob 형태로 저장된 데이터 조회

Dynamic Content 리전

declare 
  l_clob x230303_markdown.md_clob%type;

  c_embedded_html_escape   constant APEX_MARKDOWN.t_embedded_html_mode := 'ESCAPE'; -- escapes HTML
  c_embedded_html_preserve constant APEX_MARKDOWN.t_embedded_html_mode := 'PRESERVE'; -- leaves HTML content as-is

begin
  select md_clob
    into l_clob
    from x230303_markdown where fid = (select max(fid) from x230303_markdown where md_type = 'C');
  
  return apex_markdown.to_html(p_markdown => l_clob
                             , p_embedded_html_mode => c_embedded_html_preserve
                             , p_softbreak => '<br />'
                             , p_extra_link_attributes=> apex_t_varchar2()
                             );
end;

스크롤을 가능하도록 높이 고정 + 스크롤 옵션 설정

계약서 마크다운 등록은 폼 페이지에 마크다운 항목을 지정한 후 마크다운 형식으로 입력 후 통상 폼처럼 저장

형식 샘플1

유학상담을 통하여 유학소속을 대행해 줄 것을 의뢰한 자(이하 ‘의뢰인’이라 합니다)와 유학소속을 대행해 주는 사업자(이하 ‘유학원’이라 합니다)가 앞면에 기재한 금액 등으로 유학수속대행계약을 체결한 경우에 당사자의 권리/의무에 관한 내용은 다음과 같습니다.

#### **제1조(유학원의 의무)**

①유학원은 의뢰인을 위해 다음 각 호의 업무를 제공/처리함에 있어서 의뢰인이 입학하고자 하는 지원학교에 예정된 일정에 입학할 수 있도록 선량한 관리자로서의 주의의무를 다하여야 합니다.

- 상담(수속과정, 학교선택, 교육과정, 관련비용, 현지생활 등에 관한 구체적인 정보 제공)
- 원서요청 및 원서작성
- 서류번역, 에세이 작성, 학업계획서 작성, 추천서 자료 및 일정 점검
- 외국어시험점수 통보(Test Score Report) 요청

형식 샘플2

수험생으로서 기본예절과 단체생활 규칙 준수, 타인 존중 및 배려 자세 견지
수험생 본분에 어긋난 행동(음주, 도박, 선동, 집단행동) 금지
<span style="color:red">휴대폰은 학원내에서 휴대 / 사용 금지</span> 
긴급 통화 필요시 담임교사 허락하에 학원 전화 또는 본인 핸드폰 지정된 장소에서 통화후 반납
학습 면학 분위기|수업 / 자습시간 수면 금지(쉬는 시간, 식사시간 수면 가능)
<span style="color:red">폭력(물리.언어적), 따돌림 등 일체의 행위 절대 불허</span>, <span style="color:blue">갈등이나 문제 발견시 즉시 학원측에 보고</span>

계약서 서명 부분은 두개의 체크박스와 두개 모두 체크가 되면 현재 시각표시와 함께 최종 동의 후 계약 진행 버튼을 중앙에 보이도록

체크박스의 항목 변경시에

1) 자바스크립트 코드 실행

if (apex.item("P171_CHECK1").getValue() == "Y" && apex.item("P171_CHECK2").getValue() == "Y") {
    $x_Show("SID_BTN_AGREE");
    $x_Show("SID_BTN_DT");
}
else {
    $x_Hide("SID_BTN_AGREE");
    $x_Hide("SID_BTN_DT");
}

SID_BTN_AGREE : 최종 동의 버튼 SID

SID_BTN_DT : 현시점 일시 보이도록 하는 버튼 SID

2) Action : Set Value

Set Type : PL/SQL

return to_char(current_date(), 'YYYY-MM-DD hh24:mi:ss');

Affected Elements - Selection Type : Item

Item : P171_DT

3) 자바스크립트 코드 실행

apex.item("SID_BTN_DT").setValue(apex.item("P171_DT").getValue());

최종동의 버튼 실행 후 마지막 결과 페이지로 이동

참고

https://apex.oracle.com/pls/apex/r/apex_pm/ut/media-list

https://apex.oracle.com/pls/apex/r/apex_pm/ut/timeline-reports

20230305 - 마크다운 Markdown

테이블생성, 마크다운 형태의 데이터는 Blob이 아닌 Clob으로 그리고 varchar2 4000이 넘을 수 있으니 Clob으로.

create table x230303_markdown (
    fid                            number generated by default on null as identity 
                                   constraint x230303_markdown_id_pk primary key,
    md_vc                          varchar2(4000 char),
    md_clob                        clob,
    md_blob                        blob
)
;

-- load data
 
-- Generated by Quick SQL Sunday March 05, 2023  10:07:00
 
/*
x230303_markdown
  fid /pk
  md_vc
  md_clob clob
  md_blob blob

# settings = { semantics: "CHAR", language: "EN", APEX: true }
*/

Dynamic Content

declare 
  l_clob x230303_markdown.md_clob%type;

  c_embedded_html_escape   constant APEX_MARKDOWN.t_embedded_html_mode := 'ESCAPE'; -- escapes HTML
  c_embedded_html_preserve constant APEX_MARKDOWN.t_embedded_html_mode := 'PRESERVE'; -- leaves HTML content as-is

begin
  select md_clob
    into l_clob
    from x230303_markdown where fid = (select max(fid) from x230303_markdown);
  
  return apex_markdown.to_html(p_markdown => l_clob
                             , p_embedded_html_mode => c_embedded_html_escape
                             , p_softbreak => '<br />'
                             , p_extra_link_attributes=> apex_t_varchar2()
                             );
end;

APEX_MARKDOWN.TO_HTML

참고

https://inasie.github.io/it%EC%9D%BC%EB%B0%98/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%ED%91%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0/

https://blogs.oracle.com/apex/post/native-markdown-support-in-apex-211

https://blogs.oracle.com/apex/post/whats-new-for-report-regions-apex-212

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

https://apexapplab.dev/2021/04/27/apex-markdown-the-story-continues/

https://theorydb.github.io/envops/2019/05/22/envops-blog-how-to-use-md/#markdown-%EB%AC%B8%EB%B2%951%EB%B0%98%EB%93%9C%EC%8B%9C-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%98%EB%8A%94

20230305 - 파일 업로드 to 테이블 BLOB 컬럼

테이블 생성, Quick SQL에서 file 타입으로 입력하면 자동으로 blob, _filename, _mimetype, _charset, _lastupd 컬럼이 생성됨

create table x230303_file (
    fid                            number generated by default on null as identity 
                                   constraint x230303_file_fid_pk primary key,
    upload                         blob,
    upload_filename                varchar2(512 char),
    upload_mimetype                varchar2(512 char),
    upload_charset                 varchar2(512 char),
    upload_lastupd                 date
)
;

-- load data
 
-- Generated by Quick SQL Friday March 03, 2023  14:51:02
 
/*
x230303_file
  fid /pk
  upload file

# settings = { semantics: "CHAR", language: "EN", APEX: true }
*/

폼 페이지, 폼 리전 생성

P172_UPLOAD 항목 설정

Identification - Type : File Browse...

Setting - Display As : Block Dropzone

Storage Type : BLOB column specified in Item Source attribute

MIME Type Column : UPLOAD_MIMETYPE

Filename Column : UPLOAD_FILENAME

Character Set Column : UPLOAD_CHARSET

BLOB Last Updated Column : UPLOAD_LASTUPD

P172_UPLOAD Submit 될 때 체크할 Validation

Identification - Name : P172_UPLOAD_VAL

Validation - Type : Item is NOT NULL

Item : P172_UPLOAD

Error - Error Message : 업로드할 파일을 선택하십시오.

Display Location : Inline with Field and in Notification

Associated Item : P172_UPLOAD

Server-side Condition - When Button Pressed : CREATE

Type : Item is NULL

Item : P172_FID

파일 업로드 프로세싱과 Close Dialog

참고

Gallery - Sample File Upload and Download

https://forums.oracle.com/ords/apexds/post/how-to-upload-a-clob-into-a-table-9792

https://doyensys.com/blogs/25447-2/

https://arrayofpointers.wordpress.com/2015/01/11/upload-and-view-a-file-imagepdfdoc-in-a-list-of-oracle-apex-page/

http://jsfiddle.net/dirtyd77/LzLcZ/144/

Add an unconditional page rendering page process
Choose "Data Manipulation" and click "Next"
Select the default, "Automated Row Fetch", then click "Next"
Give the process a name, "Fetch Row from EBA_DEMO_FILES" (for example), change the processing point to "On load - After Header" and click "Next"
Enter the table name of the application's "files" table, the APEX page item id of the page item that references the file being uploaded, and the column name of the blob column in the afore assigned application "files" table and click "Next"
Optionally add a success and/or error message, click "Create Process"
Create an "HTML" region (for holding your file upload form element)
Create a hidden page item that will hold the primary key id value of the row that holds the file (e.g, P12_ID)*
Now create a "File Browse" page item in the same region as the above page items, ensure the "Storage Type" value is set to "BLOB column specified in Item Source attribute"
Define the application tables' column names for holding, MIME Type, Filename, Character Set, and BLOB Last Updated, and then click, "Next"
Then click, "Create Item"*
Create the other hidden page items that will store the filename, mimetype, and character set meta data*
If your application's files table has a description (or comments) column, add a textarea page item for capturing this information*
Now create an unconditional page processing process
Choose "Data Manipulation" and click "Next"
Give the process a name, "Process Row from EBA_DEMO_FILES" (for example), change the processing point to "On Submit - After Computations and Validations" and click "Next"
Enter the table name of the application's "files" table, the APEX page item id of the page item that references the file being uploaded, and the column name of the blob column in the application's "files" table and then click "Create Item"
Create the Cancel, Delete, Apply Changes, and Create buttons (see implementation of buttons on this page)
Now create a conditional page processing process
Choose "Session State" and click "Next"
Select "Clear Cache for all Items on Pages (PageID,PageID,PageID)" and click "Next"
Give it a name of "reset page", leave the other defaulted values, click "Next"
Enter the current page id and then click "Next"
Optionally add Success and/or Error Messages and then click "Next"
Change the "When Button Pressed" condition to use the "Delete" button, leave all other options set to their default values and click "Create Process"

* Be sure to set the identified page item's "Source Type" as "Database Column" and assign their "Source value or expression" as the corresponding column name in the application's "files" table.

Oracle APEX Korea