how to configure date dropper plugins in Oracle Apex || 10 Minute Code

Dynamically effect using CSS in oracle apex item

1. Page >  CSS (inline) Paste view effect

.t-Form-inputContainer input[type="text"], .t-Form-inputContainer input.text_field,
.t-Form-inputContainer input.password, .t-Form-inputContainer textarea.textarea,
.t-Form-inputContainer input.datepicker, .t-Form-inputContainer span.display_only,
.t-Form-inputContainer input.popup_lov, .t-Form-inputContainer select,
.u-TF-item--text, .u-TF-item--textarea, .u-TF-item--datepicker, .u-TF-item--select {
    width: 100px;
    box-sizing: border-box;
    border: 5px solid #ccc;
    border-radius: 10px;
    font-size: 16px;
    background-color: white;

    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}

Apex Details

1. Create Scroll Top/Down/Right/Left for a Report in Oracle Apex

1. First goto Report Attribute
2. Goto Heading and Fixed to: Region
3. Then set a suitable Maximum Report Height.
4.Then goto pagination and set pagination type: Row Ranges X to Y Of Z to showing report next button.


2. Add button beside Oracle Apex Item
>> Item Post Text or Item Pre Text

<button type="button">
<a class="active" href="f?p=&APP_ID.:54:&SESSION.::DEBUG.::::#openModel">Followup</button>


3. Sample scott schema

C:\Oracle\app\OracleHomeUser\product\12.2.0\dbhome_1\rdbms\admin\utlsampl.sql

last date of year, first day of year, first friday of year, second friday of year in oracle sql

select add_months (trunc (sysdate, 'year'), 12) - 1 "last date of year"

from dual;

select trunc (sysdate, 'year') "first day of year" from dual;

select next_day (trunc (sysdate, 'year'), 'friday') "first friday of year"

from dual;

select next_day (next_day (trunc (sysdate, 'year'), 'friday'), 'friday')

"second friday of year"

from dual;

how many way image show in oracle apex 18.2 report

1. size wise image report

select "ROWID",
"ID",
'<img src="'||apex_util.GET_BLOB_FILE_SRC('P21_IMAGE',ROWID)
 ||'" height="100px" width="100px"' "IMAGE",
"MIMETYPE",
"FILENAME",
"LASTUPDATE"
from "#OWNER#"."TEST_IMAGE"

2. long report orginal

select "ROWID",
"ID",
'<img src="'||APEX_UTIL.GET_BLOB_FILE_SRC('P21_IMAGE',ROWID)||'"/>'   "IMAGE",
"MIMETYPE",
"FILENAME",
"LASTUPDATE"
from "#OWNER#"."TEST_IMAGE"

3. default report image IR

select "ROWID",
"ID",
dbms_lob.getlength("IMAGE") "IMAGE",
"MIMETYPE",
"FILENAME",
"LASTUPDATE"
from "#OWNER#"."TEST_IMAGE"

4.

select "ROWID",
"ID",

decode(nvl(dbms_lob.getlength(IMAGE),0),0,null,
'<img alt="'||apex_escape.html_attribute(ID)||'" title="'||apex_escape.html_attribute(ID)
||'" style="border: 4px solid #CCC; -moz-border-radius: 4px; -webkit-border-radius: 4px;"'
  ||'src="'||apex_util.get_blob_file_src('P3_IMAGE',ROWID)||'" height="150" width="200" />')
"IMAGE",

"MIMETYPE",
"FILENAME",
"LASTUPDATE"
from "#OWNER#"."TEST_IMAGE"


