APEX

Multiple File Upload in Oracle APEX

This method supports the ability for file inputs to accept and upload multiple files into database. Step 1: Create a File Browse Item. Step 2: In HTML Form Element Attributes set as “Multiple”. For Selecting the Multiple Files at a time. Step 3: Create the Textfield to get the Filename. Step 4: In Dynamic Action “onchange” of File Item. Place the Javascript to get the Selected File Names.    Code: var x = document.getElementById(“P37_FILE”); vlength=x.files.length; var txt = “”; $x(“P37_FILENAME”).value=””; if (‘files’ in x) { for (var i = 0; i <vlength; i++) { if (x.files.length == 0) {             txt = “Select one or more files.”;             $x(“P37_FILENAME”).value=””;         }  else{                 txt += “<br><strong>” + (i+1) + “. file</strong><br>”;                  console.log(“txt =”+txt );                 var file = x.files[i];                 if (‘name’ in file) {                     txt += “name: ” + file.name + “<br>”;                    $x(“P37_FILENAME”).value+=file.name;                 }…

Read More

ADDING A FAVICON TO APEX

 A Favicon (Favorite Icon), also known as a Shortcut Icon, Web site Icon, Tab Icon or Bookmark Icon, is a file containing one or more   small  icons, associated with a particular website or web page. A web designer can create this icon and upload it to a website   (or web page) by several means, and graphical web browsers will then make use of it. Browsers that provide Favicon support typically  display a  page’s Favicon in the browser’s address bar and next to the page’s name in a list of bookmarks. Browsers that support a  tabbed  document interface  typically show a page’s Favicon next to the page’s title on the tab. For applications which are using Universal Theme you don’t have to modify the Page Template anymore if you want to replace the  default Favicon with a custom one. Steps: Step 1: Go to Shared Components > Images and upload your new favicon.ico file. Step 2: Then go to your application and the ‘Edit Application Definition’ button, then the Definition tab. Step 3: Scroll down to Substitutions. Add a new subsitution string called CUSTOM_FAVICON. Enter the substitution string as: #WORKSPACE_IMAGES#favicon.ico Click Apply Changes. Step 4: Navigate to Shared Components > Templates. Filter by ‘Page’ type. Step 5: Edit each of your page templates (tip: start with one that you can test). In the ‘Header’ definition, find the line: <link rel=”icon” href=”#IMAGE_PREFIX#favicon.ico” type=”image/x-icon”> <link rel=”shortcut icon” href=”#IMAGE_PREFIX#favicon.ico” type=”image/x-icon”> Change it to: <link rel=”icon” href=”&CUSTOM_FAVICON.” type=”image/x-icon”> <link rel=”shortcut icon” href=”&CUSTOM_FAVICON.” type=”image/x-icon”> OUTPUT: Before Adding Custom Favicon: After Adding Custom Favicon:   ADDING A FAVICON TO APEX 5 UNIVERSAL …

Read More

DYNAMICALLY ADDING ROWS IN TABULAR FORM IN ORACLE APEX 4.2

A good web design involves the better user interaction and ability to fetch the data in a better way. In Tabular Form user can add rows only by clicking Add Row Button every time. Using this technique user can add multiple entries without clicking Add Row Button and submit them simultaneously. This is a simple and effective solution for creating multiple entries where the number of rows to be entered is indeterminate. Step 1: Create Tabular Form   Step 2: Create Select List in the Tabular Form (Ex: “P22_choose_no_of_rows_to_be_added”)  Step 3: Write JavaScript Function in Page Header Step 4: Creation of Dynamic Action Step 5 : Call the function f_addRow() in Dynamic True Action Step 6: Write JavaScript in Cancel Button OUTPUT: 1. If No row Selected: 2. If No of rows Selected: 3. While Clicking Cancel Button

Read More

RUPEE SYMBOL IN REPORTS IN ORACLE APEX 4.2 USING HTML

Most of the Applications includes Accounts Reports like Employee Payroll Reports, Company Purchase Reports, Invoice Reports,etc.  Now using this method user can add RUPEE symbol in your reports. Step 1: Create Report (Interactive Report (or) Classical Report) Step 2: Place the below SQL Query in Report Region Source  SELECT    ‘<span style=”font-weight:bold;”>?</span>’        || ‘ ‘        || CASE              WHEN NVL (SUM (amount), 0) = 0                 THEN ‘0.00’              ELSE TO_CHAR (NVL (SUM (amount), 0), ‘99999999999.99’)           END amount   FROM reimbursement_dtls OUTPUT:

Read More

COORDINATE MAPPING IN ORACLE APEX

Coordinate Mapping: Line coordinates are used to specify the position of a line just as point coordinates (or simply coordinates) are used to specify the position of a point. User can draw multiple lines on an Apex Image Item and the Coordinates of all the drawn lines can be obtained and stored in Database Table.  This can be acheived by using HTML,CSS, JavaScript. Steps To be followed : Step 1: To get Multiple Lines on your Apex Display Image Item place the following code in the page HTML Header. CODE: <!DOCTYPE HTML> <html lang=“en”>    <head>       <div id=“page”>          <div id=“content”>             <style>                  /* Lines can be styled with normal css: */                div.line{                –webkit–transform–origin: 0 50%;                –moz–transform–origin: 0 50%;                transform–origin: 0 50%;                height: 2px; /* Line width of 3 */                background: red; /* Black fill */                opacity: 0.5;                box–shadow: 0 0 8px #B99B7E;                /* For some nice animation on the rotates: */                –webkit–transition: –webkit–transform 1s;                –moz–transition:    –moz–transform 1s;                transition:         transform 1s;                }                           …

Read More

HIGHLIGHT MANDATORY ITEMS THROUGHOUT THE APPLICATION

Here is how to highlight form text items, which Value Required attribute is set to “Yes” and do not have any value. Step1:Create dynamic action to page zero Name: Highlight required Event: Change Selection Type: jQuery Selector jQuery Selector: input[type=’text’][required] Condition: -No Condition- Action: Execute JavaScript code Fire On Page Load: True Code: if(!$v(this.triggeringElement)){  $(this.triggeringElement).css({“background”:“#FFFF77”}); }else{  $(this.triggeringElement).css({“background”:“”}); } Selection Type: None Step2: Now run application and items having Value Required set to “Yes” background color is changed if item do not have any value. You can find Value Required setting from item attributes. OUTPUT:

Read More

DYNAMIC DATE RANGE IN APEX DATEPICKER

Using this method you can set the range of selectable dates by entering a Minimum and Maximum Date value  dynamically “real-time”. Step 1: Create a Page Item (Example: “P101_DATE”). Step 2: Go to Settings -> Minimum Date       In Minimum Date valid condition has to be specified.       Minimum Date Conditions are (..+3d,+2d,+1d,+0d,-1d,-2d,-3d..) +0d   => It will display Both SYSDATE as well as all the future following the sysdate. -10d    => It will display 10 days, which are below the sysdate (Sysdate is not accounted). Example 1: (Minimum Date Condition) OUTPUT: Example 2:  OUTPUT:

Read More

HOW TO PLAY VIDEOS IN ORACLE APEX 4.2

Viral advertising is a proven technique that will assist to enhance your enterprise internet presence in a really expense-powerful manner.  It is an marketing activity in which information about a products preads between people, especially on the internet. This technique  allows you to play videos in APEX Application. Category 1: Call Required Videos Form You tube.   Step 1: Create a Page   Step 2: Create a HTML Region on a Page   Step 3: In Region Source =>    Write the following HTML: Output: Category 2:  Call Required Videos from Server itself.  Step 1: Upload Videos into the Server.  Step 2: Call Require Videos through path. Example:  (It has been done using LINUX Machine.)   1.If you have created the default path to save the videos, then specify the video name in  HTML source. 2. Create the default path var/www/html. 1. If you haven’t created the default path to save the videos, then specify the path name and video name (Any Name). 2.  For Example, you have saved the videos in the Desktop. Output:

Read More

CAPTURE LOG (LOGIN, LOGOUT, SESSION, SYSTEM) DETAILS IN ORACLE APEX 4.2

To Capture User Login Details: User Log Reports provides the detailed information about the users’ login details along with their history. These reports are more accurate and also provides the details of the user, their logon time, logoff time, the computer from which they logged on, the domain controller they reported, etc., along with their logon history. It also provides  the details of Currently Logged On Users and Frequently Loggedon Users. The following information can be captured in the Database.  1. Login Date 2. Login Time 3. Session Id 4. System IP Address 5. Host Name 6. User Name  Step 1: Table Creation  <<table_name>> (column_names)   {Based on the column Requirement}  Step 2: Creation of Page Hidden Items  Create Page Hidden Items P0_SESSION_ID, P0_USER_ID for getting Session id as well as User id.    P0_SESSION_ID : SELECT v (‘session’)   FROM DUAL Step 3: Creation of Insertion Process in the User Login Page  On Click of Login Button or Enter Button in Login Page the following process has to be created. Insertion Process: DECLARE    ln_session_id       NUMBER;    lv_ip_address       VARCHAR2 (30);    lv_login_date       VARCHAR2 (100);    lv_login_time       VARCHAR2 (50);…

Read More

SLIDESHOW OF IMAGES IN APEX

Websites that include many images, such as art or photo gallery sites, can benefit by presenting some (or all) of their images in slide show format.  Slideshow of various Images on an Apex Page can be achieved using HTML, JavaScript, CSS and jQuery. Step 1: Uploading all the images in the Workspace Shared ComponentsàFilesàImagesàCreateàSelect Application nameàChoose image fileàUpload. Step 2: Source code Give the following code in the Page Region source. Make sure that all the images are uploaded in the Workspace. Source Code: <div id=”slideshow”>   //opening the Slider division           <img src=”#WORKSPACE_IMAGES#Office2.jpg” alt=”Slideshow Image 1″ class=”active” width=”1100px;” height=”550px;”/>  // calling the first image from workspace and width, height has been defined. <img src=”#WORKSPACE_IMAGES#2aioug.JPG” alt=”Slideshow Image 1″ class=”active” width=”1100px;” height=”550px;”/>  // calling the Second image from workspace and width, height has been defined. <img src=”#WORKSPACE_IMAGES#3bay1.jpg” alt=”Slideshow Image 2″ class=”active” width=”1100px;” height=”550px;”/>  // calling the Third  image from workspace and width, height has been defined. <img src=”#WORKSPACE_IMAGES#4loveDoyensys1.jpg” alt=”Slideshow Image 3″ width=”1100px;” height=”550px;” />  // calling the Fourth image from workspace and width, height has been defined. <img src=”#WORKSPACE_IMAGES#5bay2.jpg” alt=”Slideshow Image 4″ width=”1100px;” height=”550px;”/> // calling the fifth image from workspace and width, height has been defined. <img src=”#WORKSPACE_IMAGES#6cricket.jpg” alt=”Slideshow Image 4″ width=”1100px;” height=”550px;”/>  // calling the Sixth image from workspace and width, height has been defined.</div> Step 3: Give the below code on the HTML header </script> //within the script tag the division name will be called using JQUERY <script type=”text/javascript”>     function slideSwitch() {  //Opening  the function          var $active = $(‘#slideshow IMG.active’);          if ($active.length == 0) $active = $(‘#slideshow IMG:last’);         var $next = $active.next().length ? $active.next() : $(‘#slideshow IMG:first’);       $active.addClass(‘last-active’);         $next.css({             opacity: 0.0         }).addClass(‘active’).animate({             opacity: 1.0         }, 1000, function() {             $active.removeClass(‘active last-active’);         });…

Read More