Saturday, 7 October 2017

APEX PROFILE MENU

Let's start

1- Create a custom Report Template using Named Column (row template)

- add in Row Template 1 the below Code

</span>

<a href="#EDIT_PROFIL#" class="a-Header-accountDialog-editProfile a-Menu-item a-Menu-label" id="EDIT_PROFILE_LINK">Edit Profile</a>

</div>

<span class="a-Header-dialogText a-Header-dialogName">#FIRSTNAME# #LASTNAME#</span>

<span class="a-Header-dialogText a-Header-dialogUsername">#EMAIL#</span></div>

Workspace</span><span class="a-Header-dialogValue">#WORKSPACE#</span></div>

</div>

2- Create your Inline Dialog in Page 0

3- Add to the Inline Dialogthe below Sql Query. You can call direct the Data for the Database

Add in your inline region a Static ID. Example exitpopup_bg

Create a DA On Page Load

Action: Javascript

$("#exitpopup_bg").dialog({

autoOpen: false,

modal: false,

dialogClass: 'PROF_DID'

});

/* Close when click Outside the Dialog*/

$('html')

.bind(

'click',

function(e) {

if ($('#exitpopup_bg').dialog('isOpen') && !$(e.target).is('.ui-dialog, a') && !$(e.target).closest('.ui-dialog').length && !$(e.target).is('.image_icon')&&!$(e.target).is('.ui-dialog-titlebar-close')) {

$('#exitpopup_bg').dialog('close');

$('.image_icon').removeClass('et');

$('.image_icon').addClass('st');

}

);

4- Add the below Css to make the Profil Menu Beautiful and at the Top Right of the Page

:focus {

outline: none !important

}

.PROF_DID .t-DialogRegion-buttons{

background-color: #FBFBFB;

}

.t-Button.t-Button--header:active, .t-Button.t-Button--header:focus:active {

background-color: rgba(0, 0, 0, 0) !important;

}

.t-Button.t-Button--header:focus:before, .t-Button.t-Button--header:active:focus:before {

box-shadow: none !important;

}

.t-Button.t-Button--header:hover {

background-color: rgba(0,0,0,0);

box-shadow: none !important;

}

.PROF_DID.ui-widget.ui-dialog {

right:0px !important;

left:initial !important;

float:right !important;

top:47px !important;

border-radius:.4rem !important;

box-shadow:rgba(0,0,0,.1) 0 0.4rem 1.6rem !important;

}

.PROF_DID.ui-dialog{

width:320px !important;

height:260px !important;

}

#exitpopup_bg{

height:260px !important;

}

.PROF_DID.ui-dialog .ui-dialog-titlebar {

background-color: #ffffff;

border-bottom: 1px solid rgba(0, 0, 0, 0.05);

display: none;

}

.a-MediaBlock.a-Menu-content {

background: none;

border: none;

box-shadow: none;

}

.a-Header-accountDialog .a-MediaBlock-graphic {

margin-right: 16px;

}

.a-MediaBlock-graphic {

float: left;

margin-right: 8px;

}

.a-Header-accountDialog .a-Header-userPhoto--large {

background-color: #F8F8F8;

}

.a-Header-userPhoto {

box-shadow: 0 0 0 1px #B0B0B0 inset;

}

.a-Header-userPhoto {

display: inline-block;

width: 24px;

height: 24px;

border-radius: 100%;

vertical-align: top;

overflow: hidden;

position: relative;

}

.a-Header-accountDialog.a-Menu .a-Menu-label {

padding: 0;

}

.a-Header-accountDialog.a-Menu .a-Menu-item {

display: inherit;

color: inherit;

line-height: inherit;

float: none;

}

.a-Header-accountDialog-editProfile.a-Menu-item.a-Menu-label {

text-align: center;

}

.a-Header-accountDialog-editProfile.a-Menu-item.a-Menu-label, .a-Menu-content .a-Header-dialogLink.a-Menu-item .a-Menu-label {

display: block;

margin-top: 4px;

color: #146fb8;

}

.a-Header-accountDialog-editProfile.a-Menu-item.a-Menu-label, .a-Header-dialogLink.a-Menu-item .a-Menu-label {

font-size: 11px;

line-height: 16px;

padding: 0;

border-radius: 2px;

transition: none;

}

