The document discusses using jQuery and custom data attributes to add client-side behavior and interactivity to Oracle APEX applications. It introduces: - The data attribute for unambiguously identifying elements - jQuery for element selection, event handling, and AJAX - Changing page items to HTML5 input types using data attributes - A rowclick plugin for adding click handling to report rows - Record sorting in reports using jQuery sortable - Deleting records from reports using click events and PL/SQL processing The document provides code examples and discusses building interactive features like record sorting and deletion without custom coding.

1. Utilising the data attribute
adding client side behaviour in Oracle APEX

2. Agenda
● Introducing the data attribute
● Introducing jQuery
● Changing Page-items into HTML items
● Record sorting
● Deleting records from a report
● Putting it all together

3. Who am I ?
● Independent Consultant since 2012
● smart4apex founding member (2010)
● Oracle since 2002 (Oracle 8i)
● PL/SQL, Apex, HTML(5), CSS(3), JavaScript, XML, XSLT
● Special interest in UI
● Trainer at skillbuilders.com
RIMA on Oracle Forums
@rhjmartens
richardmartens.blogspot.nl

4. Introducing the data attribute
● Problem: how to unambiguously identify elements in a page
● Your HTML will have lots of hooks you can try to catch:
● ID’s
● $(‘#yourid’).whateverfunction();
● classes
● $(‘.yourclass’).anotherfunction();
● DOM traversal
● $(‘#aclass’).parents(‘tr’).children(‘td a[href~=“a-record-id”]’).whatever();

5. Introducing the data attribute
● The data-* global attributes form a class of attributes called custom data attributes, that
allow proprietary information to be exchanged between the HTML and
its DOM representation by scripts.
(https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)
● HTML Attributes can be selected by:
$(‘[data-attribute=“1234”]’)
or
$(‘[data-attribute]’)
● And they can be simply added by using the “Custom Attributes” attribute

6. Introducing jQuery
● “jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML
document traversal and manipulation, event handling, animation, and Ajax much simpler
with an easy-to-use API that works across a multitude of browsers. With a combination of
versatility and extensibility, jQuery has changed the way that millions of people write
JavaScript.”
(http://jquery.com/)
● Key functionality:
● element selection (incl. DOM traversal)
● event handling
● AJAX
● Included in APEX by default !!

7. Introducing jQuery
● Element selection through the use of CSS selectors:
● .class has class
● #static-id has static ID
● [attribute] has attribute
● [attribute=‘value’] has attribute with value
● [attribute~=‘value’] word contains
● [attribute^=‘value’] begins with
● [attribute$=‘value’] ends in
● [attribute*=‘value’] substring contains
● [attribute*=‘value’ i] substring contains (case insensitive)

8. Changing page-items to HTML5
● Oracle only supports 4 HTML5 types:
● Text, Email, Phone Number and URL
● HTML5 offers a lot more:
● color, date, datetime-local, month, number, range, search, time, week
● Not all of them all supported by all browsers.
● Run DA on pageload:
● $('input[data-html5-type]').each( function() {
$(this).attr( 'type’
, $(this).attr('data-html5-type')
);
});
● Change your item into regular tekst item
● Add attribute: data-html5-type and set it to the type you need
● For date fields don’t forget to set the format to “YYYY-MM-DD”

9. Changing page-items to HTML5
● of course we need a bit of javascript:
● $('input[data-html5-type]').each( function() {
$(this).attr( 'type’
, $(this).attr('data-html5-type'));
});
● We can include this in an “onload” DA

10. The rowclick plugin I
● Available on apex.world
● Add data attributes to regions (classic or interactive reports)
● data-rowclick=“LINK”
points to the header in which your browser can find the link
● data-rowclick-event=“click”
defines to what event the plugin needs to listen
● data-rowclick-exclude=“HEADER,STATIC-ID”
defines the header(s) on which the plugin schould not listen

11. The rowclick plugin II
● What does the plugin actually do?
● Looks for all div’s that have a data-rowclick attribut
● Looks for TR’s that have TD’s that are not excluded by
data-rowclick-exclude
● All those TD’s get a click event function
● This functions will then execute on “click”
● It will look for a TD in the same row that has the defined header and searches for the
first anchor. This anchor is then “executed”
● It’s actually not a rowclick, but a table-cell-click.

12. Record Sorting
● using jQuery “sortable”
● Sortable is not enabled by default
● More info on:
https://goo.gl/kKvrnW

13. Record Sorting
● Create classic report
● the SQL should include an “order by” clause
● All “important” regions should have a static ID
● Use the static ID to select your region:
● // initiate sortability
$('#p10-emp').on('apexafterrefresh', function() {
setSortable('#p10-emp’
, 'table.t-Report-report tbody'
, 'data-empno'
, 'EMPNO'
, 'AJAX_SORT_EMP');
});
setSortable(....);

14. Record Sorting
● And we need a function to handle everything..
● a Handler function
● Let’s watch this in APEX
function setSortable(pRegion, pSelector, pAttrName, pHeader, pServerProcess) { // add some CSS to make user aware
of sortability $(pRegion + ' ' + pSelector).css('cursor', 'pointer'); // add data-empno attribute $(pRegion +
' ' + pSelector + ' td[headers="' + pHeader + '"]').each( function() { $(this).parent('tr').attr(pAttrName,
$(this).text() ); } ); $(pRegion + ' ' + pSelector).sortable({ helper: function(e, ui) {
ui.children().each(function() { $(this).width($(this).width()); }); return ui;
}, stop: function( event, ui ) { // var employees will hold empno's colon deparated var
employees = []; // walk through all items that have data-empno attribute $('[' + pAttrName +
']').each( function(){ employees.push ( $(this).attr(pAttrName) ); } );
apex.server.process ( pServerProcess, { f01: employees }, {dataType:"text",
success: function( pData ) { $(pRegion).trigger('apexrefresh'); } });
//$(ui.item).find('[data-empno]').attr('data-empno') } }); $(pRegion).on('apexafterrefresh', function() {
setSortable(pRegion, pSelector, pAttrName, pHeader, pServerProcess); });

15. Deleting records from a report
● Again: regular report IR, CR
● Add column with delete icon:
● <i data-delete-id="#EMPNO#" class="fa fa-trash-o"></i>
● Add Event handler:
● are you sure?
● save the value in a hidden item
● execute some pl/sql code (hidden item goes in, gets reset to null and is sent out)
● alert that the records has been deleted
● refresh the report

16. Requirements
● We must send a letter to an emp
● We must be able to choose from predefined alineas
● We must be able to change the order of which those alineas appear on the letter
● We must be able to change the alinea’s texts without modifying the original predefined
text
● We only need to send one letter per emp

17. APEX out of the box
● We could use an interactive grid for this!
● Let’s see how that looks

18. Let’s hack the user interface

19. Questions ?

20. A small plug for another great conference