Application Express

به انجمن Oracle APEX (گروه کاربران اوراکل ایران) خوش آمدید.

همه چیز در پورتال شما در ارتباط با Oracle APEX می باشد. آیا شما یک مدیر APEX/ اپلیکیشن سرور یا توسعه دهنده APEX هستید؟ ما شما را تحت پوشش قرار داده ایم ِ آیا موضوع شما طراحی، تست، ابزار های جانبی، یا نحوه چگونگی استفاده از Oracle APEX می باشد؟ شما در جای مناسب هستید ماموریت ما این است که به شما یک پلتفرم بدهیم که بتوانید مبادله ایده ها، بهترین شیوه ها و فرصت ها را در پیشبرد اهداف خود عملی کنید.

اوراكل ای پكس اولین ابزار برای توسعه و پیاده سازی سیستم (اپلیكیشن) های تحت وب با SQL و PL/SQL می باشد.تنها با استفاده از یك مرورگر (Web browser) شما می توانید اپلیكیشن های وب حرفه ای با طراحی زیبا، بصورت Responsive، انجام عملیات و كنترل بر روی دیتابیس را بر روی دسكتاپ و موبایل ایجاد كنید. شما می توانید اپلیكیشن های خیلی بزرگ(سازمانی) و پیچیده و چند زبانه همانند Oracle Store را ایجاد كنید. اوراكل ای پكس درون دیتابیس اجرا شده و اجازه بزرگ شدن اندازه اپلیکیشن ها را در اجتماعات بزرگ اماكن پذیر می كند.

شعار اوراكل ای پكس

(پشتيبانی كامل، آماده برای محيط های سازمانی، بدون هزينه اضافی)

تازه ترین وبلاگ های کارشناسان این صنعت را بررسی کنید. برای بازدید از وبلاگ نویسنده بر روی عنوان کلیک کنید.

آیا می خواهید وبلاگ خود را در اینجا مشاهده کنید؟ متن درخواست خود را بفرستید

تقویم رویدادها

