Universal Toggle Switch in Oracle APEX using HTML, CSS and JS


Here i am giving an example to create 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 checkbox is checked and 'N' if the checkbox is unchecked to a page item using JS.

Follow below steps to achieve this,

Step 1: Create Static Region and do copy and paste below code into source section.

HTML and CSS code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.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%;
}
</style>
</head>
<body>
<table>
   <tr>
   <td>
   <label for="toggleswitch">Download</label>
   </td>
      <td>
      <label class="switch">
  <input type="checkbox" id="toggleswitch" name="P7_TOGGLE_SWITCH" onclick="toggleswitchFunction()">
  <span class="slider round"></span>
</label>
      </td>
   </tr>
</table>
</body>
</html> 

Step 2: Create a hidden item as below.

Step 3: Do copy and paste below JS code into "Function and Global Variable Declaration" section as below,

JavaScript Code:

function toggleswitchFunction() {
  var checkBox = document.getElementById("toggleswitch");
  if (checkBox.checked == true){
    apex.item('P7_TOGGLE_SWITCH').setValue('Y');
  } else {
        apex.item('P7_TOGGLE_SWITCH').setValue('N');  
  }
}

Step 4: Create Button with submit action.

Step 5: Create PL/SQL procedure to store item values into table. Call the procedure, when you click on submit button.

The demo is here

That's it. Happy APEXing!!!...

Reference:

Comments

Popular posts from this blog

Highlight the cell of Interactive Report based on Search Criteria in Oracle APEX

Querying Data From Flat Files in Oracle

Number of Tables by The Number of Rows in Oracle Database

Save Selected Interactive Grid Records into a Collection - Oracle APEX

Highlight Data That Meet Certain Criteria in Oracle APEX Report

Return a Validation Message using JavaScript if the Oracle Application Express Item is Empty

Remove X (Close Mark) from Oracle APEX Modal Dialog

Display User Rating Icons Dynamically in Oracle APEX Report

Printing Page Numbers in RTF Template [Oracle BI Publisher]

Find Where Specific Table or View is Used in Oracle Database