.a-Header-accountDialog .a-MediaBlock-content {

padding: 4px 0;

}

.a-Header-userPhoto--large, .a-Header-userPhoto--large .a-Icon, .a-Header-userPhoto--large img {

width: 64px;

height: 64px;

}

.a-Header-dialogName {

font-weight: 300;

font-size: 20px;

line-height: 24px;

}

.a-Header-dialogText {

display: block;

line-height: 16px;

}

.a-Header-photoPlaceholder {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

border-radius: 100%;

box-shadow: 0 0 0 1px rgba(0,0,0,.15)inset;

}

.a-Header-accountDialog.a-Menu .a-Menu-item {

display: inherit;

color: inherit;

line-height: inherit;

float: none;

}

.a-Header-accountDialog.a-Menu .a-MediaBlock-content .a-Menu-item.a-Menu-label {

cursor: default;

}

.a-Header-dialogUsername {

font-size: 11px;

font-weight: 400;

}

.a-Header-dialogLabel, .a-Header-dialogUsername {

color: #777;

}

.a-Header-dialogLabel {

margin-top: 16px;

line-height: 10px;

font-size: 9px;

text-transform: uppercase;

display: block;

}

.a-Header-dialogValue {

font-size: 12px;

line-height: 16px;

}

.a-Header-dialogName, .a-Header-dialogValue {

color: #404040;

}

.profile-icon {

background-color: transparent;

background-repeat: no-repeat;

background-size: 24px;

display: inline-block;

height: 24px;

width: 24px;

vertical-align: baseline;

cursor: pointer;

border-radius: 100%;

margin-right: 5px;

}

5- Add class to your Navigation Bar Item. Example image_icon st

6- Add Custom Templete

7- Create a DA On Click to Open The Menu( Inline Dialog)

- Event: Click

- Selection Type: Jquery Selector

- Jquery Selector: .image_icon.st ( Remember that we add this class before in the Navigation Bar Item)

- Event Scope: Dynamic

- Action: Javascript

openModal("exitpopup_bg");

$('.image_icon').removeClass('st');

$('.image_icon').addClass('et');

8 Create a DA On Click to CloseThe Menu( Inline Dialog)

- Event: Click

- Selection Type: Jquery Selector

- jquery Selector: .image_icon.et

- Event Scope: Dynamic

- Action: Javascript

closeModal("exitpopup_bg");

$('.image_icon').removeClass('et');

$('.image_icon').addClass('st');

9- Set Navigation Bar Item Target

URL: https://apex.oracle.com/pls/apex/f?p=131188:1:7582634102136:::::

Wednesday, 4 October 2017

Custom Dial Gauge Anychart in Oracle Apex

Add Custom XML

<anycart>
<settings>
<animation enabled="true">
</animatin></settings>
<margin all="5">
<gauges>
<gauge>
<chart_settings>
<title enabled="false">
<text><![CDATA[11]]></text>
<font family="Arial" size="20" bold="true" color="#494949"/>
</title>
<chart_background enabled="false">
<border enabled="false">
</border></chart_background>
</chart_settings>
<circular height="60" width="100" x="0" y="0">
<axis radius="37" size="3" start_angle="84" sweep_angle="192">
<scale major_interval="1" maximum="100" minimum="90" minor_interval="0.2">
<labels align="Outside" padding="6">
<format>{%Value}{numDecimals:0}%</format>
<span bold="true" family="Arial" style="color: #494949;">
</span></labels>
<scale_bar>
<fill color="#292929">
</fill></scale_bar>
<major_tickmark align="Center" length="10" padding="0">
<minor_tickmark enabled="true" length="5">
<color_ranges>
<color_range align="Inside" end="100" end_size="10" padding="6" start="88" start_size="10">
<fill type="Gradient">
<gradient>
<key color="#870101">
<key color="Yellow">
<key color="Green">
</key></key></key></gradient>
</fill>
<border color="Black" enabled="true" opacity="0.4">
</border></color_range>
</color_ranges>
</minor_tickmark></major_tickmark></scale></axis>
<frame></frame>
<inner_stroke enabled="false">
<outer_stroke enabled="false">
<background>
<fill type="Gradient">
<gradient angle="45">
<key color="#FDFDFD">
<key color="#F7F3F4">
</key></key></gradient>
</fill>
<border color="#A9A9A9" enabled="true">
</border></background>
<effects enabled="false">