جلسه های آینده:

  • در تاریخ 1396/07/25
  • در تاریخ 1396/08/23



      مطالب بلاگ ها

      Preview Image before saveجمعه , 07 دی 1397 - Saeed Hassanpour

      This post is about how to preview image before save. Our customers wants to see what image was uploaded and next to save it so we read below instruction and we able to how implement this feature.

      Before start it it' better to read this post about Setter & Getter API in Oracle APEX because I've used that.

      Demo application: OAC

      Download files and sample application via APEX-PreviewImageBeforeSave

      Adding JS Files

      We need to upload js files via APEX-PreviewImageBeforeSave

      Now we should do something step by step

      This sample has two pages [5] for Manipulating data ,[6] for adding image.

      First of all, we add two buttons in front of item that we need to upload image in terms of subject at Page 5 according below images.

      The item in this page is P5_PRODUCT_NAME

      So add codes in Post text of Item.

      <a aria-label="Uploda image" class="a-Button a-Button--popupLOV" 
      href="&P5_TEMP_IMAGE." id="upload-img-pro" style="background-color: &P5_BUTTON_COLOR.;"
      title="upload image">
      <span aria-hidden="true" class="fa fa-file-image-o  fa-anim-flash 
      fam-25-percent fam-is-danger" style="color: red; font-size: 1.4rem; 
      vertical-align: top;"></span></a>
      <a aria-label="Clear" class="a-Button a-Button--popupLOV
      image-remove" href="javascript:void(0);" title="Delete image">
      <span class="fa fa-close"></span></a>         

      Create Upload Url when we click on upload image on page 5

      :P5_TEMP_IMAGE := apex_util.prepare_url (p_url => 'f?p='
      || :APP_ALIAS
      || ':6:'
      || :SESSION
      p_triggering_element => '$(''body'')'

      As I mentioned the first of blog we used some packages for manipulation of image file. Now we create a process for remove parameter the content of image when page loads.

      Purge Parameters:

      --remove parameters


      Add a new parameter of blob. the default sequences of array is 1 and we could setting several of values.

      APEX_PKG_PARAMS.setparamblob(p_param => empty_blob(),                                                           p_count_seq => 1);

      This process is for checking image file in order to change the color of upload button.

      l_filesize number;
      If :P5_PRODUCT_ID Is Not Null Then
      select nvl(dbms_lob.getlength(PRODUCT_IMAGE),0)
      into l_filesize
      from TDEMO_BLOB
      where product_id = :P5_PRODUCT_ID;

      if l_filesize > 0 then
      :P5_BUTTON_COLOR := '#19e30c';
      :P5_BUTTON_COLOR := '#f8f8f8';
      end if;
      End If;

      Now, we add two Dynamic Action on page 5 {Delete Image & Close Dialog). 

      Step by Step we add some true Actions.(Below Images are clear and we don't need to explain about each image)

      Delete Image:

      Close Dialog:

      Create true Actions below of Delete Image:

      Create true Actions below of Delete Image:
      Execute PL/SQL CODE

      Update TDEMO_BLOB set PRODUCT_IMAGE = empty_blob()
      where PRODUCT_ID = :P5_PRODUCT_ID;
      APEX_PKG_PARAMS.setparamblob(p_param => empty_blob(),
      p_count_seq => 1);

      Create true Actions below of Delete Image:
      Set Style

      Create true Actions below of Close Dialog:
      Execute PL/SQL CODE

      :P5_TEMP_SIZE:= nvl(dbms_lob.getlength(APEX_PKG_PARAMS.getparamblob(p_seq => 1)),0);

      Create true Actions below of Close Dialog:
      Execute Javascript CODE

      if (apex.item( "P5_TEMP_SIZE" ). getValue() > 0) 
      $("#upload-img-pro").css("background-color", "#19e30c");
      $("#upload-img-pro").css("background-color", "#f8f8f8");

      How to save image file?
      we need to create a new process for saving upload file.

      Update TDEMO_BLOB set PRODUCT_IMAGE = APEX_PKG_PARAMS.getparamblob(p_seq => 1)
      where PRODUCT_ID = :P5_PRODUCT_ID;

      Next major step on Page 6

      we add below URL and JavaScript codes on page level


      /******************************************************* */




      * jQuery Page Zoom Plugin v1.1


      * Description:

      * Allow the user to zoom in or out on the page using links or buttons (anything that will accept an onClick event).



      !function(o) {

      o.page_zoom = function(e) {

      var m = {

      max_zoom: 2,

      min_zoom: .5,

      zoom_increment: .1,

      current_zoom: 1,

      selectors: {

      zoom_in: ".zoom_in",

      zoom_out: ".zoom_out",

      zoom_reset: ".zoom_reset"



      , t = !1

      , n = {

      init: function(e) {

      "object" == o.type(e) && (m = o.extend(m, e)),

      "undefined" != typeof Cookies && (t = !0),

      t && null == Cookies.get("page_zoom") ? Cookies.set("page_zoom", 1) : (t ? m.current_zoom = parseFloat(Cookies.get("page_zoom")) : m.current_zoom = 1,

      1 != m.current_zoom && n.set_zoom(m.current_zoom)),

      o(m.selectors.zoom_in).bind("click", n.zoom_in),

      o(m.selectors.zoom_out).bind("click", n.zoom_out),

      o(m.selectors.zoom_reset).bind("click", n.zoom_reset)


      set_zoom: function(e) {

      o(".image-zoom").css({ //class name of P6_IMAGE

      zoom: e,

      "-moz-transform": "scale(" + e + ")",

      "-moz-transform-origin": "0 0"


      m.current_zoom = e,

      t && Cookies.set("page_zoom", e)


      zoom_in: function() {

      var o = parseFloat(m.current_zoom + m.zoom_increment);

      o < m.max_zoom ? n.set_zoom(o) : n.set_zoom(m.max_zoom)


      zoom_out: function() {

      Multiple reports with a linkسه شنبه , 04 دی 1397 - Saeed Hassanpour

      Recently one of customer has a new request in terms of making two reports only with a link so I found this solution and I would like to share it in this post. At the first I have read this post about How To Add Open Multiple Links / Windows In a Single Click .

      In this sample we have two reports and when I click on a link to run in two different tabs on our browser.

      Demo application : OAC

      Step 1:

      Creates a page for example 22 

      Step 2:

      Creates a process on Process after header for example Call_Print_Documents.
      We have two reports [print_test1, print_test2] and calls a report when page loads.

      if :Request= 1 then
      p_file_name => 'rep1',
      p_content_disposition => 'inline',
      p_application_id => :APP_ID,
      p_report_query_name => 'print_test1',
      p_report_layout_name => 'print_test1',
      p_report_layout_type => 'rtf',
      p_document_format => 'PDF');
      elsif :Request= 2 then
      p_file_name => 'rep2',
      p_content_disposition => 'inline',
      p_application_id => :APP_ID,
      p_report_query_name => 'print_test2',
      p_report_layout_name => 'print_test2',
      p_report_layout_type => 'rtf',
      p_document_format => 'PDF');
      end if;

      Step 3:

      Creates a page for example 23 , in this page has a link for calling report page in order to open two new tabs.

      Step 4:

      Create a link on Display Item and we use below code at Post Text property.

      <div>Multiple reports with a link

      <a class="t-Button t-Button--icon t-Button--hot t-Button--iconLeft" value="reports"
      target="_blank" rel="noopener"><span class="t-Icon fa fa-print" aria-hidden="true"></span>

      Finally, when I click on a link as result the first tab will open but second tab will not open because the browser block this link ( and we have to according below images to choose "Always allow ..." after that when clicks again on the link we can see two new tabs, also you could use this property (rel="opener") in your link. In addition to recommend to read this post about rel=noopener

      I hope this helps.

      Magnify Image For APEXجمعه , 30 آذر 1397 - Saeed Hassanpour

      How to magnify images? in this post show us how to use it.

      Demo application : OAC

      Download sample application : APEX-MagnifyImage

      First of all we should add two *.js files and to get more samples and information  we need to visit & elevateweb . In addition this post show us some examples that third sample is about Interactive report and fourth is about image zoom. 

      Step 1=> adds below files.

      File URLs:


      Step 2: adds below codes. "It can be to change the class & ID name. "

      Function and global variable Declaration:

      //image link
      type: 'image',

      retina: {
      ratio: 2 // can also be function that should retun this number


      // Example with single object
      items: {
      src: 'oug/r/101/files/static/v83/iranoug-3.jpg'
      type: 'image' // this is default type

      // Example with multi objects
      // Define data for the popup
      var data = [
      username: "Saeed Hassanpour", // Key "username" means that Magnific Popup will look for an element with class "mfp-username" in markup and will replace its inner HTML with the value.
      userWebsite_href: '#', // Key "userWebsite_href" means that Magnific Popup will look for an element with class "mfp-userWebsite" and will change its "href" attribute. Instead of ending "href" you may put any other attribute.
      userAvatarUrl_img: 'oug/r/101/files/static/v83/image1.jpg', // Prefix "_img" is special. With it Magnific Popup finds an element "userAvatarUrl" and replaces it completely with image tag.
      userLocation: 'Tehran, Iran'

      username: "Saeed Hassanpour",
      userWebsite_href: '',
      userAvatarUrl_img: 'oug/r/101/files/static/v83/iranoug-3.jpg',
      userLocation: 'Tehran, Iran'

      username: "-----",
      userWebsite_href: '#',
      userAvatarUrl_img: 'oug/r/101/files/static/v83/image1.jpg',
      userLocation: 'Tehran, Iran'

      key: 'my-popup',
      items: data,
      type: 'inline',
      inline: {
      // Define markup. Class names should match key names.
      markup: '<div class="white-popup"><div class="mfp-close"></div>'+
      '<a class="mfp-userWebsite">'+
      '<div class="mfp-userAvatarUrl"></div>'+
      '<h2 class="mfp-username"></h2>'+
      '<div class="mfp-userLocation"></div>'+
      gallery: {
      enabled: true
      callbacks: {
      markupParse: function(template, values, item) {
      // optionally apply your own logic - modify "template" element based on data in "values"
      console.log('Parsing:', template, values, item);

      // report link
      $(document).ready(function() {

      $("#zoom_01").elevateZoom({tint:true, tintColour:'#F90', tintOpacity:0.5});

      Step 3: we need a CSS file and downloads above site address that was mentioned.

      File URLs:


      First Sample (Link) :

      When clicks on link so the image will appear. we create a region and put below text in source.

      <a href="oug/r/101/files/static/v83/iranoug-3.jpg" title="Test caption" class="image-link">Show image</a>

      Second Sample (Button) :

      When clicks on button so the image will appear. we create a button and only set a "Static ID" for example "open-button1"

      Third Sample (Interactive Report) :

      When clicks on a little image at IR as result the image will appear with original size. We create a report region and in SQL Query we have to change or add some codes. if we see the below image so the numbers 3,4 are important keys.

      <img class="rep-popup-link" alt="'||apex_escape.html_attribute(p1.product_name)||'" title="'||apex_escape.html_attribute(p1.product_name)
      ||'" style="border: 4px solid #CCC; -moz-border-radius: 4px; -webkit-border-radius: 4px;" '
      ||'src="'||image_link||'" height="75" width="75" id="img'||p1.product_id||'"
      data-mfp-src="'||image_link||'" />

      Fourth Sample (Image Zoom) :

      When moves cursor on the left image for each position as result the big image of that point will appear. 

      We create a region and adds below text in source.

      <img id="zoom_01" src="oug/r/101/files/static/v83/image1.png" data-zoom-image="oug/r/101/files/static/v83/image1.jpg">

      Enjoy with Magnify Image.

      Load RTL PDF in Regionدوشنبه , 26 آذر 1397 - Saeed Hassanpour

      Two years ago I'v written a post about Displaying PDF in APEX but when I saw a blog post from Adrian Png  I'll try to use this method with a little changing and also to add two Next/Previous Buttons.

      Demo application : OAC

      Download sample application : APEX-LOADRTL-PDF

      First Step we must add a CDN js via Cloudflare like below image and next we write codes in "Function and global variable Declaration"

      File URLs:


      Function and global variable Declaration:

      // If absolute URL from the remote server is provided, configure the CORS
      // header on that server.
      var url = '';
      var pdfDoc = null,
      pageNum = 1,
      pageRendering = false,
      pageNumPending = null,
      scale = 1.5,
      canvas = document.getElementById('preview-pdfpane'),
      ctx = canvas.getContext('2d');

      * Get page info from document, resize canvas accordingly, and render page.
      * @param num Page number.
      function renderPage(num) {
      pageRendering = true;
      // Using promise to fetch the page
      pdfDoc.getPage(num).then(function(page) {
      var viewport = page.getViewport(scale);
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      // Render PDF page into canvas context
      var renderContext = {
      canvasContext: ctx,
      viewport: viewport
      var renderTask = page.render(renderContext);

      // Wait for rendering to finish
      renderTask.promise.then(function() {
      pageRendering = false;
      if (pageNumPending !== null) {
      // New page rendering is pending
      pageNumPending = null;

      // Update page counters
      document.getElementById('page_num').textContent = num;

      * If another page rendering in progress, waits until the rendering is
      * finised. Otherwise, executes rendering immediately.
      function queueRenderPage(num) {
      if (pageRendering) {
      pageNumPending = num;
      } else {

      * Displays previous page.
      function onPrevPage() {
      if (pageNum <= 1) {
      document.getElementById('prev').addEventListener('click', onPrevPage);

      * Displays next page.
      function onNextPage() {
      if (pageNum >= pdfDoc.numPages) {
      document.getElementById('next').addEventListener('click', onNextPage);

      Tip: When we set Right-To-Left in Globalization cause to have wrong displaying spatially for Persian PDF so I have a workaround for this issue, we can set "Direction : ltr"


      Issue for Displaying

      Page Inline:

      direction: ltr;

      Solve issue

      Now we create a region "Load PDF" and set this source code for adding a button in order to load PDF file.

      <a class="t-Button t-Button--icon t-Button--large t-Button--iconRight btn-preview-pdf" href="javascript:void(0);" type="button" id="B4">
      <span class="t-Icon fa fa-arrow-circle-right fa-anim-horizontal-shake"></span>
      <span class="t-Icon t-Icon--left fa fa-newspaper-o" aria-hidden="true"></span>
      <span class="t-Button-label">View PDF</span>
      <span class="t-Icon t-Icon--right fa fa-newspaper-o" aria-hidden="true"></span></a>

      In this sample we add a sub region under "Load PDF" region and change "Title" according below code , next add a source code

      <span>صفحه: <span id="page_num"></span> / <span id="page_count"></span></span>
      <canvas id="preview-pdfpane" ></canvas>

      We set Static ID of region that used for example "region-pdf"

      Under the sub region we add two buttons in order to implement "NEXT/Previous" of pages.

      Previous Button:

      Next Button:

      So, we add two Dynamic Action on page 5 {Page Load & Preview PDF). 

      Step by Step we add some true Actions.(Below Images are clear and we don't need to explain about each image)

      Page Load:
      we want to hide the Buttons and region when page loads.



      JQuery Selector: #region-pdf_heading     (statisc_id + "_heading")

      Page Load:
      we want to show the Buttons and region when click on the button.


      var Url = 'https://......./test.pdf';
      * Asynchronously downloads PDF.
      pdfjsLib.getDocument(Url).then(function(pdf) {
      pdfDoc = pdf;
      document.getElementById('page_count').textContent = pdfDoc.numPages;
      // Initial/first page rendering



      JQuery Selector: #region-pdf_heading     (statisc_id + "_heading")

      Enjoy it.

      Options on Persian Datepickerپنجشنبه , 22 آذر 1397 - Saeed Hassanpour

      In previous post I've told how to use Persian Datepicker so this post shows how to add some options to this Datepicker.

      Unfortunately after we added *.js file in terms of Persian Datepicker, if we want to set values for some properties will not work and we could not use them. But it can be add jQuery codes and active these properties.

      We add codes in Execute When Page Load for each page or if we would like for an application and all pages, can be to add to template.

      Shows Years and Month 

      //be change year and month

      $( ".apex-item-datepicker" ).datepicker( "option", "showOtherMonths", true );

      $( ".apex-item-datepicker" ).datepicker( "option", "changeMonth",true );

      $( ".apex-item-datepicker" ).datepicker( "option", "changeYear", true );

      Tip: if we change some options manually that cause to lost some classes on datepicker' button and for solving this issue we must add a line code at latest line.

      //be lost Button clasess so to fix the issue with the button trigger 

      $(".ui-datepicker-trigger").addClass("a-Button a-Button--calendar");

      As result we see Datepicker like below iamage

      Change Year's Range 

      For example we need to limit the range of years between 1390 til 1400 Jalali.

      //limit year range

      var yearRange = $( ".apex-item-datepicker" ).datepicker( "option", "yearRange" );

      $( ".apex-item-datepicker" ).datepicker( "option", "yearRange", "1390:1400" );

      After run this page we see a list of yeas.

      Display Today Button 

      If we add below code we will able to display today button at the popup Datepicker

      //add today button

      $( ".apex-item-datepicker" ).datepicker( "option", "showButtonPanel", true );

      How to add time to date 

      First method when we want to add current time to date. It's child's play, we should use below function via TRIGGER BEFORE INSERT OR UPDATE of your table.(in this sample the field name is HIREDATE)




      -- Author: Saeed Hassanpour

      -- Date: 2018/12/09


      l_time VARCHAR2(10);


      if P_TIME is null then

      select to_char(sysdate,'HH24:MI:SS')

      into l_time

      from dual;


      l_time := P_TIME;

      end if;

      return To_Date(To_Char(P_DATE,'YYYY/MM/DD')||' '||l_time,'YYYY/MM/DD HH24:MI:SS');




      Next sometimes we need to add manually time to date, in this case it's better to add a new field to our table (in this sample the field name is HIRETIME) because when page loads the time field display their value so we could change the our time and save at date field.

      Only changes above code in trigger with this:


      I hope this helps.

      Setter & Getter API in Oracle APEXسه شنبه , 06 شهریور 1397 - Saeed Hassanpour

      I have created a package in order to easy usage for set & get values in Oracle APEX.


      -Use the View with parameters

      -Use Dynamic parameters in Query

      -Set and get temporary data

      Demo application: OAC

      Download files and sample application via APEX-SetterGetterAPI

      How to use this package in Database:

      Run APEX_PKG_PARAMS.sql in database where you want to use it. Next to Follow below examples for clarifying the using of this API.

      Sample 1

      --Set two parameters

      --Get two parameters
      --Use in query
      FROM emp
      WHERE job = APEX_PKG_PARAMS.getparam (p_index =>1,p_seq=>1)
      AND deptno = APEX_PKG_PARAMS.getparamnum (p_index =>1,p_seq=>1)

      Sample 2

      --Set parameters
      l_filecontent BLOB;
      l_filename VARCHAR2(400);

      If :P28_UPLOAD_FILE Is Not Null Then
      Into l_filename, l_filecontent
      From apex_application_temp_files
      Where NAME = :P28_UPLOAD_FILE;

      APEX_PKG_PARAMS.setparamnum(p_param => :P28_FILE_TYPE,
      p_count_seq => 4,
      p_seq => :P28_SEQ);
      APEX_PKG_PARAMS.setparamblob(p_param => l_filecontent,
      p_seq => :P28_SEQ);
      APEX_PKG_PARAMS.setparam(p_param => l_filename,
      p_seq => :P28_SEQ);
      End If;
      ----Get blob parameter
      APEX_PKG_PARAMS.getparamblob (p_index =>1,p_seq=>1);

      How to use this package in APEX:

      We should use this packages according the instructions.

      Step 1

      In this step you must create a process and add pl/sql code


      To add a sever-side Condition in order to control for calling this process

      Step 2

      Now, we created a view with parameters that usage in where clause.

      FROM emp
      WHERE job = COALESCE (APEX_PKG_PARAMS.getparam (p_index => 1), job)
      AND deptno = COALESCE (APEX_PKG_PARAMS.getparamnum (p_index => 1), deptno);

      Next, we added three buttons in order to show the operation of setter & getter.

      Step 3

      we set the pl/sql code like a below code for first button


      we repeat it for another button

      Step 4

      So if we want to remove the value of parameters must be to add this code.


      I hope to use and enjoy it.

      Persian Datepicker for Oracle APEXجمعه , 02 شهریور 1397 - Saeed Hassanpour

      This Blog tells us about the Persian Datepicker in Oracle APEX.
      We have some issues when we want to have native Persian datepicker:

      • Default Datepicker is Gregorian
      • Old jQuery Versions Desupported(1.7.1)  APEX 18+
      • Gregorian Datepicker to Persian Datepicker
      • Persian Datepicker with Interactive Grid(IG)
      AS you know the default datepicker is Gregorian and Jalali Date isn't match with that date so first of all we have to revise it. Next, the old jQuery vesrion desupported of APEX 18+, before that have rewritten with jQuery UI 1.7 and in new version of APEX is not work correctly.

      A major issue is when we want to use the datepicker item with Interactive Grid at a same page, because conflict occurs.

      Finally, These issues were solved and you should follow below instruction if you would like to use the Persian Datepicker in Oracle APEX. In addition, I have tested on APEX 5.1,18

      Demo is available APEXPersianDatepicker

      Demo on YouTubeWebinar-APEXPersianDatepicker

      Adding JS Files

      To upload js files via APEXPersianDatepicker

      Call js files according the image

      Set NLS DATE

      You need to change NLS_CALENDAR , NLS_DATE_FORMAT  [Application / Edit Security Attributes(Database Session)]

      Call Persian Datepicker

      You should make a copy from [standard] template and create a new template for example "standard-fix-date" because we must add some codes to "Execute when Page Loads" part.

      $(window).load(function () {
          iranapex.util.loadjscssFile("oug/r/101/files/static/v83/iranapex-datepicker-fa.min.js", "js")

      Tips : Application Primary Language must be [Farsi(fa)]

      Now, run your application and see Jalali date via Item datepicker.

      Enjoy it!

      Fancy Login Pageشنبه , 27 مرداد 1397 - Saeed Hassanpour

      This post is about how to create a Fancy Login Page in Oracle APEX.

      Thanks to Vincent Garreau for creating particles js.

      Demo applicationOAC

      Download applicationFancyLoginPage

      Step 1

      First of all we should visit this site and set our configuration then to download *.json file.

      Step 2

      Download files via FancyLoginPage

      In this step we have two ways, we could set the name of *.json file at app.js or copy & paste below codes according the image and put it into app.js

      Step 3

      Adding JS Files

      Step 4

      We should make a copy from [login] template and create a new template for example "login-fancy" because we must add some codes to parts of template.

      Step 5

      a. we add this codes below the [div] tag
      b. To add script tags

      c. to add CSS codes to Inline part

      body {
      margin: 0;

      .t-Button {
      border-radius: 10px !important;

      input.password,input[type=text] {
      border-radius: 10px !important;
      border-color: #404040 !important;

      .t-Login-region {
      border-radius: 25px;

      .t-Login-header {
      padding: 0px 0;

      z-index: 900;

      .t-Login-region {
      background-color: rgba(255, 255, 255, 0.23) !important;

      h1.t-Login-title {
      font-size: 2.5rem;
      color: #ffffff;
      text-shadow: 2px 1px 4px #a8a9b3, 0 0 25px rgb(53, 54, 64), 0 0 5px #1b1815;

      .t-Form-inputContainer input[type="text"]:visited, .t-Form-inputContainer input.text_field:visited, .t-Form-inputContainer input.password:visited, .t-Form-inputContainer textarea.textarea:visited, .t-Form-inputContainer input.datepicker:visited, .t-Form-inputContainer span.display_only:visited, .t-Form-inputContainer input.popup_lov:visited, .t-Form-inputContainer select:visited
      background-color: #eb602d !important;
      color: rgb(0, 0, 0) !important;

      .t-Button--closeAlert, .a-Button--notification {
      color: initial !important;

      /*--------------------------------------particles css------------------------------*/

      /* ---- stats.js ---- */
      background: #000022;
      position: absolute;
      top: 48px;
      left: 0;
      width: 80px;
      color: #13E8E9;
      font-size: .8em;
      text-align: left;
      text-indent: 4px;
      line-height: 14px;
      padding-bottom: 2px;
      font-family: Helvetica, Arial, sans-serif;
      font-weight: bold;

      font-size: 1.1em;

      -webkit-user-select: none;
      margin-top: 5px;
      margin-left: 5px;

      border-radius: 3px 3px 0 0;
      overflow: hidden;

      border-radius: 0 0 3px 3px;

      /* ---- particles.js container ---- */
      #particles-js {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(#b61924,#fcfcfc) !important;/*you could change backgroud color*/
      background-image: url("");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;

      Step 6

      Now, we have to change the Page Template at the login page.

      So run and enjoy with Fancy login.

      Extract records by APEX_STRINGشنبه , 20 مرداد 1397 - Saeed Hassanpour

      I want to share my experience about to extract records by Query, so I am writing this article in order to explain it.

      The examples in this article rely on the following test table. This sample used (+) for separating between string.

      Create table 

      create table test_extract(f1 number, f2 varchar2(3000))

      Insert sample data

      insert into test_extract(f1,f2)
      insert into test_extract(f1,f2)            

      Extract Query

      --Step 1

      --simple query

      SELECT f2 AS str,

      f1 as SRL

      FROM test_extract


      MC0051+MC0053+MC0055+MC0059+MC0061+MC0134+MC0135+MC0136+MC0149+MC0150+MC0151 100

      CR0219+CR0229 200

      --Step 2

      --merge two fields

      SELECT REPLACE ( str, '+', ':' || SRL || '+') || ':' || SRL AS str,


      FROM (SELECT f2 AS str,

      f1 as SRL

      FROM test_extract



      MC0051:100+MC0053:100+MC0055:100+MC0059:100+MC0061:100+MC0134:100+MC0135:100+MC0136:100+MC0149:100+MC0150:100+MC0151:100 100

      CR0219:200+CR0229:200 200

      --Step 3

      --makes one record

      --Here we see a simple example of the LISTAGG function, producing a comma-separated list of string


      FROM (SELECT REPLACE ( str, '+', ':' || SRL || '+') || ':' || SRL AS str,


      FROM (SELECT f2 AS str,

      f1 as SRL

      FROM test_extract




      --Step 4

      --In this section we create a dataset and nested table

      SELECT apex_string.split (REPLACE (str, ',', '+'), '+') AS str


      FROM (SELECT REPLACE ( str, '+', ':' || SRL || '+') || ':' || SRL AS str,


      FROM (SELECT f2 AS str,

      f1 as SRL

      FROM test_extract


      --Step 5

      --Final query that we get all records


      FROM TABLE (

      SELECT apex_string.split (REPLACE (str, ',', '+'), '+') AS str


      FROM (SELECT REPLACE ( str, '+', ':' || SRL || '+') || ':' || SRL AS str,


      FROM (SELECT f2 AS str,

      f1 as SRL

      FROM test_extract




      MC0051 100

      MC0053 100

      MC0055 100

      MC0059 100

      MC0061 100

      MC0134 100

      MC0135 100

      MC0136 100

      MC0149 100

      MC0150 100

      MC0151 100

      CR0219 200

      CR0229 200

      I hope to enjoy.

      اوراکل اپکس با هر نسخه اصلی که منتشر می کند، لیستی از مواردی که در نسخه بعدی پشتبانی نمی شوند و اصطلاحا منقضی شده اند را منتشر می کند.
      اوراکل اپکس نسخه ۵٫۱٫۴ منتشر شد.شنبه , 09 دی 1396 - ایران اپکس
      اوراکل اپکس نسخه 5.1.4 در تاریخ ۲۶ آذر ۱۳۹۶ منتشر و در دسترس عموم قرار گرفت
      About Plug-in: Modal LOV IGپنجشنبه , 02 شهریور 1396 - Saeed Hassanpour

      This plug-in uses only on Interactive Grid (APEX 5.1.1 and later).

      Thanks to the blog post from Dan McGhan about Modal page.
      Thanks to the awesome blog posts from John Snyders about a series of Interactive Grid.

      Demo applicationModal LOV IG

      Download applicationModalLOV IG

      The Modal LOV IG plug-in was combined with modal page native so if you use this plug-in must be to do according below instruction:

      • Install the Modal LOV IG plug-in in your application
      • Create two Application Items
      • Create an Interactive Report on modal page mode
      • Create a page includes one or more the interactive grid


      Multiple Interactive Grid in each page & Multiple Modal LOV IG plug-in in each Interactive Grid.


      • Modal Url Type
      • Modal Page Link
      • Url Checksum
      • Set Item Names
      • Set Item Values *
      • Request
      • Modal Html Expression Column(s)
      • Column Mapping(s)
      • Cascading LOV Parent Column(s) *
      • Enterable
      • Validation (not implemented yet)

      Let's go to use the MODAL LOV IG!

      Step 1: Install the Modal LOV IG plug-in in your application (1 min)

      a-Download plugin
      b-Go to your application \  Shared Components \ Plug-ins then import this file      "item_type_plugin_ir_saeedhassanpour_modallovig.sql"

      Step 2: Create two Application Items (1 min)

      a-Create an Application Items . Exactly, name is same (GL_HTML_EXP_DIALOG
      b-Create an Application Items . Exactly, name is same (GL_ROW_SCRIPT_DIALOG)

      Step 3: Create an Interactive Report on modal page mode (5 min)

      a-Create an Interactive Report on modal page mode

      b-Set code at inline property of page
      Page Inline:

      .t-fht-tbody tr{
      cursor: pointer;

      c-Create the Page Item for every column that will return to main page. for example you want to return three columns so you must create three page items in this page.

      d-Enter the code under [COLUMN] of interactive report which(only for one column)

      HTML Expression:

      #ENAME# //column name

      e-Enter “Static ID” of that column in IR

      Static ID:


      f-Create a Dynamic Action Row Clicked with two true actions and setting like this images

      Dynamic Action:

      var columnStaticId = 'ename-id'; //Static ID of that column

      Step 4: Create a page includes one or more the interactive grid(5 min)

      a-Create an Editable Interactive Grid page 
          Enter “Static ID” for Interactive Grid region

      b-Add Modal LOV IG type to every item that likes to use it.
        Set Properties of items

      Tip: this plugin only return a value of item so if you want to have (Display, Return) don’t worry you can implement easily. In this case you should add a non-database item(e.g. MODAL_DISPALY as DISPLAY and database item as RETURN) to IG then by action button to hide the database item on interactive grid.

      select EMPNO,
      (select …. from emp e where e.empno = t.empno) as MODAL_DISPALY
      from EMP t

      c-Create a Dynamic Action on Dialog Closed
        Dynamic Action: Dialog Cloesd

      //set values on Interactive Grid
      openMLovIG.setIgValue(, true);



      جلسه سوم گروه کاربران اوراکل ایران (IranOUG)  در تاریخ ۳۱ فروردین ۱۳۹۶ برگزار شد. در این همایش در خصوص Oracle APEX صحبت کردم. مطلب در خصوص اینکه Oracle APEX را از کجا شروع کنیم ارائه گردید.

      SQLcl جايگزين مناسب براي SQL Plusیکشنبه , 15 اسفند 1395 - سعید حسن پور


      چرا بايد به نسخه 5.1 Oracle APEX ارتقا دهيم؟چهارشنبه, 04 اسفند 1395 - سعید حسن پور