20220225 - 클래식 리포트 : 뱃지 템플릿 배경색 바꾸기

클래식 리포트의 뱃지 탬플릿을 사용하여 화면을 구성

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');