Benutzer-Werkzeuge

Webseiten-Werkzeuge


prog:apex_jquery_integration

Oracle Apex 5 -Mit JQuery die Logik und Optik einer Apex Page anpassen

demnächst mehr, noch stark in der Entwurfsphase 8-)

Grundlagen JQuery

JQuery ist eine „DOM manipulation library“

https://jquery.com/


Selector

Grundlagen siehe ⇒ http://api.jquery.com/category/selectors/

  • Zugriff über die ID mit *#* wie $('#PAGE_ITEM_ID') ⇒ Array Referenz auf das DOM Element
    //über die ID des Elementes
    var select=$('#PAGE_ITEM_ID');
    //über die Klasse
    var button=$('.T-Button');

Ein Element in der Seite gezielt auswählen

Alle TD Elemente mit dem Attribute „headers“ und dem Attributwert „MDATA“ finden:

$('td[headers="MDATA"]')

⇒ siehe https://api.jquery.com/category/selectors/

Traversing

Im Dom Baum navigieren

See ⇒ http://api.jquery.com/category/traversing/

Über eine Anzahl von JQuery Objekten iterieren

Nur Checkbox auswählen

$('#report_COR_VAL_FORM_TAB input[type="checkbox"]').each( function( index , listItem) {  
 
         if ($(this).prop('checked')) {
             console.log($(this).val()) ;  
         }
 
  } );

Nur Select Boxen auswählen die eine ID haben die mit „05“ beginnt:

$('select[id^="f05_"]').each( function( index , listItem) {  console.log($(this)) ; } );	

z.b alle Texte einer Spalte in einer Tabelle auf Rot setzen:

$('td[headers="MDATA"]').each(  function( index , listItem) { 
 
   $(this).css('color','red' ) ; 
 
} );

siehe ⇒ https://learn.jquery.com/using-jquery-core/iterating/


Einsatz mit Oracle Apex

Die Apex Java Script Methoden mit einbeziehen!

  • $x ⇒ document get by Id
  • $v ⇒ get the value of a page item (no hash tag !)
  • $s ⇒ set the value of a page item
  • apex.server
  • and more

see ⇒ https://docs.oracle.com/cd/E71588_01/AEAPI/JavaScript-APIs.htm#AEAPI266

Page Elemente enablen/disablen

Native JQuery verwenden zum enable/disable

$( "BACKUP_OLD_VALUES_P" ).prop( "disabled", true );  //Disable
$( "BACKUP_OLD_VALUES_P" ).prop( "disabled", false ); //Enable

Darauf achten, das die Elemente auch eine Static ID haben!

JS von Apex:

// JS Apex
$x_disableItem('BACKUP_OLD_VALUES_P',true)
Dynamic Action zum Aufruf verwenden

Aufgaben: Hat der Anwender in der Select Box P20_VALID_FROM nichts gewählt, sollen die bestimmte Button disabled dargestellt werden.

Dynamic Action mit „Execute JavaScript Code“ anlegen.

Die Dynamic Action ist von Typ „Change“ und auf das Page Item P20_VALID_FROM gebunden.

Beim Laden der Seite wird die Action einmal ausgeführt, damit sind die Buttons auch gleich beim Start der Seite „disabled“, bis der Anwender etwas ausgewählt hat.

Code:

if ( ! $v('P20_VALID_FROM') ) {
   $x_disableItem('BACKUP_OLD_VALUES_P',true);
   $x_disableItem('EXPORT_PARAMETER_SET',true);
}
else {
  $x_disableItem('BACKUP_OLD_VALUES_P',false);
  $x_disableItem('EXPORT_PARAMETER_SET',false);
}

Werte von Elementen bearbeiten

Native JQuery verwenden

//get Values
$x("P20_VALID_FROM").value;
 
//Set Values:
$x("P20_VALID_FROM").value = "Heute";

JS von Apex:

v_date = $v("P20_VALID_FROM");
 
// Session Parameter auslesen
$v('pFlowId')      // APP_ID
$v('pFlowStepId')  // APP_PAGE_ID
$v('pInstance')    // SESSION
 
 
// Werte setzen
$s("P2_TEXT_FIELD","Hello World!");
$s("P2_DISPLAY_ONLY","Hello World!");
 
// über eine Collection auslesen
 
collectionArray = $v2("P20_VALID_FROM");
 
for (idx=0; idx<collectionArray .length; idx++) {
  alert(collectionArray [idx]);
}

Select Liste vorauswählen

Z.b. für den Data Loading Dialog

$('#id1_1  option[value="FIELD01"]').prop("selected", true); 
$('#id1_2  option[value="FIELD02"]').prop("selected", true); 
 
$( "#id1_1" ).prop( "disabled", true );
$( "#id1_2" ).prop( "disabled", true );

Fokus setzen

$('#P20_VALID_FROM').focus();

Tool Tip an eine Element hängen

In der Seite auf Page Ebene „JavaScript/Execute when Page Loads“ einfügen

$('#STOP_CALC_RUN').attr('onmouseover',"toolTip_enable(event,this,'Call the methode pkg_control.stop_and_reset_run')");

Daran denken dem Element auch eine Static ID zu vergeben!


CSS auf einem Element setzen

var infoCSS = {
  'font-weight' : 'bold'
  ,'color'       : '#990000'
  ,'font-size'   : '0.8rem'
}
 
$('#P940_SETTINGS_DEF_BY_USER_LABEL').css(infoCSS);
$('#P940_SETTINGS_DEF_BY_USER_DISPLAY').css(infoCSS);

In Abhängigkeit des Wertes des Elementes

$('#P940_IS_ACTIVE').each( function( index , listItem) { 
	 if (  $(this).val() == 'N' ) {
		$(this).css('color','red' ) ; 
     }
     else {
         $(this).css('color','green' )
     }
 
   }
 );

Vorteil ist hier, das die Eigenschaft auch die anderen definierten Klassen wirklich überschreibt und man nicht lange probieren muss welche CSS Klassen in der Apex Seite zum Schluss zum gewünschten Ergebnis führen.


Quellen

Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
"Autor: Gunther Pipperr"
prog/apex_jquery_integration.txt · Zuletzt geändert: 2018/02/22 16:32 von Gunther Pippèrr