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. 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. 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

Friendly URL: Redirect to Different Page after Login in Oracle APEX 20.1

Oracle has updated apex.oracle.com to APEX 20.1 which includes among other features the new Friendly URL option. Here i am giving an example to redirect to different page after login in Oracle APEX 20.1 [Friendly URL Enabled] Step 1: Define home page for each user in emp master table as below Step 2: To enable Friendly URL Syntax, follow below steps, 1) On the Workspace home page, click the App Builder icon. 2) Select an application (The Application home page appears). 3) From Application home page, you can access the Definition page in TWO ways: Click the Edit Application Properties button. From Shared Components:              1) Click Shared Components .              2) Under Application Logic, click Application Definition Attributes . The Definition page appears. 4) Under Properties, configure the Friendly URL s attribute: Click Apply Changes to save your ch...

Open modal/inline dialog in Oracle APEX using JS

Analysis: From Oracle Apex 4.2,  Inline dialog can be opened as modal dialog/popup using JS. Open inline dialog region as modal dialog: Step 1: Create static region. Step 2:  Set Template => Inline Dialog. Step 3:  Assign the static id to the region. Fig 1: Set template and Static ID Step 4:  Create button or change one of the report column type to Link. (Action: Redirect URL). Step 5:  Put the below JS to open the region as modal dialog.                javascript:openModal('unitpricedetails');            Fig 2:  Open simple modal dialog Open inline dialog region as modal dialog and pass values to the items: Common Steps:  Step 1 to Step 4. Step 5:  To pass value to that region, create P1_UNIT_ID in the inline  dialog.       javascript:$s('P1_UNIT_ID','#UNIT_ID#');javascript:openModal('unitpricedetai...