Here I am giving an example to create On/Off Toggle switch using HTML, CSS, and JavaScript in Oracle Apex.
In this example, we will create a Toggle switch using HTML and CSS and will assign a value 'Y' if the switch is on and 'N' if the switch is off to a page item using the JavaScript. Follow these steps:
1. Create a Static Region and Add HTML Code
Open your page in Oracle Apex page designer and do the right-click on the content body and select option Create Region.
Optionally, you can set the position of this region to Breadcrumb Bar if your page mode is Normal if Dialog then you can set as Dialog header. Or you can simply show it in the Content Body section.
A region will be created as Static by default so no need to change its type. Now add the following HTML code to the Source > Text property of this region:
<label class="switch"> <input type="checkbox" id="myCheck" onclick="myFunction()"> <span class="slider round"></span> </label>
2. Add CSS to the Page
On your page, move to the CSS section and add the following CSS in Inline field:
.switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
3. Create an Item as Text Field
On click on the above toggle switch, I want to store a value in a text field, so that I can access that value in my PL/SQL code.
To do this, we need to create one more region in the content body section and create an item as a text field. Later you can even change this item type to a hidden item because we just want to use its value in the background.
So now I have one more item P38_CHECKBOX_VALUE in my page number 38.
4. Create a JavaScript Function
On your page, go to the JavaScript section and add the following JavaScript code to the Function and Global Variable Declaration field:
function myFunction() { // Get the checkbox var checkBox = document.getElementById("myCheck"); // If the checkbox is checked, display the output text if (checkBox.checked == true){ apex.item('P38_CHECKBOX_VALUE').setValue('Y'); } else { apex.item('P38_CHECKBOX_VALUE').setValue('N'); } }
Now the save the changes and you are all set to go. For your help, I am adding the images below for the above settings.
Region Settings:
CSS and JavaScript Code Settings:
Output:
When you will click on the toggle switch, then it will set the value 'Y' if it is on and 'N' if it is off.
Reference:
Related Tutorials:
hi Vinish, I am using the APEX_ITEM.SWITCH to create a report,.
but I would like to dissable the switch , Ive tried different stuff but with no luck.
could you please help me ?
cheers
gus
select ID,
APEX_ITEM.SWITCH(6,ACTIVE_FLAG,'true','Yes','false','No',id||'_AT','Active?'
,'disabled'
) ||
case when start_date > trunc(sysdate) then ' (Parameter activates on: '||to_char(start_date,'DD/MM/YYYY')||')'
when end_date > trunc(sysdate) and end_date - trunc(sysdate) <= 10 then ' (Parameter de-activates on: '|| to_char(end_date,'DD/MM/YYYY') ||')'
end AS ACTIVE
from ACCOUNT_TYPE
sorry, this is the query
select ID,
APEX_ITEM.SWITCH(6,ACTIVE_FLAG,’true’,’Yes’,’false’,’No’,id||’_AT’,’Active?’
) ||
case when start_date > trunc(sysdate) then ‘ (Parameter activates on: ‘||to_char(start_date,’DD/MM/YYYY’)||’)’
when end_date > trunc(sysdate) and end_date – trunc(sysdate) <= 10 then ‘ (Parameter de-activates on: ‘|| to_char(end_date,’DD/MM/YYYY’) ||’)’
end AS ACTIVE
from ACCOUNT_TYPE
Have no idea. You should ask this question on orclqa.com then maybe other members would be able to help.