5.  Circle / Squre Image
/*
decode(nvl(dbms_lob.getlength(PIC),0),0,null,
'<img alt="'||apex_escape.html_attribute(EMP_ID)||'" title="'||apex_escape.html_attribute(EMP_ID)
||'" style="border: 4px solid #CCC; -moz-border-radius: 4px; -webkit-border-radius: 4px;"'
  ||'src="'||apex_util.get_blob_file_src('P16_PIC',ROWID)||'" height="50" width="60" />')
"IMAGE"  --square image
*/
decode(nvl(dbms_lob.getlength(PIC),0),0,null,
'<img alt="'||apex_escape.html_attribute(EMP_ID)||'" title="'||apex_escape.html_attribute(EMP_ID)
||'" style="border: 4px solid #CCC; -moz-border-radius: 50%; -webkit-border-radius: 50%;"'
  ||'src="'||apex_util.get_blob_file_src('P16_PIC',ROWID)||'" height="50" width="60" />')
"IMAGE"

Region Image Show and Zoom in or out in oracle apex

1. Create a Blank Page 
2. Create first Region Name Image Browse & Create a Item P22_Image & Type File Browse.
3. Create second Region Name Image Show
4. Go Page HTML HEADER &Paste[This code reading the url where u browse image] JavaScript Function

<script>
function readURL(input) {
 if (input.files && input.files[0])
 {
 var reader=new FileReader();
 reader.onload = function(e){
 $('#myImg')
 .attr('src',e.target.result);
 };
 reader.readAsDataURL(input.files[0]);
 }
}

</script>

5. Go to second region Image Show and find out SOURCE option TEXT.  here write the code.
This code is for show the image with  zoom and zoom out. here is two javascript function and two class of css.


<head>
<script>

function zoom(){
 var divlClass=$('#myDiv').attr('class');
 if (divlClass==="ex"){
 $('#myDiv').css('cursor','zoom-in');}else
 if ( divlClass=== "exZoom" ) {
 $('#myDiv').css('cursor','zoom-out');}
 }


function my_class(){
 var divlClass= $('#myDiv').attr('class');
 if(divlClass=== "ex"){
 $("#myDiv").removeClass("ex");
 $("#myImg").removeClass("ex");
 $("#myDiv").addClass("exZoom");
 $("#myImg").addClass("exZoom");} else
 if(divlClass==="exZoom"){
 $("#myDiv").removeClass("exZoom");
 $("#myImg").removeClass("exZoom");
 $("#myDiv").addClass("ex");
 $("#myImg").addClass("ex");}
 }
 </script>

    <style>
    .ex
    {
    height:120px ;
    width:150px;
    padding:2px ;
    }
    .exZoom
    {
    height:1000px;
    width:1000px;
    padding:0px;
    }

    </style>
    </head>
    <div align="center">
    <div id="myDiv" class="ex">
    <img id="myImg" class="ex" onmouseover="zoom();" onClick="my_class(); zoom();" src="#" alt="" />

    </div> </div>

6. Go to the first region and the item P22_Image Click on the item and Find     out CUSTOM ATTRIBUTE and write the code.

onchange="readURL(this);" onload="readURL(this);"

How to set the column width of Globally all Classic /IR Report in Oracle Apex

#  Report Column (only column): 

1. Column Formatting > HTML Expression
 <span style="display:block; width: 200px">#COLUMN_NAME#</span>

2. Column Formatting > HTML Expression
<span><div style="overflow:auto; overflow-x:hidden; height: 150px; width: 150px;">#COLUMN_NAME# </span>


# Globally(all page in application):

    Go to Theme Roller Custom CSS Paste table , th , td {white-space : nowrap}



--------------------------------------------------------------------------------------------------------------------------

What Is the Tag?

The <td> tag, or "table data" tag, creates table cells within a table row in an HTML table. This is the HTML tag that contains any text and images. Basically, this is the workhouse tags of your table. The tags will contain the content of the HTML table.

What Is the Tag

