ORACLE APEX bootstrap CSS with IF ELSE Statement

Question

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.

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

Koen Lostrie · Accepted Answer · 2021-06-01 12:57:37Z

1

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.

edited Jun 1, 2021 at 12:57

answered May 31, 2021 at 7:10

Koen Lostrie

19.5k2 gold badges16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user13768246 Over a year ago

Hi Koen Lostrie and thank you very much for your help. I added the code of current_session item complulation and a photo from my main APEX page that has these tiles.

Koen Lostrie Over a year ago

What is the source of your tiles region ? I assumed in my that it was a SQL query.

Koen Lostrie Over a year ago

as a side comment, it is a good practice to prefix your page items with P<page_number>_ . You'll start realising that when your app becomes more complex :)

user13768246 Over a year ago

Yes you are right about page number. I will change my page items names with my page number.. My tiles has css source file. It is the css that i wrote above

Koen Lostrie Over a year ago

So just to confirm - the source region is not a query, it is static correct ? I have updated my answer

Collectives™ on Stack Overflow

ORACLE APEX bootstrap CSS with IF ELSE Statement

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related