<pointers>
<pointer value="93">
<label enabled="true">
<position placement_mode="ByPoint" x="50" y="15">
<format><![CDATA[{%Value}{numDecimals:2}%]]></format>
<span bold="true" family="Arial" style="color: #494949;"> *
<background enabled="false">
</background></span></position></label>
<needle_pointer_style point_radius="3" point_thickness="5" thickness="7">
<fill color="Rgb(230,230,230)">
<border color="Black" opacity="0.7">
<effects enabled="true">
<bevel distance="2" enabled="true" highlight_opacity="0.6" shadow_opacity="0.6">
<drop_shadow blur_x="1" blur_y="1" distance="1" enabled="true" opacity="0.4">
</drop_shadow></bevel></effects>
<cap>
<background height="12" width="12">
<fill type="Gradient">
<gradient angle="45" type="Linear">
<key color="#D3D3D3">
<key color="#6F6F6F">
</key></key></gradient>
</fill>
<border color="Black" opacity="0.9">
</border></background>
<effects enabled="true">
<bevel distance="2" enabled="true" highlight_opacity="0.6" shadow_opacity="0.6">
<drop_shadow blur_x="2" blur_y="2" distance="1.5" enabled="true" opacity="0.4">
</drop_shadow></bevel></effects>
</cap>
</border></fill></needle_pointer_style>
<animation duration="1.5" enabled="true" interpolation_type="Bounce" start_time="1">
</animation></pointer>
</pointers>
</effects></outer_stroke></inner_stroke></circular>
</gauge>
</gauges>
</margin></anychart>

https://apex.oracle.com/pls/apex/f?p=131188:4:115850357468374:::::

Friday, 15 September 2017

Enable disable LOV

$('#P101_USERNAME').css("pointer-events","none");
$('#P101_USERNAME').css("pointer-events","auto");
apex.item("P101_USERNAME").disable()
apex.item("P101_USERNAME").enable()

Tuesday, 25 July 2017

WEB SOCKETS IN ORACLE APEX

https://www.dropbox.com/s/dyulnb1qqv7r1gr/Websocket-s.rar?dl=0

1) First Copy the node_modules.rar file in C: / Drive and extract the file there.
2) Install node.js in your Local Computer.
3) Now open and type this following Command to check the Connection to node.js server :
C:\Users\Administrator>cd/
C:\>cd node_modules
C:\node_modules>node server.js
Mon Oct 10 2016 15:46:47 GMT+0500 (Pakistan Standard Time) Server is listening on port 1449
4) Now connect to sys as sysdba and run following Process :

begin
dbms_network_acl_admin.create_acl

( acl => 'utlhttp.xml'
, description => 'Http ACL'
, principal => 'APEX_050000'
, is_grant => true
, privilege => 'connect'
, start_date => null
, end_date => null
);
commit;
end;

begin
dbms_network_acl_admin.assign_acl
( acl => 'utlhttp.xml'
, host => '127.0.0.1'
, lower_port => 1499
, upper_port => 1499
);
commit;
end;

5) First of all you will have to have some sort of procedure on the database that will sent a message to your server.js …. Remember this procedure should only be run with schema you are working on. The Procedure is as follows:

