Skip to main content

Posts

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;   cont...
Post a Comment
Read more

Move JSON data to a relational table using JSON_TABLE (Projecting Array Elements Using NESTED)

JSON_TABLE , introduced in 12.2, "enables the creation of an inline relational view of JSON content. The JSON_TABLE operator uses a set of JSON path expressions to map content from a JSON document into columns in the view. Once the contents of the JSON document have been exposed as columns, all of the power of SQL can be brought to bear on the content of JSON document."  Step 1:  Invoking a RESTful Style Web Service. Step 2:  First, we need to get the structure of the JSON response returned by apex_web_service.make_rest_request. I then formatted the JSON as below, Formatted JSON:  (Projecting Array Elements using NESTED) [  {     "state": "Andaman and Nicobar Islands",     "statecode": "AN",     "districtData": [       {         "district": "Nicobars",         "notes": "",         "active": 0,         ...
Post a Comment
Read more

Invoking a RESTful Style Web Service in Oracle APEX

The response can be an XML or text such as a comma separated response or JSON. The following is an example of MAKE_REST_REQUEST being used in an application process that is callable by AJAX. Code: declare   l_clob clob;   l_buffer         varchar2(32767);   l_amount         number;   l_offset         number; begin   l_clob := apex_web_service.make_rest_request(               p_url => ' https://api.covid19india.org/v2/state_district_wise.json ',               p_http_method => 'GET');     l_amount := 32000;     l_offset := 1;     begin         loop             dbms_lob.read( l_clob, l_amount, l_offset, l_buffer );             htp.p(l_buffer);     ...
Post a Comment
Read more

Flip Checkbox in Oracle APEX using HTML, CSS and JS

Here i am giving an example to create flip checkbox using HTML, CSS and JavaScript in Oracle APEX. In this example, we will create a flip checkbox 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> < style >     table  {    border-collapse:  separate ;    border-spacing:  0   5 px ;    }     . cmn-toggle {     position : absolute ;    margin- left : - 9999 px ;     visibility :  hidden ;    }     . cmn-toggle +  label  {    display:  block ;     position : relative...
Post a Comment
Read more

Change an item label dynamically in Oracle APEX 20.1

Step 1:  Create an Items as follows, Source Item: P2_PARTY_TYPE  Type:  Radio Group List of Values: Person - P; Organization - O; Agent - A; Vendor: V Affected Item: P2_PARTY (Don't give label name. Let it be blank) Step 2:  Create dynamic action as follows, Event =  Change Selection Type =  Item(s) Item(s) =  P2_PARTY_TYPE Condition =  (No Condition) True Action =  Execute JavaScript Code Fire On Page Load =  Yes Selection Type =  (Blank) Code =  (please copy and paste below JavaScript code) JavaScript Code: if ($v("P2_PARTY_TYPE")=='P') {     $("label[for=P2_PARTY]").text("First Name") } else if ($v("P2_PARTY_TYPE")=='O') {     $("label[for=P2_PARTY]").text("Organization") } else if ($v("P2_PARTY_TYPE")=='A') {     $("label[for=P2_PARTY]").text("Agent") } else if ($v("P2_PARTY_TYPE"...
5 comments
Read more

Menu Popup with Declarative List in Oracle APEX

Today i got a requirement, i have needed to add more buttons to a page. I was thinking that, instead of adding multiple buttons in a page, why can't we give them an action menu (as same as like IR Action Menu). Actually i had this requirement for my client. Here is an example. Step 1:  Create a List as follows, Navigation:  Shared Components => Lists (Under Navigation) => Create Step 2:  Create a List Region as follows, Type:  List Source: <Choose List from shared components> Static ID:  actions List Template:  Menu Popup Step 3:  Create a Button as follows, Button Template:  Text with Icon Hot: Yes CSS Classes:  class js-menuButton Icon:  fa-chevron-down Action:  Defined by Dynamic Action Static ID:  quicklinks Custom Attributes:  data-menu="actions_menu" Step 4:  Add below CSS in page CSS inline section if required. #quicklinks { border-radius : 5px; } The demo is  here That's it. Happy APEXing!!!.....
Post a Comment
Read more

GLOBAL COVID'19 Tracker Powered by Oracle APEX 20.1

Link:  https://apex.oracle.com/pls/apex/orclking/r/covid-19-tracker-global/home Description:   This application web based user friendly application to track global status for the corona virus outbreak.
Post a Comment
Read more