Skip to main content

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

Printing Page Numbers in RTF Template [Oracle BI Publisher]

Here I am giving an example to print the page numbers dynamically in the RTF (Rich Text Format) template. Step 1:  Go to page footer and copy and paste the below script. Page |  <?fo:page-number?>  of  <?fo:page-number-citation:xdofo:lastpage-joinseq?> <fo:page-number> :   This is the object, which is used to represent the current page-number. <?fo:page-number-citation:xdofo:lastpage-joinseq?> :  This is the syntax, which is used to represent the total number of pages. Step 2:  Load the XML and preview the result. Output: That's it. References: fo:page-number Printing Page Number Code in Oracle XMLP RTF Template

Friendly URL: Redirect to Different Page after Login in Oracle APEX 20.1

Oracle has updated apex.oracle.com to APEX 20.1 which includes among other features the new Friendly URL option. Here i am giving an example to redirect to different page after login in Oracle APEX 20.1 [Friendly URL Enabled] Step 1: Define home page for each user in emp master table as below Step 2: To enable Friendly URL Syntax, follow below steps, 1) On the Workspace home page, click the App Builder icon. 2) Select an application (The Application home page appears). 3) From Application home page, you can access the Definition page in TWO ways: Click the Edit Application Properties button. From Shared Components:              1) Click Shared Components .              2) Under Application Logic, click Application Definition Attributes . The Definition page appears. 4) Under Properties, configure the Friendly URL s attribute: Click Apply Changes to save your ch...

Save Selected Interactive Grid Records into a Collection - Oracle APEX

Here I am giving an example to save selected interactive grid records into a oracle apex collection. Step 1: Create a new blank page. Note: Mine was page 20. You will need to update reference to " P20 " with your page number if it's different. Step 2: Create a new interactive grid report region to the page using below query. Set Static Id "EmpDetails" to the region. SELECT  *     FROM   ( SELECT  emp . empno ,                emp . ename ,                emp . JOB ,                dept . dname department ,                dept . loc  LOCATION ,                mgr . ename  ...