Louis-Guillaume's Blog

Another post about jQuery in APEX! :) I am really happy to see the interest the APEX Community has for jQuery. After reading Dan McGhan's blog post concerning jQuery Impromptu , I decided to try this jQuery extension. For my demo, I decided to replace a "Popup Key LOV (Displays description, returns key value)" with a "Prompt LOV". I was able to reuse code from previous demos to accelerate the development. Here is a working example of the Prompt LOV & Calendar demo . How does it works? 1) I assume you check and understand these demos: A) Popup in Report B) AJAX request Page Report C) jQuery Datepicker Now... we can continue to the next step. :) 2) Replace the existing Popup LOV with a Prompt. The prompt will display a report from another page(in this case, it's the page 42). The report is requested using AJAX. This is the JavaScript code you need: $().ready(function() { //Replace existing POPUP-LOV $("#P41_DEPTNO_fieldset a") .attr(...

Last week, I release a Google Gadget to publish the weekly release of Insum's Web 2.0 Demos . I'll explain how I did it. Google Gadget... what's that?! It's an XML file defining every aspect of your gadget(module) . The words "gadget" and "module" can both be used to describe a Google Gadget. The gadget definition contains 3 sections: 1)Module Preferences The general information of my gadget is defined in this section. Here is the list of attributes for which I set values. title title_url description author author_email author_location author_affiliation author_link author_photo author_quote height width I put a default value for the height. Users can update this value using the gadget's settings (build using the "users preferences"). It's also possible to auto-adjust the gadget height. 2)Users Preferences The settings of my gadget are defined in this section. Here's the list of settings available to the users. itemCount fHeigh...

It's possible display the relationship of your company employees using the Google Visualization: Organizational Chart . How it works: I use jQuery AJAX to call an application process called GET_EMPLOYEES_RELATIONSHIP . The response is in JSON. I use jQuery to handle the JSON object. You need to store your chart data inside a "google.visualization.DataTable()" object. I use the same data table to feed the Table Chart and the Org. Chart. I created 2 examples. 1) Single Tree View Your can see a working example of the employees relationship Organizational Chart demo (1). This is how I define a data table cell: for (i = 0; i < emp_count; i++) { l_data_table.setCell(i, 0, data[i].emp_ename); l_data_table.setCell(i, 1, data[i].mgr_ename); } 2) Multiple Trees View Your can see a working example of the employees relationship Organizational Chart demo (2). This is how I define a data table cell: for (i = 0; i < emp_count; i++) { l_data_table.setCell(i, 0, data[i].emp...

I decided to try the Google Gadget API after reading Bradley's post . I end up creating a notification gadget to publish "Insum's Web 2.0 Demos - Weekly Release" . It's now possible to stay up-to-date if you add this gadget to your blog, website, and/or iGoogle page. I'll write an article about the creation of such gadget. Enjoy!

Using jQuery to handle AJAX request and JSON response is a breeze. After completing yesterday's demo, I discovered the Google Visualization API . I decided to display a report and feed the report with data requested using AJAX. For this demo, I'll display an Intensity Map with Visitors Locations per Country. You can see a working example of the AJAX display visitors locations w/ Google Visualization API demo . 1) The Intensity Map Create an HTML Region. The source is: <div id="intensitymap_div" class="google-visualization-intensitymap-container" style="width:440px; height:264px;" /> 2) JavaScript Code <script src="http://www.google.com/jsapi"></script> <script> // Load jQuery google.load("jquery", "1.2.6", {uncompressed:false}); // Load Google Visualization API google.load('visualization', '1', {packages: ['table', 'intensitymap']}); </script> <script...

I decided to push the AJAX integration a little bit further... Using jQuery and Google AJAX Language API , I was able to translate in "real time" a report. For my example, I decided to translate the records of a table containing the different states of the USA. I realize that this data is not the best for translation demonstration because many words are almost the same no matter what is the spoken language. To have better results, translate the data to Arabic, Chinese, Japanese or Korean. You can try a working example of the Dynamic Translation w/ Google AJAX Language API demo . 1) Report (Region Definition) Source: SELECT st ,initcap(state_name) AS state_name_en ,initcap(state_name) AS state_name FROM demo_states N.B. I had to use the initcap function on my data. Google translation engine is case sensitive. (I need to find more documentation to help with this issue.) 2) Report (Column Attributes) STATE_NAME_EN: Column Formatting > CSS Class: translate_src STATE_NA...

