좌측에 놓게될 리스트 구성은 클래식 리포트 - 미디어 리스트로 구성하였고 아이콘 있는 부분은 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
1. 수험생으로서 기본예절과 단체생활 규칙 준수, 타인 존중 및 배려 자세 견지
1. 수험생 본분에 어긋난 행동(음주, 도박, 선동, 집단행동) 금지
1. <span style="color:red">휴대폰은 학원내에서 휴대 / 사용 금지</span>
1. 긴급 통화 필요시 담임교사 허락하에 학원 전화 또는 본인 핸드폰 지정된 장소에서 통화후 반납
1. 학습 면학 분위기|수업 / 자습시간 수면 금지(쉬는 시간, 식사시간 수면 가능)
1. <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
댓글 없음:
댓글 쓰기