4. 제공 서비스 목록 Card Region
Identification - Title : Type-Service
Type : Cards
Source - Location : Local Database
SQL Query :
select '고객 맞춤형' card_title
, 'Best Customized' card_subtitle
, '요구사항 맞춤 / 반응형 / 모바일 웹' card_body
, '고객 요구사항에 맞추어 꼭 필요한 기능을 구현' card_secondary_body
, 'fa fa-calendar-arrow-down' card_icon
, 'Customized' card_badge
, 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnv4xxn5wibt/b/bucket-20210801-JKinCloud/o/20210801-005.png' card_image
from dual
union all
.....
select '클라우드환경' card_title
, 'Oracle Cloud' card_subtitle
, '장비 구입 NO! 클라우드로 언제/어디서든 접속' card_body
, 'sbody' card_secondary_body
, 'fa fa-cloud-wrench' card_icon
, 'Oracle Cloud' card_badge
, 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/cnv4xxn5wibt/b/bucket-20210801-JKinCloud/o/20210801-002.png' card_image
from dual
Appearance - Template Options : Use Template Defaults, Style A
Attributes - Appearance - Layout : Grid
Grid Columns : 4 Columns
Title - Advanced Formatting : Enabled
HTML Expression : <span style="font-family: 'Nanum Gothic Coding'; font-weight: 700; font-size: 20px; monospace;">&CARD_TITLE.</span>
Secondary Body - Advanced Formatting : Enabled
HTML Expression : <span style="font-family: 'Nanum Gothic'; monospace;">&CARD_BODY.</span>
Icon and Badge - Icon Source : Icon Class Column
Icon Column : CARD_ICON
Icon Position : Start
Badge Column : CARD_BADGE
Media - Source : URL Column
URL Column : CARD_IMAGE
Position : Body
Appearance : Auto
Sizing : Fit
Performance - Lazy Loading : Enabled
5. 추가 문구에 대한 폰트, 색상 적용
Identification - Title : FooterLine
Type : Static Content
Source - Text : <div style="font-family: 'Nanum Myeongjo'; font-weight: 800; font-size: calc(14px + 1.5vw); text-align: center; color: #EBE9E5;">신청서, 5분이면 작성 끝</div>
Appearance - Template : Standard
Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide
Identification - Title : FooterLine2
Type : Static Content
Source - Text : <div style="font-family: 'Nanum Gothic Coding'; font-weight: 400; font-size: calc(12px + 0.7vw); text-align: center; color: #F5E6CF;">IT 용어 사용하실 필요 없이<br><br>간결하게 필요 요청내역만 작성 해 주시면 됩니다</div>
Appearance - Template : Standard
Template Options : Use Template Defaults, Hidden, Text Content, Scroll - Hide
6. 신청서 작성, 예상비용 산정 Card Region
Identification - Title : Type-Request
Type : Cards
Source - Location : Local Database
SQL Query :
select '신청서 작성하기' card_title
, 'Best Customized' card_subtitle
, '요구사항에 대한 신청서를 작성하세요' card_body
, '고객 요구사항에 맞추어 꼭 필요한 기능을 구현' card_secondary_body
, 'fa fa-clipboard-new' card_icon
, '1' card_badge
, 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/../o/20210801-005.png' card_image
from dual
union all
select '예상비용 산정' card_title
, 'Data-Driven' card_subtitle
, '예상 화면 개수와 난이도 입력한 후 바로 확인 가능합니다' card_body
, '자신만의 데이터를 관리하며' card_secondary_body
, 'fa fa-dollar' card_icon
, '2' card_badge
, 'https://objectstorage.ap-seoul-1.oraclecloud.com/n/../o/20210801-004.png' card_image
from dual
Appearance - Template Options : Use Template Defaults, Style A
Attributes - Appearance - Layout : Grid
Grid Columns : 2 Columns
Card - CSS Classes : u-color-28-bg
Title - Advanced Formatting : Enabled
HTML Expression : <span style="font-family: 'Nanum Gothic Coding'; font-weight: 700; font-size: 20px; monospace;">&CARD_TITLE.</span>
Secondary Body - Advanced Formatting : Enabled
HTML Expression : <span style="font-family: 'Nanum Gothic'; monospace;">&CARD_BODY.</span>
Icon and Badge - Icon Source : Icon Class Column
Icon Column : CARD_ICON
Icon Position : End
Performance - Lazy Loading : Enabled
Action 버튼 추가
Identification - Type : Button
Label : GO
Link - Type : Redirect to URL
Target : javascript: setItems('&CARD_BADGE.');
Appearance - Display Type : Text
Hot : Enabled
Item 추가
Identification - Name : P1_TYPE
Type : Hidden
Setting - Value Protected : Disabled
Layout - Region : Type-Request
Advanced - Warn on Unsaved Changes : Ignore
Source - Maintain Session State : Per Request (Memory Only)
Dynamic Action - P1_TYPE
When - Event : Change
Selection Type : Item
Item : P1_TYPE
Action : Submit Page
Page 속성
Javascript - Function and Global Variable Declaration
function setItems(pType)
{
apex.item("P1_TYPE").setValue(pType);
}
Process
After
Submit - Branches - RedirectProcessIdentification - Name : RedirectProcess
Execution Options - Point : After Submit
Behavior - Type : Function Returning a URL (Redirect)
Language - PL/SQL - PL/SQL Function Body
begin
case
when :P1_TYPE = '1' then return apex_page.get_url(p_page => 1);
when :P1_TYPE = '2' then return apex_page.get_url(p_page => 1);
end case;
end;
참고
https://web-js.co.kr/font_kr.html
https://fonts.google.com/?subset=korean
