Order tracking progress bar in Oracle APEX

Order tracking progress bar in Oracle APEX.

Preview
  1. Create a blank page with select list item as per screenshot. 
  1. Create region with region type plsql dynamic content and use below code.
DECLARE
   l_app            NUMBER := v ('APP_ID');
   l_session        NUMBER := v ('APP_SESSION');

   CURSOR c_check_open
   IS
      SELECT 1
        FROM DUAL arh
       WHERE :p25_status_value IN (1,
                                   2,
                                   3,
                                   4,
                                   5,
                                   6);                        --Order Received

   l_open_check     VARCHAR (10);

   CURSOR c_check_assign
   IS
      SELECT 1
        FROM DUAL drh
       WHERE :p25_status_value IN (2,
                                   3,
                                   4,
                                   5,
                                   6);                               --Shipped

   l_assign_check   VARCHAR (10);

   CURSOR c_check_fwd
   IS
      SELECT 1
        FROM DUAL ph
       WHERE :p25_status_value IN (3,
                                   4,
                                   5,
                                   6);                        --Carrier Pickup

   l_fwd_check      VARCHAR (10);

   CURSOR c_check_cls
   IS
      SELECT 1
        FROM DUAL cih
       WHERE :p25_status_value IN (4, 5, 6);                     --Appointment

   l_cls_check      VARCHAR (10);

   CURSOR c_check_arr
   IS
      SELECT 1
        FROM DUAL sss
       WHERE :p25_status_value IN (5, 6);                --Arrived at Customer

   l_cls_arr        VARCHAR (10);

   CURSOR c_check_del
   IS
      SELECT 1
        FROM DUAL ccc
       WHERE :p25_status_value = 6;                                --Delivered

   l_cls_del        VARCHAR (10);
BEGIN
   HTP.p ('<ol class="progtrckr" data-progtrckr-steps="5">');

   --htp.p('<ol >');
   OPEN c_check_open;

   FETCH c_check_open INTO l_open_check;

   IF c_check_open%FOUND
   THEN
      HTP.p (
            '<div class="arrow-steps clearfix">
          <div class="step current"> <span><a href="'
         || APEX_UTIL.prepare_url (
               p_url      =>    'f?p='
                             || l_app
                             || ':186:'
                             || l_session
                             || '::::P186_REQ_NO:'
                             || :p185_incident,
               p_dialog   => 'null')
         || '"><b>Order Received</b></a></span> </div>');
   ELSE
      HTP.p (
         '<div class="arrow-steps clearfix">
          <div class="step"> <span><b>Order Received</b></span> </div>');
   END IF;

   CLOSE c_check_open;

   OPEN c_check_assign;

   FETCH c_check_assign INTO l_assign_check;

   IF c_check_assign%FOUND
   THEN
      HTP.p (
            '<div class="arrow-steps clearfix">
          <div class="step current"> <span><a href="'
         || APEX_UTIL.prepare_url (
               p_url      =>    'f?p='
                             || l_app
                             || ':186:'
                             || l_session
                             || '::::P186_REQ_NO:'
                             || :p185_incident,
               p_dialog   => 'null')
         || '"><b>Shipped</b></a></span> </div>');
   ELSE
      HTP.p (
         '<div class="arrow-steps clearfix">
          <div class="step"> <span><b>Shipped</b></span> </div>');
   END IF;

   CLOSE c_check_assign;


   OPEN c_check_fwd;

   FETCH c_check_fwd INTO l_fwd_check;

   IF c_check_fwd%FOUND
   THEN
      --for i in l_fwd_check.first..l_fwd_check.last loop
      HTP.p (
            '<div class="arrow-steps clearfix">
          <div class="step current"> <span><a href="'
         || APEX_UTIL.prepare_url (
               p_url      =>    'f?p='
                             || l_app
                             || ':186:'
                             || l_session
                             || '::::P186_REQ_NO:'
                             || :p185_incident,
               p_dialog   => 'null')
         || '"><b>Carrier Pickup</b></a></span> </div>');
   -- end loop;
   ELSE
      HTP.p (
         '<div class="arrow-steps clearfix">
          <div class="step"> <span><b>Carrier Pickup</b></span> </div>');
   END IF;

   CLOSE c_check_fwd;

   OPEN c_check_cls;

   FETCH c_check_cls INTO l_cls_check;

   IF c_check_cls%FOUND
   THEN
      HTP.p (
            '<div class="arrow-steps clearfix">
          <div class="step current"> <span><a href="'
         || APEX_UTIL.prepare_url (
               p_url      =>    'f?p='
                             || l_app
                             || ':186:'
                             || l_session
                             || '::::P186_REQ_NO:'
                             || :p185_incident,
               p_dialog   => 'null')
         || '"><b>Appointment</b></a></span> </div>');
   ELSE
      HTP.p (
         '<div class="arrow-steps clearfix">
          <div class="step"> <span><b>Appointment</b></span> </div>');
   END IF;

   CLOSE c_check_cls;

   OPEN c_check_arr;

   FETCH c_check_arr INTO l_cls_arr;

   IF c_check_arr%FOUND
   THEN
      HTP.p (
            '<div class="arrow-steps clearfix">
          <div class="step current"> <span><a href="'
         || APEX_UTIL.prepare_url (
               p_url      =>    'f?p='
                             || l_app
                             || ':186:'
                             || l_session
                             || '::::P186_REQ_NO:'
                             || :p185_incident,
               p_dialog   => 'null')
         || '"><b>Arrived at Customer</b></a></span> </div>');
   ELSE
      HTP.p (
         '<div class="arrow-steps clearfix">
          <div class="step"> <span><b>Arrived at Customer</b></span> </div>');
   END IF;

   CLOSE c_check_arr;


   OPEN c_check_del;

   FETCH c_check_del INTO l_cls_del;

   IF c_check_del%FOUND
   THEN
      HTP.p (
            '<div class="arrow-steps clearfix">
          <div class="step current"> <span><a href="'
         || APEX_UTIL.prepare_url (
               p_url      =>    'f?p='
                             || l_app
                             || ':186:'
                             || l_session
                             || '::::P186_REQ_NO:'
                             || :p185_incident,
               p_dialog   => 'null')
         || '"><b>Delivered</b></a></span> </div>');
   ELSE
      HTP.p (
         '<div class="arrow-steps clearfix">
          <div class="step"> <span><b>Delivered</b></span> </div>');
   END IF;

   CLOSE c_check_del;

   HTP.p ('</ol>');
END;

Demo