Interactive Grids button’s customization

One of the features I always hated in the previous versions of APEX (before 5) were tabular forms. I never got then, they were always behaving funky, it was hard to debug and I preferred to write dynamic tabular forms by myself then with the built in functionality. It changed with the release of Interactive Grids with the Oracle APEX version 5.

When I’ve started working with them it was in the English speaking company and I didn’t face the problem I had later in Czech company, where I wanted to customize or translate buttons. It was not difficult to understand words like “edit” or “save” for users, but I wanted to have consistency in these buttons across the whole application.

The first button I wanted to change was “add new row”. Luckily to change this label it’s pretty straightforward as it has its own setting in the Interactive Grid Attributes – Toolbar menu, as shown on the picture below.

Sadly this is the extent of the customization you have about the buttons. If you want to add icon, change the button to “hot” or change the names of the other buttons, you simply have to dive into the Interactive Grid JavaScript model. I’ll maybe dig more into details later, but for now, I’ll just show you the pieces, which are related to the topic today. There are few settings you can adjust for each button.

button.iconOnly = true / false;
button.hot = true / false;
button.label = "label"
button.title = "tooltip"
button.iconBeforeLabel = true / false;

I believe all the settings are self explanatory. The only thing which remains, is how to use this in the real example. If you have a look into attributes of Interactive Grid region, you can see, it has field for something called JavaScript Initialization Code (in advanced section of attributes). There you can adjust the configuration of the Interactive Grid region. First we copy the default toolbar, get all the buttons we want to edit and setup their properties, like icons, labels and icon position as shown below. Lastly you save the configuration of your toolbar into the configuration of your Interactive Grid and return the config to be processed.

function(config) {
    let $             = apex.jQuery,
        toolbarData   = $.apex.interactiveGrid.copyDefaultToolbar(),
        addrowAction  = toolbarData.toolbarFind("selection-add-row"),
        saveAction    = toolbarData.toolbarFind("save"),
        editAction    = toolbarData.toolbarFind("edit");
     
    addrowAction.icon = "icon-ig-add-row";
    addrowAction.iconBeforeLabel = true;
    addrowAction.hot = true;
    saveAction.label = "Uložit změny";
    saveAction.iconBeforeLabel = true;
    saveAction.icon ="icon-ig-save-as";
    saveAction.hot = true;
    editAction.label = "Editovat";

    config.toolbarData = toolbarData;
    return config;
}

After applying the settings and refreshing the page, you can see the results of your labor.

thanks to https://www.stinolez.com/2018/10/19/interactive-grids-buttons-customization/

Condition based oracle apex column URL (Report Page)

Please find the below code for your reference and modify it.

select (case when order_status =’COMPLETED’ then
‘<a title=”Click here to generate the report” class=”t-Button t-Button–simple t-Button–small t-Button–hot t-Button–stretch” href=”‘||
apex_page.get_url(
p_page        => 12,
p_clear_cache => 12,
p_items       => ‘P12_ORDER_ID,P12_STATUS’,
p_values      => ORDER_ID||’,’||STATUS)||'”>GENERATE REPORT</a>’
else
NULL
end)  “REPORT”
from order

Display Date and time format in oracle apex using javascript

This code is show the current date and time

Date.prototype.getFromFormat = function(format) {
    var yyyy = this.getFullYear().toString();
    format = format.replace(/yyyy/g, yyyy)
    var mm = (this.getMonth()+1).toString(); 
    format = format.replace(/mm/g, (mm[1]?mm:"0"+mm[0]));
    var dd  = this.getDate().toString();
    format = format.replace(/dd/g, (dd[1]?dd:"0"+dd[0]));
    var hh = this.getHours().toString();
    format = format.replace(/hh/g, (hh[1]?hh:"0"+hh[0]));
    var ii = this.getMinutes().toString();
    format = format.replace(/ii/g, (ii[1]?ii:"0"+ii[0]));
    var ss  = this.getSeconds().toString();
    format = format.replace(/ss/g, (ss[1]?ss:"0"+ss[0]));
    var ampm = (hh >= 12) ? "PM" : "AM";
    format = format.replace(/ampm/g, (ampm[1]?ampm:"0"+ampm[0]));
    return format;
};
var time_var = $('#899_TIME');
var myVar = setInterval(myTimer, 1000);
function myTimer() {
    var d = new Date(); 
    var date = d.getFromFormat('dd-mm-yyyy hh:ii:ss:ampm');
    time_var.text(date);
    
} 

Negative Value Highlight Table Cell in Oracle Apex

		$(document).ready(function () {

			$('td').each(function () {

				var cellvalue = $.trim($(this).text());
				if (cellvalue.substring(0, 1) == '-') {
					$(this).wrapInner('');
				}
			});

		});
  • Copy the code and paste the code for Execute When Page Load or maintain custom js file
  • Write the inline css or custom css file, class name is red_color ie :
    		.red_color{
    			color:red;
    		}
    
  • Save the Page and run, you will get the negative value highlight

ORA-20001: Unable to refresh template, parent template not found.

My Universal Theme “Subscribed From” says – “Nonexistent Master”. How to upgrade to 5.1

when I do “Refresh Theme”, I get following error.

  1 error has occurred

  ORA-20001: Unable to refresh template, parent template not found.

 

oracle_apex_5-1_theme

1. Export the application as a back-up.

2. Export the app’s existing version of theme 42 (Universal Theme).

