New Plugin: Password strength

Password Strength

Hello, in this post i will present you my new plugin Password strength.
This Plugin add password strength indicator on Password item.

How to Use

Create dynamic action on Page load

• as event choose Password Strength
• as Affected Elements choose items on which you want to have strength indicator

and you are ready to run page and to check you password strength

Preview

Here is the link to a working demo:  

demo username/password: demo/demo

How to get it

Visit apex.world plug-in page

New Plugin: Image Gallery

Image Gallery Pluign

   Image Gallery is plugin to display images based on prettyPhoto javascript library.

  How to Use

  Create a Region, choose Type "Image Gallery[Plug-In]" and in Region source enter following code:

select 'f?p=&APP_ID.:0:&APP_SESSION.:APPLICATION_PROCESS=GETFILE:::FILE_ID:'||
your_image_id SHOW_IMAGE,
your_image_name FILENAME,
your_image_id IMAGE_ID,
 APEX_UTIL.PREPARE_URL(
    p_url => 'f?p=' ||:APP_ID || ':4:'||:APP_SESSION||'::NO::P4_ID:'||your_image_id,
    p_checksum_type => 'SESSION') IMAGE_URL
from your_table

  Create Application Process onDemand GETFILE with following code:

    begin

    for c1 in (select *

                 from your_table

                where id = :FILE_ID) loop

        --

        sys.htp.init;

        sys.owa_util.mime_header( c1.mime_type, FALSE );

        sys.htp.p('Content-length: ' || sys.dbms_lob.getlength( c1.content));

        sys.htp.p('Content-Disposition: attachment; filename="' || c1.filename || '"' );

        sys.htp.p('Cache-Control: max-age=3600');  -- tell the browser to cache for one hour, adjust as necessary

        sys.owa_util.http_header_close;

        sys.wpg_docload.download_file( c1.content );

    

        apex_application.stop_apex_engine;

    end loop;

    end;

 
  Create Application Item FILE_ID where we store ID of image

Options 

1. Style

   you can choose different style of prettyPhoto image Gallery


2. Autoplay slideshow

   with or without auto slideshow

3. Animation speed

4. Slideshow

    Duration of slideshow in miliseconds

5.Link icon   Icon for random link

How to get it 

Visit apex.world plug-in page

Preview

Here is the link to a working demo:  

demo username/password: demo/demo

New Plugin: Item Spinner

Item-Spinner

Item Spinner is item based on JQuery UI widget spinner integrated with mousewheel features. its allow you to enter value, choose value with click on arrows or choose your value with mousewhell functionality. You can choose 4 different items type

1. Standard - standard number item
2. Decimal - with decimal numbers
3. Time - Hours spinner
4. Currency

How to Use

Create a Page Item
Choose Type "Item Spinner[Plug-In]"

How to get it 

Visit apex.world plug-in page

Options

Every item type has his own options

standard has this options

min value - set your minimal value
max value - set your maximal value
step - value with which you increase or decrease your current item value

Decimal has this options

min value - set your minimal value
max value - set your maximal value
step - value with which you increase or decrease your current item value
decimal places - number of decimal places
Decimal separator - comma or dot

Time has this option

Clock - 12 Hour or 24 Hour

Currency has this opitons

min value - set your minimal value
max value - set your maximal value
step - value with which you increase or decrease your current item value
Currency - you can choose different typs of currency ( US Dolar, EURO, ...)

Preview

Here is the link to a working demo:  

demo username/password: demo/demo

Oracle Apex and Google Maps

Hi all,

Recently I searched for integration Oracle APEX and Google Maps and found very good blog post from Farzad Soltani on Introduction to Implementing Google Maps in Oracle APEX Applications but that was not what I really need. So I continued to search for solution for "Searching the Address and get results on the Map" and I found it on Maps JavaScript API where you can find other solutions regarding Google maps. By implementation of Integration Google maps with Oracle APEX I followed some steps from Farzad Blog, but here I will explain step by step how I did that.

1. I Created Static Region with static ID : googlemap and placed following code in its
    source:

 <script>  
 var map;  
  function initMap() {  
      map = new google.maps.Map(document.getElementById('googlemap'), {  
          center: {  
            lat: -34.397,  
            lng: 150.644  
            },  
          zoom: 15  
       });  
   var geocoder = new google.maps.Geocoder();  
     geocodeAddress(geocoder, map);  
  }  
  function geocodeAddress(geocoder, resultsMap) {  
     var address = document.getElementById('P2_ADDRESS').value;  
     geocoder.geocode({'address': address}, function(results, status) {  
      if (status === 'OK') {  
       resultsMap.setCenter(results[0].geometry.location);  
       var marker = new google.maps.Marker({  
        map: resultsMap,  
        position: results[0].geometry.location  
       });  
       var infoWindow = new google.maps.InfoWindow({  
           content: address  
        });  
       google.maps.event.addListener(marker, 'click', function () {  
           infoWindow.open(map, marker);  
       });  
      } else {  
       alert('Geocode was not successful for the following reason: ' + status);  
      }  
     });  
    }  
 </script>  
 <script src="https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_APP_KEY&libraries=places&callback=initMap" async defer></script>  