The <th> tag, or "table header", is similar to the <td> in many ways. It can contain the same kind of information (although you wouldn't put an image in a <th>), but it defines that specific cell as a table header.

Most Web browsers change the font weight to bold and center the content in a cell. Of course, you can use CSS styles to make those table headers, as well as the contents of your tags, look any way that you would like them to look on the rendered webpage.

What is APEX_APPLICATION_FILES

In File Browse item, the files we upload are stored in a table called wwv_flow_file_objects$. 

Every workspace has access to this table through a view called APEX_APPLICATION_FILES.

How to install and uninstall Oracle Apex 18.2

--Download apex

https://www.oracle.com/technetwork/developer-tools/apex/downloads/index.html

Enter user-name: sys as sysdba
Enter password:

--check version

SQL&gt; select version from dba_registry where comp_id='APEX';

VERSION
------------------------------
18.2.0.00.12

Install Apex 18.2
cmd
cd C:\Apex\apex_18.2\apex
sqlplus

(* Connect to SQL*Plus as the SYS user and run the "apexins.sql" script, specifying the relevant tablespace names and image URL.
 * Note: The above script create some SCHEMA on Database, you can test by querying View ALL_USERS on  SQLPlus)

cmd
cd C:\Apex\apex_18.2\apex

sqlplus

sys as sysdba/passwwd

@apexins.sql sysaux sysaux temp /i/

--take time

--Change Password
(* Once complete, change the admin password by running the "apxchpwd.sql" scripts as the SYS user
 * Password must contain at least one punctuation character. For example: =_-*$# etc)
@apxchpwd.sql

user     : orclapex/Admin
Password : $Abcd_1234

(* Embedded PL/SQL Gateway (EPG) Configuration
 * The images in an Oracle XML DB HTTP Server with the embedded PL/SQL gateway installation are in the XML DB repository.
   Updating the images is accomplished by running the SQL Script apxldimg.sql)

@apxldimg.sql C:\Apex\apex_18.2

--take time
(* Run the "apex_epg_config.sql" script, passing in the base directory of the installation software as a parameter.)

@apex_epg_config.sql C:\Apex\apex_18.2

--take time

Enter user-name: sys as sysdba
Enter password:

ALTER USER ANONYMOUS ACCOUNT UNLOCK;

SELECT DBMS_XDB.gethttpport FROM DUAL;


EXEC DBMS_XDB.sethttpport(8080);

Commit;

http://localhost:8080/apex/apex_admin


Uninstall 

Enter user-name: sys as sysdba
Enter password:

--UNINSTALL ORACLE APEX from Databse

@apxremov.sql

-- again check

SQL&gt; select version from dba_registry where comp_id='APEX';

no rows selected

how to Format wise update in oracle database

select * from project_requirement where req_date='02/01/19'
update project_requirement set req_date=to_date(to_char(req_date,'DD/MM/RR'),'DD-MON-RR') where req_date='02/01/19'


select req_date from project_requirement_copy1 where req_date='02/01/19';
select to_date(req_date,'dd/mm/rr') from project_requirement_copy1 where req_date='02/01/19';
select req_date from project_requirement_copy1 where req_date='02-JAN-19';
select to_char(to_date(req_date,'dd/mm/rr'),'dd-mon-rr') from project_requirement_copy1 where  req_date='02/01/19';

update project_requirement_copy1
set  req_date=to_char(to_date(req_date,'dd/mm/rr'),'dd-mon-rr') where req_date='02/01/19';

select * from project_requirement_copy1  where req_date='25/1/19';

select SUBSTR(req_date, 1, 2)||''||SUBSTR(req_date, 3, 3)||''||SUBSTR(req_date, 6, 3) from project_requirement_copy1 where req_date='02/01/19';

--02/01/19

select req_date from PROJECT_REQUIREMENT_COPY1;
select to_date(req_date,'DD/MM/RR') from PROJECT_REQUIREMENT_COPY1 where req_date=SUBSTR(req_date, 1, 2)||''||SUBSTR(req_date, 3, 3)||''||SUBSTR(req_date, 6, 3);

select req_date from PROJECT_REQUIREMENT;
update PROJECT_REQUIREMENT set req_date=to_date(req_date,'DD/MM/RR') 
where req_date=SUBSTR(req_date, 1, 2)||''||SUBSTR(req_date, 3, 3)||''||SUBSTR(req_date, 6, 3);

select count(req_date) from PROJECT_REQUIREMENT_COPY1 where req_date=SUBSTR(req_date, 1, 2)||''||SUBSTR(req_date, 3, 3)||''||SUBSTR(req_date, 6, 3);

select req_date from PROJECT_REQUIREMENT_COPY1 where req_date=SUBSTR(req_date, 1, 2)||''||SUBSTR(req_date, 3, 4)||''||SUBSTR(req_date, 6, 3);

select SUBSTR(req_date, 1, 2)||''||SUBSTR(req_date, 3, 4)||''||SUBSTR(req_date,7, 3)  from PROJECT_REQUIREMENT_COPY1 where req_date='01-MAR-21';

select req_date from PROJECT_REQUIREMENT_COPY1 where req_date= to_date(req_date,'DD-MON-RR');---SUBSTR(req_date, 1, 2)||''||SUBSTR(req_date, 3, 4)||''||SUBSTR(req_date,7, 3);
01-OCT-19



update PROJECT_REQUIREMENT a
set a.req_date1= (select b.req_date from PROJECT_REQUIREMENT b where a.project_no=b.project_no and a.req_no=b.req_no and project_no is not null) 

How to Master wise Detail Report view in Oracle Apex

Check / Click and view details data..........

1. interactive grid editable report Master Report

SELECT DEPARTMENT_ID,DEPARTMENT_NAME,MANAGER_ID,LOCATION_ID
FROM DEPARTMENTS

2. clasic Detail report with parameter


SELECT EMPLOYEE_ID,FIRST_NAME,LAST_NAME,EMAIL,PHONE_NUMBER,HIRE_DATE,
JOB_ID,SALARY,COMMISSION_PCT,MANAGER_ID,DEPARTMENT_ID
FROM EMPLOYEES
where instr(:P20_DEPARTMENT_ID, ':' ||DEPARTMENT_ID|| ':' ) > 0 ;

4. Page Items to Submit P20_DEPARTMENT_ID
5. Advance --> Static ID--> REPORTID Same As Dynamic action

6. Dynamic action in Selection Change [Interactive Grid]  Event & Execute JavaScript Action.

var i, selectedIds=":" ,
    model = this.data.model;

for ( i = 0; i < this.data.selectedRecords.length; i++ ) {
    if (i>=0) {
    selectedIds += model.getValue( this.data.selectedRecords[i], "DEPARTMENT_ID") + ":"; }  // Matching column (parameter)
    else
        {
    selectedIds += model.getValue( this.data.selectedRecords[i], "DEPARTMENT_ID"); // Matching column (parameter)
       }
}
$s("P20_DEPARTMENT_ID", selectedIds); //Master table Param
apex.region("REPORTID").refresh(); //



7. OK RUN....


 

How to upload Image from Form and Show it in Report on Oracle apex 18.2

1. First add a column for IMAGE  with BLOB type.
2. Create a report and it's data inserting form where there will be a FILE BROWSER type option for       Image.
3. Select on REPORT then go to Properties then Code Editor - SQL Query
4. Then Add [ dbms_lob.getlength(Column Name) img ] respective of IMAGE column.
5. And finally select on IMAGE column then goto properties and change type as DISPLAY IMAGE

at the end save and run.

how to auto reload / refresh a page in oracle apex

Page Properties --> HTML Header

<meta http-equiv="refresh" content="3" > 

Reload page after 3 second

how to favicon in oracle apex

1. upload logo in shareed componenet --> static aplication files
2. copy file reference
3. go to user interface attribute and paste Favicon HTML
<link rel="icon" href="#APP_IMAGES#logo.png" type="image/png" sizes="16x16">

4. run and view effecet

How to list APEX Dictionary views using S

I hope this isn’t old news but it seems that whenever someone talks about the APEX dictionary they talk about going into the development application and viewing them there. You can also access the dictionary using SQL. Here’s how:

select * from apex_dictionary where column_id=0

select distinct apex_view_name from apex_dictionary

    Of course you can remove the “where column_id=0” portion and get a list of the all the columns for the views etc.

$s, $v and $x functions to work with form items in Javascript in Oracle Apex

Page items and Javascript: More than $s and $v ...

Today, most APEX applications do contain more or less Javascript code. Javascript is particularly useful to make forms more interactive and
therefore more user-friendly. Most developers know and already have used the $s, $v and $x functions to work with form items in Javascript.
$s sets an item value, $v retrieves it and $x determines whether an item with the given name exists on the current page.
These functions are available in Application Express for a long time. And the names are so nicely short and quickly typed. But actually this is
shortcut syntax for the functions within the "apex.item" Javascript namespace. And within apex.item, there are more functions than you might
think.

Introduction to Oracle Apex

Introduction to Oracle Apex

1. Oracle Application Express(Oracle Apex) Formerly Called  HTML DB.  
2. It is a rapid web application development tool for oracle database.
3.  Oracle Apex is available by default in all oracle database installations.
4. Oracle Apex is developing fully interactive,web-based system for data that resides within oracle database.
5. Using only a web browser and limited programming experience, you  can develop professional applications that are both fast and secure.

How To Add Video into Login Screen in Oracle APEX

1. Go to 101 page and edit page:-

2.After edit you will be redirect on 101 Page Designer and go to shared components .

3.Upload  video into your static application files and get video url.

4.After these upload process again go to 101 page designer add put this code into your inline css.

5.Inline CSS Code is:-

  video{
    position:fixed;
    min-width:100%;
    max-width:100%
    width:auto;
    height:auto;
    z-index:-100;
  }

6.Last step this code paste into HTML Header:-

<video autoplay loop id="video-background" muted plays-inline>
    <source src=#APP_IMAGES#Test.mp4 type="video/mp4">
    </video> 

Enter Key Press Change Focus to Next Item like a Tab

$('body').on('keydown', 'input, select, textarea', function(e) {
    var self = $(this)
      , form = self.parents('form:eq(0)')
      , focusable
      , next
      ;
    if (e.keyCode == 13) {
        focusable = form.find('input,a,select,button,textarea').filter(':visible');
        next = focusable.eq(focusable.index(this)+1);
        if (next.length) {
            next.focus();
        } else {
            form.submit();
        }
        return false;
    }
});

Hide/Wrap/Alias Application Number and Page Number From URL of Oracle Apex Manually

In Oracle Apex URL have shown Application Number and Page Number. But it is not secure. So you can hide or wrap this Numbers. But you have to face little bit of difficulty or extra afford. Let’s see how we can wrap this Numbers step by step.

1. In Application level. Edit Application Properties >>Application Alias>> Wright A Alias  

    Example: F_139139

2

    In Page level. Go to Page Alias>> Wright A Alias     

    Example: PAGE_TEST

Now you can try the URL writing manually like this.

http://localhost:8080/apex/f?p=F_139139:PAGE_TEST:15674490024092:::::

3.  Now you have to wright the URL manually with Alias where’s from the page called. Like Navigation Menu/ Other pages.

f?p=F_139139:PAGE_TEST:&SESSION.:::::

Finally save the page and click on the menu. 

Keyboard Shortcut in Oracle Apex

----------------------------
| Keyboard Shortcut |
----------------------------

·         Create: Breadcrumb RegionCtrl+/, C, B

·         Create: Form RegionCtrl+/, C, F

·         Create: PageCtrl+/, C, P

·         Create: Page as CopyCtrl+/, C, C

·         Create: Shared ComponentCtrl+/, C, S

·         Display From HereCtrl+/, D, H

·         Display From PageCtrl+/, D, T

·         Go to Component ViewCtrl+/, O

·         Go to Dynamic ActionsCtrl+/, A

·         Go to Gallery ButtonsCtrl+/, G, B

·         Go to Gallery ItemsCtrl+/, G, I

·         Go to Gallery RegionsCtrl+/, G, R

·         Go to HelpAlt+F1

·         Go to LayoutCtrl+/, L

·         Go to MessagesCtrl+/, M

·         Go to Page Shared ComponentsCtrl+/, S

·         Go to ProcessingCtrl+/, P

·         Go to Property EditorCtrl+/, E

·         Go to RenderingCtrl+/, R

·         Keyboard ShortcutsAlt+Shift+F1

·         Navigate to Next PageAlt+Shift+Page Down

·         Navigate to Previous PageAlt+Shift+Page Up

·         Page SearchCtrl+/, F

·         RedoCtrl+Y

·         Restore/ExpandAlt+F11

·         SaveAlt+F7

·         Save and Run PageAlt+F8

·         Spotlight SearchCtrl+Quote

·         Toggle Hide Empty PositionsCtrl+/, D, E

·         UndoCtrl+Z

·         Utilities: AdvisorCtrl+/, U, A

////

Where Keys Action

Page Designer Grid Layout CTRL+ALT+D Display from here
Page Designer Grid Layout CTRL+ALT+T Display from page
Page Designer Alt+2 Go to Dynamic Actions
Page Designer Alt+9 Go to Gallery Buttons
Page Designer Alt+8 Go to Gallery Items
Page Designer Alt+7 Go to Gallery Regions
Page Designer Alt+5 Go to Grid Layout
Page Designer Alt+F1 Go to Help
Page Designer Ctrl+F1 Go to Messages
Page Designer Alt+4 Go to Page Shared Components
Page Designer Alt+3 Go to Processing
Page Designer Alt+6 Go to Property Editor
Page Designer Alt+1 Go to Rendering
Page Designer Alt+Shift+F1 List Keyboard Shortcuts
Page Designer Ctrl+Alt+F Page Search
Page Designer Ctrl+Y Redo
Page Designer Alt+F11 Restore/Expand
Page Designer Ctrl+Alt+S Save
Page Designer Ctrl+Alt+R Save and Run Page
Page Designer Ctrl+Alt+E Toggle Hide Empty Positions
Page Designer Ctrl+Z Undo
Page Designer with focus anywhere that has a context menu Shift+F10 or Context menu key Open context menu
Page Designer Grid Layout Gallery and Icon List in wizards Arrow keys Move selection
Page Designer Property Editor with focus on a group heading Up/Down Arrow keys Move to previous/next group
Page Designer Property Editor with focus on a group heading Home/End keys Move to first/last group
Page Designer Property Editor with focus on a group heading Left/Right Arrow keys or Enter or Space Expand or collapse the group
Page Designer With focus on any tab Arrow keys Select previous/next tab
Focus on a splitter handle Arrow keys Move splitter
Focus on a splitter handle Enter Expand or collapse splitter if supported by splitter
On pages that have a splitter Ctrl+F6 Move to next splitter
On pages that have a splitter Ctrl+Shift+F6 Move to previous splitter
Focus on any field with a (?) help icon Alt+F1 Open field help dialog
Focus on a field help dialog Alt+F6 Move focus back to field without closing dialog
Focus in any dialog Escape Close dialog
Any page, focus on region display selector "tabs" Arrow keys Select the previous/next tab
SQL Commands Ctrl+Enter Run the current command
Code Editor Ctrl+Z Undo
Code Editor Ctrl+Shift+Z Redo
Code Editor Ctrl+F Find
Code Editor Ctrl+Shift+F Replace
Code Editor with focus in find field Up/Down Arrows Find previous/next instance
Code Editor Ctrl+Space Auto complete when available
Code Editor Alt+F6 Leave code editor and go to next tab stop
Code Editor Alt+Shift+F6 Leave code editor and go to previous tab stop

Unblock picture downloads for all messages in Ms Outlook

Unblock picture downloads for all messages:

1. Click File.

2. Click Options.

3. Click Trust Center.

4. Under Microsoft Outlook Trust Center, click Trust Center Settings.

5. Uncheck the Don't download pictures automatically in HTML e-mail messages or RSS items check box.