Video Url- https://youtu.be/boWPN_m3bc4
In today's video I will try to show the different types of use of Oracle Apex items. Hopefully after watching the whole video you will get a good idea about the items in Oracle Apex.
1. Dynamically Color Text field...........................
Create a New items, Name-CHANGE_COLOR
Go To HTML Header >> Paste the following code
<script language="JavaScript" type="text/javascript">
function setCol(pThis)
{var vv = $v(pThis);
var cls = '#'+pThis;
if(isNaN(vv))
{$(cls).css("background-color","red");}
else
{$(cls).css("background-color","white");}}
</script>
Create a Dynamic Action >> Name- Change Color
Event: change >> Selection Type: item >> Item(s): P1_CHANGE_COLOR
Action: Execute Javascript Code >> Paste the following code
setCol(this.triggeringElement.id);
Affected Items: P1_CHANGE_COLOR
..........................................................................................................
2. Read only item use code...........
Go To Item Properties >> Advanced >> Custom Attributes >> Paste the following code
readonly=true style='color: red;text-align:'
..........................................................................................................
3. Only Number Field.......................
Create a items, Name-NUMBER_FIELD
Go To NUMBER_FIELD item's properties >> Advanced >> CSS Classes >>
Paste the following code
allow-decimal
Go To Page Properties >> Execute when Page Loads >> Paste the following code
$(".allow-decimal").keypress(function (e) {
if(e.which == 46){
if($(this).val().indexOf('.') != null) {
return false; }}
if (e.which != 8 && e.which != null && e.which != 46 && (e.which < 48 || e.which > 57)) {
return false; }});
..........................................................................................................
4. Convert Bengali to English and English to Bengali....................
Create a 2 items, Name-Bengali to English, English To Bengali
Go To Bengali to English item's properties >> Advanced >> Custom Attributes >> Paste the following code
onblur="javascript:getbanglatoenglish(this)"
Go To English To Bengali item's properties >> Advanced >> Custom Attributes >> Paste the following code
onblur="javascript:getbanglatoenglish(this)"
..........................................................................................................
5. Region and Item Dynamically Show Hide With Animation....................
Create a Region >> Name- Region Show/Hide
Go To Static ID- REG2
Create a few items, 1-SELECT_LIST, 2-ITEM_1, 3- ITEM_2
Create a Dynamic Action on SELECT_LIST items >> Name- Region Hide,
Event: change >> Selection Type: item >> Item(s): P1_SELECT_LIST
Client-side Condition >> Item = Valus, Item(s): P1_SELECT_LIST >> Value= 1
Action: Execute Javascript Code >> Paste the following code
$("#REG2").hide(1000);
..........................................................................................................
6. Item hide and show using JavaScript....................
Create a few items, 1-CHANG_ITEM, 2-HIDE_AND_SHOW_ITEM
Go To HTML Header >> Paste the following code
<script language="JavaScript" type="text/javascript">
function fnc_hide(){
if ($x('P12_CHANG_ITEM').value == 0) {
$('label[for=P12_HIDE_AND_SHOW_ITEM],#P12_HIDE_AND_SHOW_ITEM').hide();
} else {
$('label[for=P12_HIDE_AND_SHOW_ITEM],#P12_HIDE_AND_SHOW_ITEM').show();
}}
</script>
........................................................................
7. Make Calculations in items, using JavaScript....................
Create a few items, 1-TOTAL, 2-PAYMENT, 3- CHANGE_AMOUNT, 4- DUE,
Go To Page Properties >> Function and Global Variable Declaration >> Paste the following code
function fnc_calcTotalSal() {
var Total, Cash_Paid, Due, Changes;
Total = parseFloat($v("P12_TOTAL"), 10) ? parseFloat($v("P12_TOTAL"), 10) : 0;
Cash_Paid = parseFloat($v("P12_PAYMENT"), 10) ? parseFloat($v("P12_PAYMENT"), 10) : 0;
if (Cash_Paid > Total)
{
Changes = Cash_Paid - Total;
Due = 0;
}
else {
Due = Total - Cash_Paid;
Changes = 0;}
..........................................................................................................
Then Enjoy.........................