Display formatted console with Oracle apex 5.1(Oracle Application Express)

Let's say we want to display object as a table when we console. Normally we just console everything and displaying as it is without formatting our object.It would be nice and beautiful if we just format it a bit. But question is HOW?

Ummm.... May be a structured way is way to go!! WAIT someone just said structured way then we must use table(That's what I think).

We can test this in console by pressing F12(Most of the browser support this using windows)

F12 ~> Console(Chrome)
F12 ~> Debugger(Firfox)

Code Snippet :

var Apps =  [
    {"Application":"Sample Database", "Status":"Activated"},
    {"Application":"Interactive Grid", "Status":"Activated"},
    {"Application":"Oracle Stuff", "Status":"De-activated"}
];
console.table(Apps);
Output :

Cool right!! Just check how much cleaner it looks and it's easy to verify all the values which we are getting.

Now, let's try this in our apex application:
Here i did use a blueprint application we will just create a simple page and static region in it.(this will show case you how we can achieve the same in complex scenario when we have to deal with Ajax and Json)

Region will have :

<label><input type="checkbox" class="chkCompare" title='Pranav' id='1' />
  <span style="font-size: 30px;">Pranav</span>
</label><br><br>
<label><input type="checkbox" class="chkCompare" title='From' id='2'/>  <span style="font-size: 30px;">From</span></label><br><br>
<label><input type="checkbox" class="chkCompare" title='India' id='3'/>  <span style="font-size: 30px;">India</span></label><br><br>
<label><input type="checkbox" class="chkCompare" title='Work as a' id='4'/>  <span style="font-size: 30px;">Work as a</span></label><br><br>
<label><input type="checkbox" class="chkCompare" title='Freelancer' id='5'/>  <span style="font-size: 30px;">Freelancer</span></label>

Now add some javascript code:

function test1(){
  var checkedElemets = $('.chkCompare:checked');
  var values = checkedElemets.map(function() {
    return {
      id: this.id,
      name: this.title
    };
  }).get();
  console.clear();
  console.table(values);      
}

Of course we have a button on a page which will call this function and kindly check in DOM window what output message it displays in console.

Output:

Demo : Formatted Console

Again this is very neat and simple example just try to use this in complex scenario it will help.

Some of the very awesome console API we can find here:
Console API Reference
Debugging Asynchronous JavaScript with Chrome DevTools

Clickable display only item in oracle apex 5.0.4

You can use Jquery to achieve the same.

Let's take a look at below example.

Function and Global Variable Declaration

1. $(function(){  
2.     $('#P50_CLICK_DISPLAY').on('click', function(){  
3.       $("#P50_HIDE").hide();  
4.       $("#P50_SHOW").show();  
5.       $("#P50_HIDE_LABEL").hide();    
6.       $("#P50_SHOW_LABEL").show();   
7.     })      
8. })  

Three  items in same region(Static). here P50_CLICK_DISPLAY is a display only item and it's value is static. There are two more item which is Hide and Show.

Now, initially p50_show will be hidden on page load and p50_hide will be displayed.When user clicks on display only item's value then p50_show will be displayed and p50_hide will be hidden.

Execute when Page Loads

1.  $("#P50_SHOW").hide();  
2.  $("#P50_SHOW_LABEL").hide();  

Here we have hide the Label as well as item.

This can be done without using DA which is more convenient way in this scenario.

Css:

1. #P50_CLICK_DISPLAY {   
2.         text-decoration: underline;  
3.         -webkit-text-decoration-color: red;  
4.         -moz-text-decoration-color: red;  /* vendor prefix not required as of V36 */  
5.          color: red;  
6. }  

If you want to  redirect you can use :

$('#P50_CLICK_DISPLAY').wrap('<a href="Link_url"></a>') ;

Demo : https://apex.oracle.com/pls/apex/f?p=30631:50:12855411930739:::::

Page : 50

Credentials : test/test

Remove X from Modal Page

Sometimes our clients have some good requirements where by we need to do some stuff according to their requirements  as we all know "Customer is always right - Harry Gordon Selfridge, John Wanamaker and Marshall Field"

So what if we want to hide X mark from the Modal Page (Oracle apex 5.0) basically there two ways to achieve the same first way would be add some css which will do it for us.

Copy and paste below code in page css :

button.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close {    visibility: hidden !important;  
}  

Another method is very clean. For that we need to edit modal page -> Dialog -> Attributes

Add this code :

open:function(event,ui){parent.$('.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only.ui-dialog-titlebar-close').hide();}

We can also add button in modal page near close button:

$('.ui-dialog-titlebar', window.parent.document).append('<a href=""><span class = "fa fa-user someIdentifier"> </span></a>');

   $('.someIdentifier', window.parent.document).click(function(){
       alert('whol');
   });

Oracle application express or Oracle APEX have some good inbuilt functionalities and it's better we always follow the same without playing it with much.

Comment if you like the content and share :)

Follow:   Twitter

Find me on linkedin and you can always endorse