Using JavaScript, CSS, and jQuery to Create Searchable Shuttle APEX Plug-in
Explore how to utilize JavaScript, CSS, and jQuery to develop a Searchable Shuttle APEX Plug-in on DATACONSULTING.PL. Learn about the integration of DOM, JS, and jQuery in APEX, leveraging APEX icons, CSS animations, and dynamic actions. Discover the benefits of using JavaScript in APEX for accessing JavaScript API, developing plug-ins, extending application behavior, and interacting with browser functionality.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
How to use JavaScript, CSS, and jQuery to create Searchable Shuttle APEX Plug-in WWW.DATACONSULTING.PL
How to use JavaScript, CSS, and jQuery to with APEX and create Searchable Shuttle APEX Plug-in Author Agenda: DOM, JS and jQuery in APEX APEX icons, CSS animations & Dynamic Actions together JavaScript APEX API overview Greg PrzemyslawKantyka APEX Plug-in components Senior Oracle Expert in Database Consulting company, having 15 years of experience in Oracle Forms & Reports, APEX, ETL, and PL/SQL development. APEX teams development mentor, Board Member of DATACONSULTING APEX Plug-in types APEX Plug-in PL/SQL code callbacks Searchable Shuttle plugin pkantyka@dataconsulting.pl Adding attributes to the plugin Distribution and deployment of your Plug-in WWW.DATACONSULTING.PL | 2
JavaScript and APEX JavaScript language with APEX a browser build-in scripting language for interaction with server, browser, user, page structure and content APEX wraps JavaScript and developers can build APEX applications declaratively without JavaScript knowledge This is the major benefit of APEX (aka Low Code, aka Declarative Programming). But to do something beyond APEX declarative features WWW.DATACONSULTING.PL | 3
JavaScript and APEX JavaScript is useful for Accessing APEX JavaScript API - APEX built-in functionality not exposed in declarative way Development APEX Plug-ins Extending APEX app with non-standard behaviour or manipulate page content Accessing extra functionality from browser JavaScript API s Using external web libraries or web components and communicate with them WWW.DATACONSULTING.PL | 4
JavaScript and APEX When the standard Dynamic Actions and declarative options are not enough APEX allows us to use JS: By dedicated JavaScript DA By Page JS settings By JS settings for IG + APEX Plug-ins, static regions, templates and static files WWW.DATACONSULTING.PL | 5
Document Object Model Tree-like JS object representation of HTML page elements APEX declarative support for DOM: The most important DOM objects: Document (getElementById, querySelector) Window Event Element (parentElement, ChildNodes) See https://www.w3.org/DOM/ https://dom.spec.whatwg.org/ https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model WWW.DATACONSULTING.PL | 6
Code sniplets Changing APEX item s label: document.querySelector('label[for="P1_ITEM"]').innerText = 'new label ; Hiding item or region identified by STATIC_ID: document.getElementById( STATIC_ID ).style.display = none ; Adding custom button in Shuttle control section: document.querySelector('#P1_SHUTTLE .shuttleControl').insertAdjacentHTML( 'beforeend , '<input id="BTN1" type="button" class="a-Button a-Button--shuttle" value=":)" /> ); WWW.DATACONSULTING.PL | 7
Cascading Style Sheets CSS Language for specifying visual attributes (border, size, font, colours, margins etc.) CSS Built-in selector syntax (used also by DOM querySelector) method: H1, H1.class, H1#ID, H1[attribute="value"], td:nth-of-type(2) document.querySelectorAll('#IG1 .a-GV-bdy tr td:nth-of-type(2)').forEach( function(e) {e.style.border='black 1px solid } ); WWW.DATACONSULTING.PL | 8
jQuery in APEX jQuery: Wraps DOM & AJAX, enhances CSS selector syntax (e.g :parent, see jQuery selectors) Adds Effects, AJAX handling It has its own jQuery Plug-In system which is used by APEX API $( #IG1 .a-GV-bdy tr td:nth-of-type(2) ).css( border , black 1px solid ); WWW.DATACONSULTING.PL | 9
jQuery in APEX Sample of code: APEX declarative support for jQuery: Hiding of all paragraphs on the page $( p ).hide(); Hiding all text items on page with animation: $( 'input[type= text ]' ).hide( "slow" ); $( 'input[type= text ]' ).fadeOut( 1500 ); $( 'input[type= text ]' ).fadeIn( 1500 ); WWW.DATACONSULTING.PL | 10
jQuery in APEX APEX JavaScript API: Encapsulates DOM and JavaScript native API code Parts of API: Page and components management: apex.page, apex.region, apex.item and $v, $x, $s functions Popups, dialogs and navigation: apex.navigation, apex.theme and apex.message Util tools and non-UI: apex.storage, apex.util and apex.debug AJAX and server communication related: apex.server IG: interactiveGrid widget Popup menu: menu widget WWW.DATACONSULTING.PL | 11
APEX icons, CSS animations and DA together Simple combination of DOM, jQuery, CSS and Dynamic Actions: jQuery selector is used to find all Media List entries on the page Dynamic Action triggered by the Mouse Enter and Mouse Leave events is used jQuery selector and find() function together with triggeringElement APEX attribute is used to get the icon inside the Media list entry CSS animation (defined in font-apex.min.css) is applied to icon inside Media List entry WWW.DATACONSULTING.PL | 12
Shuttle item with search functionality Problem definition: We have application with many shuttle items and relative long LOV s Business users don t want to scroll down to much through Shuttle list Business users don t want to change it to Popup LOV Search field for shuttle is desired option All shuttle items (100+) in application should be replaced with Searchable Shuttle WWW.DATACONSULTING.PL | 13
Shuttle item with search functionality Shuttle item with search functionality made with jQuery (not yet as APEX Plug-In): prepend() is used to add input HTML tag to the shuttle APEX item keyup() with show() and hide() are used to filter the shuttle list replaceWith() and clone() are used to upgrade the standard Move All (>>) button prop( selected , true) is used to select options on the left shuttle list WWW.DATACONSULTING.PL | 14
Shuttle item with search functionality WWW.DATACONSULTING.PL | 15
Oracle APEX Plug-In development APEX Plug-In settings: Plug-In Type PL/SQL code for plugin with callbacks function Callbacks names Attributes section CSS and JavaScript Files WWW.DATACONSULTING.PL | 16
Oracle APEX Plug-In development APEX Plug-In types: Region Item Dynamic action Process Authentication Scheme Authorization Scheme REST Data Source WWW.DATACONSULTING.PL | 17
Oracle APEX Plug-In development Searchable shuttle APEX Plug-In: WWW.DATACONSULTING.PL | 18
APEX Plug-in PL/SQL code WWW.DATACONSULTING.PL | 19
JavaScript function for Searchable Shuttle WWW.DATACONSULTING.PL | 20
Callbacks functions WWW.DATACONSULTING.PL | 21
Adding attributes to the plugin WWW.DATACONSULTING.PL | 22
Adding attributes to the plugin Referencing attributes in PL/SQL code of Plug-In: You can use p_dynamic_action.attribute_01 attribute_02 etc. It is possible to build dynamic JavaScript function based on attributes WWW.DATACONSULTING.PL | 23
Oracle APEX Plug-In development WWW.DATACONSULTING.PL | 24
Future of Searchable Shuttle Plug-In Possible enhancements: Better code organization: Use JavaScript files section to store all JS code Use CSS file to store all styles Add code dedicated for mobile interface Add additional attributes for extra styling/add class to search field Add event emmited every time search field is changed Add AJAX for server-side filtering of LOV based on current search field value (support for huge LOVs) WWW.DATACONSULTING.PL | 25
