demnächst mehr, noch stark in der Entwurfsphase
Grundlagen siehe ⇒ http://api.jquery.com/category/selectors/
//über die ID des Elementes var select=$('#PAGE_ITEM_ID'); //über die Klasse var button=$('.T-Button');
Alle TD Elemente mit dem Attribute „headers“ und dem Attributwert „MDATA“ finden:
$('td[headers="MDATA"]')
Im Dom Baum navigieren
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/
Die Apex Java Script Methoden mit einbeziehen!
see ⇒ https://docs.oracle.com/cd/E71588_01/AEAPI/JavaScript-APIs.htm#AEAPI266
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)
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); }
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]); }
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 );
$('#P20_VALID_FROM').focus();
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!
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.
Tutorial:
Vorträge:
Progressbar
Oracle
JavaScript