Search code examples
csssassoracle-apexoracle-apex-5oracle-apex-5.1

ORACLE APEX bootstrap CSS with IF ELSE Statement

I know that css does not support if else statement. I want to show a card in my bootstrap if my value is > 0.

css code:

.card-counter{

box-shadow: 2px 2px 10px #DADADA;

margin: 5px;

padding: 20px 10px;

background-color: #fff;

height: 100px;

border-radius: 5px;

transition: .3s linear all;

}

.card-counter:hover{

box-shadow: 4px 4px 20px #DADADA;

transition: .3s linear all;

}

.card-counter.success{

background-color: #66bb6a;

color: #FFF;

}

.card-counter i{

font-size: 5em;

opacity: 0.2;

}

.card-counter .count-numbers{

position: absolute;

right: 35px;

top: 20px;

font-size: 32px;

display: block;

}

.card-counter .count-detail{

position: absolute;

right: 35px;

top: 50px;

font-style: italic;

text-transform: capitalize;

opacity: 0.5;

display: block;

font-size: 18px;

}

.card-counter .count-name{

position: absolute;

right: 35px;

top: 65px;

font-style: italic;

text-transform: capitalize;

opacity: 0.5;

display: block;

font-size: 17px;

} 

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div class="container">
<div class="row">

<div class="col-md-3">
      <div class="card-counter success">
        <i class="fa fa-calendar fa-3x fam-clock fam-is-info fa-lg"></i>
        <span class="count-numbers"><a href="f?p=&APP_ID.:3008:&APP_SESSION." style="color: white">&CURRENT_SESSIONS. - 
        &CONFIRMED_AMOUNTS.€</a></span>
        <span class="count-detail">Weekly</span>
        <span class="count-name"><a href="f?p=&APP_ID.:3008:&APP_SESSION." style="color: white">Open<p>Sessions</a></span>
      </div>
    </div>

&CURRENT_SESSIONS. is my application item, If this item > 0 then i want to show this tile, otherwise i want to hide it.

enter image description here

enter image description here

current_session sql code:

select count(CLIENTS.ID) as QTY
 from SESSIONS SESSIONS,
    CLIENTS CLIENTS 
 where SESSIONS.CLIENTS_ID=CLIENTS.ID 
 and SESSIONS.STATUS =1
 and to_char(SESSIONS.SESSION_DATE, 'MM-DD-YYYY') between to_char(trunc(CURRENT_TIMESTAMP, 'iw'), 'MM-DD-YYYY') 
 and to_char(trunc(CURRENT_TIMESTAMP, 'iw')+6, 'MM-DD-YYYY')
Solution

  • You could do it in several other ways via your query instead of through css. It will probably be easier.

    Method 1: Use the item CURRENT_SESSIONS in your query so you only get the rows that need to be displayed for the current value of CURRENT_SESSIONS. You have not provided your data so it's hard to give you an example. Let me know if you need help figuring out how to do this.

    Method 2: Add this column to your report query

           CASE
        WHEN :CURRENT_SESSIONS != 0
        THEN 'block'
        ELSE 'none'
       END  show_current_sessions,

    You now have a column in your report with the string 'block' when the card needs to be displayed and 'none' when the card needs to be hidden. Use this value in an html expression or in the link text attributes of your report column html expression (adjust to your needs): <i style="display:#SHOW_CURRENT_SESSIONS#;"></i> link text attributes: style="display:#DISPLAY_PARENT_LINK#;" Downside of this method is that the card will be in the DOM so also need to ensure no valid url is rendered.

    However, if you do not use a query as region source the methods described above are not applicable. In that case you could use css variables.

    • Create a page item P1_SHOW_CURRENT_SESSIONS (change page number to your convenience). On your page attributes, add the following css under css > inline:
    :root {
  --display: &P1_SHOW_CURRENT_SESSIONS.;
}
.showhide {
  display:var(--display);
}

    • Add a before header computation on P1_SHOW_CURRENT_SESSIONS to return 'none' if CURRENT_SESSIONS is 0 and 'block' when it is > 0.

    • On the tile, add the css class showhide.