클래식 리포트의 뱃지 탬플릿을 사용하여 화면을 구성
1. 클래식 리포트 디자인
Identification - Title : 대기순번
Type : Classic Report
Source - Location - Local Database
Type : SQL Query
SQL Query :
select to_number(to_char(sysdate, 'mi'))+24 "*나의 대기 순번*"
, to_number(to_char(sysdate, 'mi'))+17 "(현재 진료중)"
from dual
Attributes
Appearance - Template Type : Theme
Template : Badge List
Template Options : Use Template Defaults, Apply Theme Colors, 64px, Grid, 2 Column Grid, Hide when all rows displayed
2. 원하는 테마 색상으로 변경
적용했던 Theme 색상을 해제하고 원하는 테마 색상을 선택 후 DA 작성
적절한 이벤트를 찾기 못하여 Page Load 이벤트에 작성함
색상 class 확인 : https://apex.oracle.com/pls/apex/apex_pm/r/ut/color-and-status-modifiers
Page Load Event
Action
Identification - Action : Execute JavaScript Code
Setting - Code :
$(".t-BadgeList-label").each(function()
{
if ($(this).text() == "나의 대기 순번"){
$(this).parent().attr('class', 't-BadgeList-wrap u-color-22');
}
else {
$(this).parent().attr('class', 't-BadgeList-wrap u-color-20');
}
});
* 뱃지 템플릿 HTML
<li class="t-BadgeList-item">
<span class="t-BadgeList-wrap u-color">
<span class="t-BadgeList-label">나의 대기 순번</span>
<span class="t-BadgeList-value">32</span>
</span>
</li><li class="t-BadgeList-item">
<span class="t-BadgeList-wrap u-color">
<span class="t-BadgeList-label">(현재 진료중)</span>
<span class="t-BadgeList-value">25</span>
</span>
</li>
참고
https://stackoverflow.com/questions/3452778/jquery-change-class-name
Using jQuery You can set the class (regardless of what it was) by using .attr(), like this:
$("#td_id").attr('class', 'newClass');
If you want to add a class, use .addclass() instead, like this:
$("#td_id").addClass('newClass');
Or a short way to swap classes using .toggleClass():
$("#td_id").toggleClass('change_me newClass');
