Responsive and Mobile View Classic Report In Oracle Apex

Responsive And Mobile View Classic Report In Oracle Apex

 

We've Been Struggling For Decades Now To Get The Responsive Oracle Apex Classic Report. The Standard Oracle Apex That Displays The Table Format Of The Dataset Does Not Support Responsiveness To Device Resizing.

We Will Take Some Steps To Create Responsive And Mobile View Classic Report. If You Watch My Full Video / Post, Hopefully You Will Be Able To Create Responsive And Mobile View Classic Report In Your Own Application. If You Encounter Any Problem To Create Responsive And Mobile View Classic Report, Please Comment And I Will Fully Cooperate.

Steps On How To Create Responsive And Mobile View Classic Report In Oracle Apex

1. To Create A Responsive Classic Report, We First Need To Create A Templates. 

2. To Create Templates, We Will Click On Templates From The Shared Components Of The Application. 

3. In The Search Box, We Will Search By Typing The Report. 

4. We Will Copy Report Standard From Report Templates.
         Name- Mobile View.

5. We Will Edit The Mobile View Templates
         I Will Edit The Last Line In The Before Rows Box Of Mobile View Templates, Delete The Last Line And Paste The Following Code.

	                    
                     
         <table class="t-Report-report mobile-view-table" aria-label="#REGION_TITLE#">

6. Mobile View Templates Column Template 1: Delete The Code In The Box And Paste The Following Code. 

	                    
                     
       <th class="t-Report-colHead" #ALIGNMENT# id="#COLUMN_HEADER_NAME#" #COLUMN_WIDTH#>#COLUMN_HEADER#</th>

7. We Will Save The Templates By Clicking On Apply Change 

The Work Of Creating Our Mobile View Templates Is Over.

8. Now We Will Create A Classic Report, The Report We Want To See In Mobile View.
         When The Classic Report Creation Is Done, We Will Go To Attributes And Select Our Newly Created Responsive Template Report In The Template.

Our Work Is Almost Finished.

Now We Will Copy And Paste The Css Codes Below The Inline Css From The Proprietary Of The Page.

	                    
                     
.mobile-view-table th, .mobile-view-table td {
  margin: .5em 1em;
}
.mobile-view-table {
  margin: 0 0;
  min-width: 300px;
}
.mobile-view-table th {
  display: none;
}
.mobile-view-table td {
  display: block;
}
.mobile-view-table td:first-child {
  padding-top: .5em;
}
.mobile-view-table td:last-child {
  padding-bottom: .5em;
}
.mobile-view-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
 /* width: 6.5em;
  display: inline-block;
  */
}
@media (min-width: 480px) {
  .mobile-view-table td:before {
    display: none;
  }
}
.mobile-view-table th, .mobile-view-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .mobile-view-table th, .mobile-view-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .mobile-view-table th:first-child, .mobile-view-table td:first-child {
    padding-left: 0;
  }
  .mobile-view-table th:last-child, .mobile-view-table td:last-child {
    padding-right: 0;
  }
}
.mobile-view-table {
  /*background: #34495E;
  color: #fff;*/
  border-radius: .4em;
  overflow: hidden;
}
.mobile-view-table tr {
  border-color: #46637f;
}
@media (min-width: 480px) {
  .mobile-view-table th, .mobile-view-table td {
    padding: 1em !important;
  }
}
.mobile-view-table th, .mobile-view-table td:before {
  color: #d55;
}


img {
    height: 120px;
    width: 120px;
    border-radius: 90px;
}

Now Run The Report And Reduce Your Device-width.

If You Have Any Problem To Create Responsive And Mobile View Classic Report, Check Out The Post / Video And Be Sure To Comment. We Look Forward To Working With You To Resolve Any Issues You May Have.

 

🔗 Demo Application-
            URL- Demo Application
            Username - demo, Pass- demo
 

I hope everyone will like it. Please watch the full video,
Comment on any of your problems, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable. Visit my blog site, new technology related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
Please stay tuned by subscribing to the YouTube channel, and encourages new videos to be uploaded.
=================
Visit my site to get more collaborative posts about Oracle Apex and subscribe to my YouTube channel. Thanks.
Comment on any of your issues, I will try my best to solve the problem, In-Shah Allah. Everyone's cooperation is desirable.
Visit my blog site, new technology-related videos, you will get different types of tutorials of Oracle Apex, and hopefully, you can use them in your daily work.
==============================

🙍🏾‍ Md jABER HOSSEN
📲 Mobile- +8801760688286
📨 Email- jaberit786@gmail.com
🌐 FB- facebook.com/mdjaber.hossen1
Please Subscribe to My Channel

Many thanks for visiting the site.

Then Enjoy.........................