Progress Bar in Reports in APEX5

APEX can create "Percentage Bars" within a report. This can be achieved using HTML Code in your Report SQL Query.

Steps:

1- Create your report:

Create an Interactive or Classic Report using SQL query :

SELECT CASE

          WHEN COLUMN <= 30

             THEN    '<div class="a-Report-percentChart" style="background-color:#000000;width:100%;"><div class="a-Report-percentChart-fill" style="width:'

                  || COLUMN

                  || '% ; background-color: 330099;"></div><span class="u-VisuallyHidden">'

                  || COLUMN

                  || '</span></div>'

                  || COLUMN

                  || '%'

          WHEN COLUMN BETWEEN 30 AND 50

             THEN    '<div class="a-Report-percentChart" style="background-color:#000000;width:100%;"><div class="a-Report-percentChart-fill" style="width:'

                  || COLUMN

                  || '% ; background-color:CC0000;"></div><span class="u-VisuallyHidden">'

                  || COLUMN

                  || '</span></div>'

                  || COLUMN

                  || '%'

          WHEN COLUMN BETWEEN 55 AND 70

             THEN    '<div class="a-Report-percentChart" style="background-color:#000000;width:100%;"><div class="a-Report-percentChart-fill" style="width:'

                  || COLUMN

                  || '% ; background-color:#99eb47;"></div><span class="u-VisuallyHidden">'

                  || COLUMN

                  || '</span></div>'

                  || COLUMN

                  || '%'

       END AS "Progress bar"

  FROM Table

Note: 

 Use CASE Statement to display different colors for the bars based on percentage.

2-Set the Report Bar column to Standard Report Column

3-Output:

In this report we're using the employees percentage of salary within their department

Note: 

If you want same color for the bar then use the same query without CASE Statements.

The ultimate guide for skinning ADF table

In ADF, Most common used component is table. Previously, I searched for so many blogs, I didn't get any skinning related stuff to fulfill my requirement then I realized and explored myself to learnt. Finally i could accomplish skinning for table component.

I hope this post should definitely useful for your requirement.

The below image is how the table look and feel without applying any custom skinning.

The below image is how the table look and feel after skinning.

The below are the steps to achieve above look and feel .

It's not straight forward approach, We need to apply skinning for each section.

af|table {

background: none;

border: 1px solid #A65B1A;

}

1. ColumnHeader:

af|table af|column::column-header-cell 
{   
height:35px;
color:#ffffff; 
text-align: center;
font-size: 12px;
font-family:'OpenSans-Bold';  
font-weight: bold;
background-image: none;
background-color: #A65B1A;
vertical-align: middle;
border-left: 1px solid #BF691E;
}

2. Data row:

af|table::data-table-VH-lines af|column::data-cell

{ 
background-color:#fff;
color: #7F4614;
font-size:12px;
font-family:'OpenSans-Regular';
height:30px;
vertical-align: middle;
text-align: left;
} 

3.Data row- Alternative:

For implementing different css for alternative rows,we need to be change table rowBandingIntervel property to 1.

af|table::data-table-VH-lines af|column::banded-data-cell{ 

background-color:#F0E5CC; 

color: #7F4614;

font-size:12px;   

font-family:'OpenSans-Regular';  

height:30px;   

vertical-align: middle;

text-align: left; 

}

4.Table default row selection:

Some of the requirements like want to show row selection color for the default selected row.

At the time of page load,The default row should selected, It depends on row index value.Normally, First row would be selected.

af|table::data-row:selected af|column::data-cell
{  
background-color: #eeaa00;
color: #ffffff;  
}
af|table::data-row:selected af|column::banded-data-cell
{  
background-color: #eeaa00; 
color: #ffffff;  

}

5.Table row selection:

The row color will be changed based in your row selection.These are the following selectors for that.

af|table::data-row:selected:focused af|column::data-cell
{  
background-color: #eeaa00;  
color: #ffffff; 
}
af|table::data-row:selected:focused af|column::banded-data-cell {
background-color: #eeaa00;   
color: #ffffff;    

}

6.Table row hover:

af|table::data-row:hover af|column::data-cell
{ 
background-color: #9bafc8;  
color: #ffffff;  
}
af|table::data-row:hover af|column::banded-data-cell { 
background-color: #9bafc8;
color: #ffffff; 

}

These all are the common requirements for table skinning.