Order Tracking Progress Bar Oracle Apex

Today I will try to show you how to create an order tracking progress bar for an e-commerce website created with Oracle Apex.

When customers order a product on your e-commerce website created via Oracle Apex, you can easily see and understand the latest status of the ordered product through a progress bar. In this post I will discuss in detail how to create order tracking progress bar and try to show. All the code needed to create the order tracking progress bar and all the steps on how to create it will be given in the post. Hopefully you too can easily create an order tracking progress bar on the e-commerce website.

Steps to create order tracking progress bar.

In Apex, If You create an application with Side navigation menu name is too long in this case apex will not show full navigation name in this case tool tip will help you alot.
1. Open the development mode of your Oracle Apex application.
2. Create a new blank page >> Name=Order tracking progress bar
3. Create two regions >> Name= Order tracking, Tracking Status
4. Create a Item >> Name= P58_STATUS_VALUE

I will change some options of the item
Change the type of item >> Type = Select list
List of Values >> Type= Static Values
Static Values = Input Display values and Return values up to 1-6
Paste the following code into Custom Attributes from the Advanced option of the item.

	onchange="apex.submit();"

Our first step is almost finished. Now we will start working with the Tracking Status bar. To work with the Tracking Status bar, we will go to the region called Tracking Status that we created earlier.

1. Select Region Type = PL / SQL Dynamic Content
Download the text file for all PL SQL codes.
Url- Download the text file

When the text file download is complete, open the file, stay in the file Copy and paste the PL / SQL code.

After pasting the code, copy the name of the item you created and paste it on the item name inside the PL / SQL Code to change the name of all the items in the PL / SQL Code. Creating our order tracking progress bar is nearing completion.
At this stage I will use some in-line CSS to show the order tracking progress bar beautiful and UI design.

1. Go to the in-line CSS box from Page Properties >>
Copy and paste the complete code given below

  
        ol.progtrckr li {
            display: inline-block;
            text-align: center;
        }        
        .arrow-steps .step {
        	font-size: 14px;
        	text-align: center;
        	color: #fff;
        	cursor: default;
        	margin: 0 9px;
        	padding: 6px 10px 10px 30px;
        	min-width: 160px;
        	float: left;
        	position: relative;
        	background-color: #7a736e;
        	-webkit-user-select: none;
        	-moz-user-select: none;
        	-ms-user-select: none;
        	user-select: none; 
          transition: background-color 0.2s ease;
        }
        .arrow-steps .step:after,
        .arrow-steps .step:before {
        	content: " ";
        	position: absolute;
        	top: 0;
        	right: -17px;
        	width: 0;
        	height: 0;
        	border-top: 19px solid transparent;
        	border-bottom: 17px solid transparent;
        	border-left: 17px solid #7a736e;	
        	z-index: 2;
          transition: border-color 0.2s ease;
        }
        .arrow-steps .step:before {
        	right: auto;
        	left: 0;
        	border-left: 17px solid #fff;	
        	z-index: 0;
        }

We created the order tracking progress bar. Now save the page and see if the progress bar is working properly.

Hope you find this post helpful. To see more about Oracle Apex, you can visit my website.
You can also visit my youtube channel. I try my best to share my education with everyone. I will always try to give you something new. Please help by subscribing to my youtube channel.

Many thanks for visiting the site.