Skip to main content

Bootstrap Progress Bar in Oracle APEX Report

 

Here I am giving an example to display bootstrap progress bar in oracle apex report.

Step 1: Create a new blank page.

Step 2: Add CSS to the page in inline CSS section. It will make the magic happen.

.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width .6s ease;
}

.progress {
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #cfdae4;
    border-radius: .25rem;
}

Step 3: Function Call: Create a function get_progress_bar. If you want to render it in multiple places, it would be good practice to put this code in a package and call it in your query.

Sample function in a package called FXGN_GENERAL

CREATE OR replace FUNCTION get_progress_bar (p_value IN VARCHAR) 
RETURN VARCHAR2 
IS 
  l_height NUMBER := 20; 
BEGIN 
    RETURN '<span>  <div class="progress" style="height:' 
           ||l_height 
           ||'px;"> <div class="progress-bar" style="width:' 
           ||p_value 
           ||'%">' 
           ||p_value 
           ||' % </div></div></span>'; 
END;
     
Step 4: Create a new classical report or interactive report (whichever you want), then your query would then look something like this,

SELECT fund_id, 
       fund_name, 
       to_char(start_date, 'DD-Mon-RRRR') start_date, 
       fxgn_general.get_progress_bar(growth) growth
FROM fxgn_fund_progress 
ORDER BY fund_id ASC;

Step 5: Go to report attribute growth and set Escape special characters = Yes

Output: Then your output would then look like this,
The demo is here.

That's it.

Happy APEXing!!!...

Reference:

Comments

  1. Bronco Austin12 February 2021 at 03:16


    Iam so thrilled because of finding your alluring website here.Actually i was searching for Oracle DBA.Your blog is so astounding and informative too..Iam very happy to find such a creative blog. Iam also find another one by mistake while am searching the same topicOracle APEX.Thank you soo much..

    ReplyDelete
  2. Ames Cody10 March 2021 at 04:42

    Iam so thrilled because of finding your alluring website here.Actually i was searching for Oracle CPQ BML.Your blog is so astounding and informative too..Iam very happy to find such a creative blog. Iam also find another one by mistake while am searching the same topic Oracle PPM Cloud.Thank you soo much.

    ReplyDelete

Post a Comment

Popular posts from this blog

Printing Page Numbers in RTF Template [Oracle BI Publisher]

Here I am giving an example to print the page numbers dynamically in the RTF (Rich Text Format) template. Step 1:  Go to page footer and copy and paste the below script. Page |  <?fo:page-number?>  of  <?fo:page-number-citation:xdofo:lastpage-joinseq?> <fo:page-number> :   This is the object, which is used to represent the current page-number. <?fo:page-number-citation:xdofo:lastpage-joinseq?> :  This is the syntax, which is used to represent the total number of pages. Step 2:  Load the XML and preview the result. Output: That's it. References: fo:page-number Printing Page Number Code in Oracle XMLP RTF Template
2 comments
Read more

Generating the report with APEX_DATA_EXPORT

With the APEX_DATA_EXPORT package, you are able to export data from Oracle Application Express in the following file types: PDF, XLSX, HTML, CSV, XML, and JSON. Step 1: Create a table and populate it with some sample records. CREATE TABLE emp   (     empno        NUMBER,     first_name   VARCHAR2(240),     last_name    VARCHAR2(240),     mgr          NUMBER,     deptno       NUMBER,     sal          NUMBER,     created_date TIMESTAMP (6),     comm         NUMBER,     hiredate     DATE,     JOB          VARCHAR2(240),     ename        VARCHAR2(240),     PRIMARY KEY (empno) USING INDEX ENABLE   ); /    INSERT INTO emp (empno, first_name, last_name, mgr,                   deptno, sal, created_date)         VALUES                 (1, 'Larry', 'Ellison', ,                  10, 5000, LOCALTIMESTAMP);   INSERT INTO emp (empno, first_name, last_name, mgr,                   deptno, sal, created_date)         VALUES                 (2, 'Juan', 'Juan', 1,  
5 comments
Read more

Save Selected Interactive Grid Records into a Collection - Oracle APEX

Here I am giving an example to save selected interactive grid records into a oracle apex collection. Step 1: Create a new blank page. Note: Mine was page 20. You will need to update reference to " P20 " with your page number if it's different. Step 2: Create a new interactive grid report region to the page using below query. Set Static Id "EmpDetails" to the region. SELECT  *     FROM   ( SELECT  emp . empno ,                emp . ename ,                emp . JOB ,                dept . dname department ,                dept . loc  LOCATION ,                mgr . ename  manager ,                emp . hiredate ,                 nvl ( emp . sal , 0 )  salary ,                 nvl ( emp . comm , 0 )  commission            FROM  eba_demo_chart_emp emp ,                eba_demo_chart_dept dept ,                eba_demo_chart_emp mgr           WHERE  emp . deptno = dept . deptno             AND  emp . mgr      = mgr . empno  ( + )           ORDER   BY  emp . ename
9 comments
Read more