I previously posted an article called " How to... Load the jQuery JavaScript Library ". I don't think a gave enough information about why I decided to use the Google AJAX Libraries API . I'll explain a little more this time. I decided to try the Google AJAX Libraries API because I personally like Google services. :) I decided to keep using this library because I don't need to worry about the hosting of my .js files. It's also possible to call a compressed or uncompressed version of jQuery and jQuery UI . It's also possible to call older version of a library. I didn't have bad/slow speed issue using the Google AJAX Libraries API. I'm using this technique for my web development. If I have an application working on an Intranet, I will host the .js file on my web server. links: http://code.google.com/apis/ajaxlibs/ http://code.google.com/apis/ajaxlibs/documentation/

Last week, I write about using jQuery UI Tabs to show each region of my page under a tab . Denes Kubicek send me a message asking if it was possible to display more than one region under a single tab. The answer is yes. But how? I tried 3 different ways to do it. I'll first explain the better/simpliest solution. First, I made a page copy of my last demo (page 30). Don't forget to add the static ID for the regions on the copied page (page copy removes regions static ID)... this is probably a bug in APEX. 1) First solution (working) A. I modified the source of the first region called "TABS". The Region Source is: <div id="my_tabs"> <ul> <li><a href="#form_report"><span>My Form & Report</span></a></li> <li><a href="#my_calendar"><span>My Calendar</span></a></li> </ul> </div> B. Add the jQuery code to my page HTML header. <script src="...

The official release of Insum's jQuery Demo Application was a week ago. What can I say? Thanks to the APEX community for making this project a real success! Using Google Analytics , I was able to track your every move MUHAHAA! :) We received over 300 unique visitors during this period. Thanks again. Now, back to work!

It's possible to reduce the space required by regions on a page. How? Use tabs to dynamically choose which region to display. jQuery UI Tabs makes it easy for us to do so. You can try a working example of my jQuery UI Tabs in APEX demo. 1. For this example, I need 4 regions. The first region called "TABS" is an HTML Region with template " No Template ". The Region Source is: <ul> <li><a href="#my_form"><span>My Form</span></a></li> <li><a href="#my_report"><span>My Report</span></a></li> <li><a href="#my_calendar"><span>My Calendar</span></a></li> </ul> This list holds 3 tabs. One tab for each of the region I want to display. Notice the "ahref" values. Each value correspond to a region static ID. 2. Now, I create the 3 regions I want to display using the tabs. First, create "My Form" Region an...

When using AJAX to request new page content, loading animations are useful because the users won't see their browser's status bar loading animation. You can try a working example of my AJAX get Page Report w/ loading animation demo . 1. Add on your page a "Report Region" using an SQL Query for the data source. Identification > Static ID: p27_report_drop Source > Region Source: select null from dual where 1 = 2 Header and Footer > Region Header: <img src="http://www.blogger.com/i/processing3.gif" /> You should see an empty report with a loading animation. 2. Add the jQuery code to request page 27 Report Region. <script src="http://www.google.com/jsapi"></script> <script> // Load jQuery google.load("jquery", "1.2.6"); </script> <script> $(function() { // send request $.post("wwv_flow.show", {p_flow_id:$('#pFlowId').attr(...

Social applications are more and more popular. Users want to feel they are not alone using the application. A good way to achieve this is to give them the possibility to rate an article. Rating something shouldn't be a long process. Users don't expect to have a complete page reload for such a small action. The solution is to use AJAX to send the user's rating and to retrieve the average rating. jQuery will be used to handle events, send AJAX requests, and display rating choices and results. You can try a working example of my dynamic rating system . 1. Add the rating choices (I decided to use the stars images found in the /i/ of APEX). You'll probably want to add this "controller" at the top or the bottom of the content you want the users to rate. <div id="rating"> Please rate: <img id="rating_choices" src="/i/stars5.gif" usemap="#map_rating_choices" /> </div> <map id="map_rating_choices...

Like any JavaScript API, jQuery needs to be loaded on your web page. To do so, you can host the .js file on your server or call it using Google AJAX API Loader . Using Google's AJAX Libraries API is my favorite choice when I am dealing with an online application. This might not be possible for an intranet application. This is the HTML code to load jQuery using Google's AJAX API Loader. <script src="http://www.google.com/jsapi"></script> <script> // Load jQuery google.load("jquery", "1.2.6"); </script>

With my colleagues at Insum Solutions , we started a demo application of what can be done with jQuery a JavaScript Library. So far, I have been impressed by the simplicity of the tool. Our demo application of jQuery and APEX is available right now! Give it a try, the url is: http://www.insum.ca/jquery . We are waiting for your comments and suggestions. You can contact us at demo@insum.ca .

Hello APEX enthusiasts! This is the first article of many. I will use this blog to help the APEX community achieve more. I will write basic and advanced guides/tutorials that should be interesting for both APEX beginners and pros. I hope we will have a great journey together! ;)

Welcome to my personal blog.