as we can See, we have two JavaScript Function InitMap and geocodeAddress, initMap is for Map initialization and geocodeAddress is for searching address. In initMap we are calling function geocodeAddress in which you can find line of code where we get value from item P2_ADDRESS which we will create later.


In the end of Code, you can find the link 


https://maps.googleapis.com/maps/api/js?key=MY_GOOGLE_APP_KEY&libraries=places&callback=initMap

as Farzad in his blog explained

I have written MY_GOOGLE_APP_KEY. A Google API Key must be obtained and placed instead of MY_GOOGLE_APP_KEY.

In order to obtain a Google API Key, refer to https://console.developers.google.com/apis/credentials and get your hands on a KEY by signing up for a free one using your Gmail account.

Second thing in link which is also very important is callback function, where we calling our JavaScript function for map initialization in our example initMap


2. Add custom CSS in inline CSS Page field

  #googlemap {           
     height: 600px !important;         
  }  

3. Another Static Region with Page Item P2_ADDRESS type text and Region Button search

4. Dynamic action with event on Button click Search and actions 

    EXECUTE PL/SQL code

null;

Page Items submit: P2_ADDRESS

    EXECUTE JavaScript Code 

initMap();

Here is the link to a working demo of the method above :  

demo username/password: demo/demo


If You have any Question feel free to ask.

Till next time!

How to set hotkeys for buttons in Oracle Apex

Hi all,

I would like you to show how to implement hotkey for Buttons in Oracle Apex.

1. Create button and give Static Id to that button. For Example:
   
               
   
   
2. Click on Edit Page and in JavaScript Execute when Page Loads properties
    write following JavaScript code:
   
                 document.getElementById("back").accessKey = "c";
      
   
   
    
   and then save the changes. Action of button with static id "back" will be executed when we for example on Chrome press [ALT]  and "c" key
   
   Note: The shortcut varies from different browsers:
   
   

   IE, Chrome, Safari, Opera 15+: [ALT] + accesskey  

   Opera prior version 15: [SHIFT] [ESC] + accesskey  

   Firefox: [ALT] [SHIFT] + accesskey

How to use Font Awesome in Oracle Apex

I will show to you how to use Font Awesome icons in APEX on login page like this

1. At first you must download Font Awsome from page http://fortawesome.github.io/Font-Awesome/

2. Extract zip file into ..\images\themes\theme_xx\ (xx is number of theme that you use). In this example I use theme 26

3. Open css file of theme in my case that is 4_2.css from ..\images\themes\theme_26\css and put at the begining of  the code:

@font-face {
  font-family: 'FontAwesome';
  src: url('../font-awesome-4.2.0/fonts/fontawesome-webfont.eot?v=4.0.3');
  src: url('../font-awesome-4.2.0/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../font-awesome-4.2.0/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../font-awesome-4.2.0/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../font-awesome-4.2.0/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

4. Save the file and then go to your apex application and in page 101 definition go to CSS section inline field paste this code:


div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.text_field [type="text"] {
    position: relative;
}

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input{ font-family: 'FontAwesome'; } /* This is for the placeholder */

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.text_field:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.password[type="password"] {
    position: relative;
}

div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input{ font-family: 'FontAwesome'; } /* This is for the placeholder */


div#uLoginContainer section.uRegion div.uRegionContent table.formlayout td input.password:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f023";
}

5. Click on Apply changes and then open P101_USERNAME and put in "HTML Form Element Attributes" field this code: placeholder="&#\f023; Username"

6. Then you will do same step for P101_PASSWORD like step before, except you will put in "HTML Form Element Attributes" field this code: placeholder=" Password".
7. Click on apply changes and then run the page and you will get the result as in the image above.

If you have any questions feel free to ask!

My first post

Welcome to my blog! I will write about Oracle APEX and some tips and tricks how to develop good Oracle APEX application.

My name is Nihad Haskovic! I am 29 yeras old and I live in Stuttgart, Germany. Actually I came from Visoko small city near Sarajevo, Bosnia and Herzegovina. I am a software consultant at DB Systel GmbH. 

First experience with Oracle APEX I had back in 2007. Since then i developed a lot application in Oracle APEX. I have also experience in Oracle Forms, Oracle Reports, SQL and PL/SQL.