3. Re-import this copy of the theme as a custom theme (if there are no other custom themes it will be theme 101).

4. Switch themes from 42 to 101 (or whatever the custom theme number is), ensuring that the template classes are correctly matched.

5. Test the app is working and looks as expected.

6. Delete theme 42.

7. Recreate theme 42 from the Theme Repository.

8. Switch themes from 101 to 42, ensuring that the template classes are correctly matched.

9. Test the app is working and looks as expected.

10. Export the application as a back-up (don’t overwrite the previous export, in case anything untoward becomes apparent later).

Print barcode Tags using oracle apex.

Can we print barcode tags using oracle apex? YES! we can!
It is simple and you only need to attach the barcode font and some piece of code.

    1. 1.Upload the bar code font to the Static Application Files.
    2. In my example I used the code39.ttf.
    3. 2. On Apex page inline css, include the css code below to set the font
    4. Download font Here
   @font-face {
    font-family: "3 of 9 Barcode";
    src: url(#APP_IMAGES#3OF9_NEW.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    }
    .barCode {
    background-repeat: no-repeat;
    margin-top: 1px;
    font-family: "3 of 9 Barcode";
    font-size: 64px;
    margin-left: 10px;
    padding-bottom:3em;
    }
    1. 2. Create a pl/sql dynamic content region to show the barcode like this.
	begin
	htp.p('');
	htp.p('');
      for i in (select '*12345*' tag from dual
      union
      select '*43543*' tag from dual
      union
      select '*45345*' tag from dual
      union
      select '*89089*' tag from dual
      union
      select '*76867*' tag from dual
      union
      select '*45645*' tag from dual
      union
      select '*23423*' tag from dual) 
	  
	  loop
		htp.p('||i.tag||');
		htp.p('');
		htp.p('');
      end loop;
     htp.p('');
   end; 
    1. 3. The result will be like this.
    1. 4. Now we have to implement the print button. We need to hide all screen itens , except the tags. For that,we create a javascript function.
      function printContent(el){
      var restorepage = $('body').html();
      var printcontent = $('#' + el).clone();
      $('body').empty().html(printcontent);
      window.print();
      $('body').html(restorepage);
      }

 

Screenshot_1
  • 5.Create a button to call the javascript function
javascript:printContent('tags');
  • 6. And then we are ready to print only the tags

Oracle Apex Date-picker Hide Minimum Days

When you select the from date 11 automatially to date
below 11th days hided…

  1. create dynamic action for from date..
  2. set the change event
  3. choose execute javascript code
  4. copy the below code and paste it
  5. set affected elements to To Date

apex5 date picker from date to date select
$(“#P101_FROM”).datepicker(“option”,”minDate”, $v(P101_TO) );

$(“.ui-datepicker-trigger”).addClass( “a-Button a-Button–calendar” );

Hide nulls in Value Attribute Pairs report

If you have one record where you want to display multiple columns of information, the ‘Value Attribute Pairs – column’ report template is pretty nifty.

Some of the packaged applications use this within the breadcrumb bar, above a region display selector, and it looks really tidy.

Nulls shown with tilde

Note, I’ve modified region attribute setting ‘Show null values as’ to a tilde (~).

But what if I wanted to hide those null values for Mgr & Comm, similar to the ‘show nulls’ option within single row view of Interactive Reports?

Create an ‘after refresh’ dynamic action on the region. This is the default when doing so via the Page Designer.

1
2
3
4
5
// for each value cell found on the page, determine if contents = ~, then hide row if true
$('dd.t-AVPList-value').each(function() {
  if ($(this).text().indexOf('~') > 0)
    $(this).hide().prev().hide();
});

Then refresh your page. Done.

Nulls hidden

And if you have another event that refreshes the region, the JavaScript will re-apply and hide any nulls (represented as a tilde – something to find and hide).

The dd.t-AVPList-value is a selector for the Universal Theme. It uses a different class in other themes, so you would have to investigate using Inspect Element browser tool to check.

Right-Click -> Inspect Element

Thinking with my jQuery hat.

Simple Responsive Table

APEX is excellent at reporting stuff, but sometimes in a small screen reports are hard to read:

Words are wrapping. You have to scroll horizontally. It’s just awkward.

Here’s a dead simple CSS tweak that will make your reports mobile-friendly:

1- Add the class .table-responsive to your table element

<table id="report_#REGION_STATIC_ID#" class="table-responsive #COMPONENT_CSS_CLASSES#" #REPORT_ATTRIBUTES#>  

I would recommend creating a template option for it.

2- Add a data-label HTML attribute to your report template, and put the #COLUMN_HEADER# value in it

<td headers="#COLUMN_HEADER_NAME#" data-label="#COLUMN_HEADER#" #ALIGNMENT#>#COLUMN_VALUE#</td>  

3- Add the following CSS to your page/application

@media screen and (max-width: 600px) {
    table.table-responsive thead {
        display: none;
    }

    table.table-responsive tr {
        padding: 5px;
        display: block;
        margin: .5rem 0 1rem;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    }

    table.table-responsive td {
        display: block;
        text-align: right;
        border-bottom: 1px dotted #ccc;
    }

    table.table-responsive td:last-child {
        border-bottom: 0;
    }

    table.table-responsive td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
}

It can be customized to fit your taste, but it gives a good baseline.

Note: It is CSS2 compatible.

4- Enjoy the result

Mobile

Desktop