Create or replace procedure push (p_text in varchar2) is
l_clob clob;
begin
l_clob := APEX_WEB_SERVICE.MAKE_REST_REQUEST(p_url => 'http://127.0.0.1:1449',
p_http_method => 'POST',
p_body => '{"message":"' ||
p_text || '"}');
end;
6) Open the particular form of page and create page process and write following pl/sql code :
Begin
Push(p_text => ‘REFRESH’);
End;
7) Go to your report region and assign static id FOR example : STATIC_ID_OF_REGION and write following code in execute when page loads:
$(function(){
window.WebSocket = window.WebSocket || window.MozWebSocket;

if (!window.WebSocket) {
console.log('Sorry websockets');
}
else {
var connection = new WebSocket('ws://localhost:1449');
/*server name */
connection.onerror = function (error) {
console.log( 'Sorry, but there is some problem with your
connection or the server is down.');
};
connection.onmessage = function (message) {
console.log(message.data);
try {
var json = JSON.parse(message.data);

if (json.message=='REFRESH') {
jQuery('#STATIC_ID_OF_REGION').trigger('apexrefresh');
}
else {
console.log(json.message);
}

}
catch (e) {
console.log('Thisnot valid JSON: ' + message.data);
}
};
}
});

8) Open Windows Firewall and advance setting
Create Inbound Rules, Create Rule for Port "1449" if web socket is running on 1449 and "allow connections"
3. Give Rule Name "web socket Port" and save

Now you can access the web socket Port from another PC

and that’s it.
Mind you, this is just one implementation, but you can push every database event to the clients page.

You can also idea on the following page
https://emoracle.wordpress.com/2012/04/11/using-websockets-in-apex-for-automatic-refresh-with-nodejs/

Thursday, 20 July 2017

Oracle Apex Via HTTPS

http://tomcat.apache.org/download-70.cgi

Download and install Apache Tomcat

keytool: we will generate secure key using keytool command – which is key and certificate management tool.

Open Command Prompt
Command:
"[Java Path]\bin\keytool" -genkey -alias tomcat -keyalg RSA -keystore “D:\mykey.keystore”
So replace your path accordingly
Change server.xml file which is located at <tomcat_home>/conf/ folder
Search SSLEnabled="true"

Uncomment the SSL Connector Configuration

When you are done your Connector Should look something like this:

<Connector port="8443" protocol="org.apache.coyote.http11.Http11Protocol"

maxThreads="150" SSLEnabled="true" scheme="https" secure="true"
keystoreFile="D:\mykey.keystore"
keystorePass="123456"
clientAuth="false" sslProtocol="TLS" />

Save the changes to server.xml
Restart tomcat service

---------------------------------------------------------------------------------------------------------
Change Oracle Apex port
java -jar ords.war standalone --port 8443
Now Copy Image folder from apex folder and Paste it into C:\Apache Software Foundation\Tomcat 7.0\Webapps\i
Note : i is a folder name you have to create it into C:\Apache Software Foundation\Tomcat 7.0\Webapps
Now Copy ords.war from ords folder and past it into C:\Apache Software Foundation\Tomcat 7.0\Webapps
Restart tomcat service
Now hit HTTPS secure URL again to check you page loaded successfully: https://localhost:8443/f?p=4500

Wednesday, 4 January 2017

How to Change Label and Region Back ground Color

Change Label Color:
Label text
<span style="color:white">Enter Name</span>

Change Region Back ground Color

Custom Attribute
style= " background-color:#212121;";

Monday, 12 December 2016

Moving through tabular forms using the Up/Down arrow keys

Create a that function in the HTML Header

<script type="text/javascript">
var start;
function load(){
console.log(document.getElementsByClassName("t-Report-report").length);
start = document.getElementsByClassName("t-Report-report")[0];
start.onkeydown = changePosition;
}

function changePosition(event){
var currRow = event.target.parentElement.parentElement.rowIndex, currCell = event.target.parentElement.cellIndex;
switch(event.keyCode){
case 38 : start.getElementsByTagName("tr")[currRow - 1].getElementsByTagName("td")[currCell].getElementsByTagName("input")[0].focus();
break;
case 40 : start.getElementsByTagName("tr")[currRow + 1].getElementsByTagName("td")[currCell].getElementsByTagName("input")[0].focus();
break;
case 39 : start.getElementsByTagName("tr")[currRow].getElementsByTagName("td")[currCell + 1].getElementsByTagName("input")[0].focus();
break;
case 37 : start.getElementsByTagName("tr")[currRow].getElementsByTagName("td")[currCell - 1].getElementsByTagName("input")[0].focus();
break;
}
}
</script>

Page HTML Body Attribute Call Function

onload="load()"

Example:

https://apex.oracle.com/pls/apex/f?p=131188:2:101084693213236::NO:::