Press "Enter" to skip to content

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:

Vinish Kapoor

I am a full stack developer and writing about development. I document everything I learn and help thousands of people. foxinfotech.in is created, written, and maintained by me, it is built on WordPress, and hosted by Bluehost. Connect with me on Facebook, Twitter, GitHub and get notifications for new posts.

You may also like:

Comments are closed.