Home » OrclApex » Oracle Apex: Creating On/Off Toggle Switch Using HTML,CSS and JS

Oracle Apex: Creating On/Off Toggle Switch Using HTML,CSS and JS

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:

Region settings for Toggle switch in Oracle Apex.

CSS and JavaScript Code Settings:

CSS and JavaScript settings for Toggle Switch in Oracle Apex.

Output:

Customized toggle switch output in Oracle Apex.

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:

3 thoughts on “Oracle Apex: Creating On/Off Toggle Switch Using HTML,CSS and JS”

  1. 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

  2. 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

    1. Have no idea. You should ask this question on orclqa.com then maybe other members would be able to help.

Comments are closed.