Setting up Node and Oracle Database driver

Today Oracle introduced the node-oracledb driver, so you can easily connect from node to your Oracle database.

Previously I blogged about the Oracle VM you can download so you have your own local Oracle environment. Below are the steps to install the node driver and run a first example in that environment.
(Also read the official node-oracledb installation guide for a local database - 4. Installation with a local database).

First we need to install git (a source control system) - as the source of the oracle node driver is there.

$ sudo yum install git

Download the source of the node-oracledb driver

$ git clone https://github.com/oracle/node-oracledb.git

Next we need to get node, you can download it or I used wget to get the file for linux

Install Node

tar -zxf node-v0.10.35-linux-x64.tar.gz

We follow the guide to set the PATH variable

export PATH=$HOME/node-v0.10.35-linux-x64/bin:$PATH

and we set other variables to the Oracle client and run the installer from within the node-oracledb directory:

Depending your system it might take a few seconds and it should come back after a while with this:

So we have now node installed and the oracle node driver as a module available.

Next we run the first example. It's a select on a table in the HR schema, but that schema is by default locked. So we unlock it first:

sqlplus sys/oracle as sysdba

We need to change the dbconfig.js in the examples directory to point to our database:

And now we can run the first example:

The above lets you run SQL, PL/SQL etc. commands from within Node.

Happy playing with Node! But be warned, once you start with Node its addictive to try different node modules... for example run "npm install node-tts-api" and you have a node module to do text-to-speech :)

And this module is something you can call from within your APEX application (so we go the other way compared to above - we go from Oracle to Node in this case).
It takes only one Dynamic Action - on change of the item - execute Javascript:

var url = 'https://www.apexrnd.be/node/tts/' + $v(P13_TEXT);
$.get( url, function( data ) {
  var url = data;
  var snd = new Audio(url);
  snd.play();
});

And here's a small video that shows the TTS in action



If somebody knows a Node module with a women's voice I would love to hear that :)

The TTS demo is just a quick way to show the integrating of APEX with Node, but I've some more cool (and useful!) stuff coming up in future posts :)

Next ORCLAPEX-BE Meetup - Feb 2nd

Roeland organised a new APEX Meetup in Belgium on February 2nd.

This time no specific topic, everybody can get on stage for maximum 5 minutes to show something they did or to ask some feedback or help on a specific problem.

If Belgium is to far, no worries, there're meetups planned all over the world.

The next meeting in the Netherlands is on February 18th organised by Alex, Christian and Roel.

But as I said, many others, just check out http://apexmeetups.com for a more local event.

Setting up your own local Oracle Development environment in less than 15 minutes

The fastest and easiest way to setup your own local Oracle Development environment is by using the "Oracle Technology Network Developer Day" Database Virtual Box Appliance.

It contains:

• Oracle Linux 7
• Oracle Database 12c (12.1.0.2) EE (CDB/PDB)
• Oracle Rest Data Services (ORDS)
• Oracle Application Express (APEX)
• Oracle SQL Developer and Oracle SQL Developer Data Modeler

Step 1: Download and install Oracle VM VirtualBox

Step 2: Download the VM image that contains all the pieces you need

Step 3: Import the VM: File > Import Appliance

Done...

You can now start using the VM.

Some extra steps I did was adding a Shared folder and setup the Network connection

Once you add the Shared Folder open up a Terminal in your VM and type: "mount -t vboxsf Downloads /mnt"  (Downloads is my OSX Downloads folder and /mnt is my mount directory in VirtualBox), that makes it easier to transfer files to the VM.

Here's a screenshot once you run the VM:

The nice thing with this VM is that everything is ready to be used and it includes labs, so you can do some exercises too and there's even a reset script to put everything back how it was.

Exercises are available for: Database 12c (including JSON, XML DB, ...), SQL Developer, APEX, REST Data Services and Cloud Services.

Who said installing Oracle was hard? :)

Generate nested JSON from SQL with ORDS and APEX 5

When creating web applications, at some point you will need to interact with JSON. Either you consume JSON or you need to generate it to be able to use that cool widget you found.

A few years ago when I wrote about interacting and customising charts, XML was the data format. Today JSON is more common to use as it works so well with JavaScript. I needed to pass some nested JSON - here's an example: multiple customers have multiple orders and an order consists out of multiple items: 

What is the easiest way to generate that JSON data?

Luckily we have Oracle REST Data Services (ORDS), it literally is just one SQL statement!

Here you go: 

Save and presto you're done :) Hit the TEST button and copy/paste the generated JSON in for example JSONLint to validate the output and yep we have valid JSON.

But that is not all - it gets even better. APEX 5 comes with a new package apex_json which contains so many goodies, really a wonderful piece of code. The same SQL statement I call with the package and again I get the JSON I need. It's slightly different from what ORDS generated - ORDS has an items tag surrounding the data, but again it's valid JSON.

Note that APEX 4.2 has some JSON support too (apex_util.json_from_sql), but it doesn't go as far as the package you find in APEX 5.0 - for example the cursor syntax is not working there, but for straight forward JSON it does it job.

So this shows how easy it is to generate JSON these days. It has been different where we had to use the PL/JSON package (which was good too, but build-in is what I prefer).

And finally with Oracle Database 12c, and the JSON support straight in the database, consuming and querying JSON has been made so much easier, but that is for another post. If you can't wait, the link will bring you to the official 12c Database JSON doc.

Understanding the APEX url - passing variables to items and (interactive) reports

Did you know you can recognise an Oracle APEX application through the url?

Here's the syntax:

f?p=appid:pageid:session:request:debug:clearcache:params:paramvalues:printerfriendly&p_trace=YES&cs=...

Let me give some examples:

• https://www.apexrnd.be/ords/f?p=209:12:12351378808570:::::

The first part: https://www.apexrnd.be/ords/ depends on your configuration. I'm using https, my domain name is apexrnd.be and I'm using the Oracle REST Data Services as connection to the database. This is a configuration in your webserver.

The next part is f?p= f is a procedure in the database with as paramaters (p=). f comes from flow - once APEX was called "Project Flows".

209 is my application id, 12 is my page id and 12351378808570 is my session

• https://www.apexrnd.be/ords/f?p=209:12:12351378808570:CSV::::

The first part is the same, but now as request I've CSV, page 12 is an Interactive Report and the fastest way to see your IR data as CSV is to give CSV as the request in the url

• https://www.apexrnd.be/ords/f?p=209:12:12351378808570:IR_REPORT_BASIC::::

I changed the request again to the name of a saved Interactive Report (Alternative) IR_REPORT_: so the page goes straight to that layout of the report.

• https://www.apexrnd.be/ords/f?p=209:12:12351378808570::YES:::

Here I'm calling the page in DEBUG mode

• https://www.apexrnd.be/ords/f?p=209:12:12351378808570:::::

In the clear cache section you have a couple of options, specifying the below will clear the cache for : 

- APP: whole application

- SESSION: current user session

- RIR: reset interactive report to primary report

- CIR: reset to primary report but with custom columns

- RP: reset pagination

- 12: page 12

- P12_ID: item P12_ID

• https://www.apexrnd.be/ords/f?p=209:12:12351378808570:::P12_ID:1:

Here I pass a variable with the url, we'll fill P12_ID with the value 1

You can use comma separated list of items and values for example: P12_ID,P12_NAME:1,DIMITRI

• https://www.apexrnd.be/ords/f?p=209:12:12351378808570::::IREQ_CUST_LAST_NAME:Dulles

If you want to filter an interactive report you can call IR??_:

In the above case we set the customer last name = Dulles.

There are many other parameters: IREQ_ (equal), LT_ (less), IRLTE_ (less or equal), IRGT_, IRGTE_ (greater or equal), IRLIKE_ (like), IRN_ (null), IRNN_ (not null), IRC_ (contains), IRNC_ (not contains).

• https://www.apexrnd.be/ords/f?p=209:12:12351378808570::::::YES

In this case we run the page in Printer-friendly mode

• https://www.apexrnd.be/ords/f?p=209:12:12351378808570::::::&p_trace=YES

This url will generate a trace file on the system for this request.

You find some more information in the APEX Documentation or you can try online at https://www.apexrnd.be/ords/f?p=209:12:0:.

One remark: if you enable Session State Protection (SSP) you might not be able to call the parameters like this as it requires a checksum at the end which you have to calculate for example by using apex_util.prepare_url().

And finally, if you want more readable urls, some people did some posts about that, here's one of Peter.

Master Detail - Detail in APEX with FOEX

In the previous post I talked about Master-Detail and that it wasn't that easy to do Master-Detail-Detail today declaratively in APEX 4.2 (and 5.0).

Below is a screenshot of FOEX (a framework build on top of APEX) and a Master-Detail-Detail in there.

You can see the live example at https://www.apexrnd.be/ords/f?p=FOEX_FDOCS:MASTER_DETAIL_DETAIL:0::NO:::

Here's a screenshot of the page behind the scenes:

At first it might seem complex, but it isn't. In FOEX you can put regions in different places on the screen (center, east, west pane etc.), so many regions are to control those areas.
The most important regions are the "List of Customers", "List of Orders" and "Order Items", those are the regions that you see on the first screenshot. The other region "Manage Order Items" is a Modal Dialog that comes when you want to add an order item.

My goal is not to explain FOEX in great detail here, you can read about it on their website, but basically they extended APEX with a custom theme, many (many!) plugins and a builder add-on (you see in the screenshot the "Create FOEX Region", so it's really like you are working natively in APEX. Here's a screenshot when you hit the button to create a FOEX region:

So almost natively you can build your Master-Detail-Detail, through their wizards.

I thought to mention this solution here as well, as although my first choice is to make simple and clean web applications, if you do want a lot of information on your screen (like in a master-detail-detail), and you like ExtJs (which is used behind the scenes), FOEX is probably one of the best choices you have.

APEX R&D is a partner of FOEX, so if you need some more info, don't hesitate to contact us.

Master Detail (-Detail) in APEX

In the last posts we used following tables to show (Report) and edit (Form) the data:

Another way to work with this data is using a Master-Detail report/form.
In the master we have our customer info and in the detail the products he's interested in.

Oracle APEX provides a wizard to create a Master-Detail Form

You just follow the wizard to set it up:

By default the wizard will only show related tables, which is most logical - if you don't see your table, you probably don't have the FK relation on the tables.

You've some options for the layout - edit the records directly on the detail screen or as a separate form. Which one to pick? It depends... for small detail tables I would go for a Tabular Form, but for larger or more complex ones I would go with another Form. Tabular Forms are not the most flexible in APEX, but for now that is the only declarative option you have to edit multiple records at the same time. Alternatives are to use Modal dialogs, code your own custom solution or use a solution of somebody else. FOEX for example has a nice solution which I'll cover in the next post.

Tabular forms got improved only a little bit in APEX 5.0, but Modal Dialogs come native in APEX 5.0.  Tabular Forms will be more enhanced in APEX 5.1 which can then do master - detail - detail and it will also come with another solution - a new "Multi-Row Edit" region type - which could work well in this case.

You find the Master Detail result online at https://www.apexrnd.be/ords/f?p=DGIELIS_BLOG:MASTER_DETAIL

What if our tables were a bit more complex and we need Master-Detail-Detail today?
We would need to create our own custom "tabular forms", basically a report where we use the apex_item api... but that is for another post.

Keep ready to test the final EA of APEX 5.0

Oracle is gearing up to release APEX 5.0... the final early adopter release (EA3) will be released soon. Over 6000 people participated in APEX EA2...

Here's the email of Joel Kallman:

As EA3 will be very close to the final release of APEX 5.0 many more people will probably join EA3, so keep ready for it! I look forward what color scheme people will create with Theme Roller and how they make the universal theme look like, fun guaranteed :)

Using Shuttles in a many-to-many relationship (Form)

In the previous post I showed some options how you can represent a many-to-many table relationship in a report using the LISTAGG Oracle function.

In this post we will edit a record and see how we can represent the data in a Form and save the data back to the different tables.

First I create a Form on the main table (customers) by just following the wizards.

Next I'll add a Shuttle item to the page: P2_PRODUCT_IDS

The SQL statement for the LOV (List of Values) looks like this, so just like in a select list, the shuttle is able to show the name, but store the id. Note there's no where clause in the statement as we want to show all possible products on the left in the shuttle.

Finally for the item source value we can't use a Database Column as the data is in a different table, so we enter the select statement to get all the product ids for that customer. Note that the Source Type needs to be set to SQL Query (return colon separated value), so it returns 1 or more product ids.
The selected products will be shown on the right in the shuttle.

Here's how the Form looks like when we select John Dulles who's interested in two products (Jacket, Business Shirt):

When we move Products from left to right and the other way and hit Apply Changes we need to store those values.

Add a new Process after the build-in Process and call it Save Products with this code:

There're many ways to store the values, but let me walk you through this one.
We first store the selected products in an array (l_vc_arr2) which apex_util.string_to_table is doing.

Next we delete all (possible) records that are not selected. You could remove the last line in the where clause so all products for that customer are deleted (if you add all the selected ones later again), but if you're auditing that table your info in not correct as that person might not have actually deleted it.

I added some debug info in the process too.

Finally we loop through the array and check if the record already exists in our table, if it doesn't we add it. Again here you could not do the lookup if you are dropping all records in the delete statement and just add all selected again.

I typically have a condition on this request to not run when the request is Delete.

In the online example (click on the edit icon in the report) I dropped the Create and Delete buttons in the Form, but if you keep them and want everything to work, there're two more things you have to do:

-) For the Create - in the "Automatic Row Processing (DML)" Process (of the Customer table) you need to specify P2_ID in "Return Key Into Item" field so the next process (the one you see above) has a value for P2_ID (= customer id).

-) For the Delete - you need to add another process before the "Automatic Row Processing (DML)", so the child records get deleted first, before the automatic row process deletes the customer.

In the next post I'll give an example of working with this data in a Master-Detail form.

Representing many-to-many tables in a Report

Consider my case: I've a customer table and a products table. Customers can select multiple products they want to have. The diagram look like this: Customers on the left, Products on the right and a table in between that says which customers like which products. Customers might have multiple products and products might be linked to multiple customers - so a many-to-many relationship.

There're many ways to represent this data in a report. Here's a SQL statement that brings the three tables together:

A default Report created on top of this SQL statement looks like this:

The same SQL in an Interactive Report gives us a bit more possibilities, you could break by Customer and show the products underneath for example:

But another technique I use frequently as well, is by using the listagg (analytical) function.
This function was introduced in Oracle DB 11gR2. Here's a great article that compares listagg with previous possibilities you had in the Oracle Database and also talks about the performance.

Here's my SQL statement:

This shows for every customer, which products they like as a comma separated list:

You could do the reverse as well; for a certain product get a list of customers. I found myself using the listagg function a lot over the years, so hopefully you also find it useful if you didn't know about it yet...

You find the above examples online here.

Next to learning about the LISTAGG Oracle function, I also wanted to give this example to show that although APEX can do a lot of reporting out of the box, the more you know SQL the more options you have to show your data. Long-live SQL!!!

APEX and Font Awesome integration

In the previous post I talked about scalable vector images. In this post we will integrate Font Awesome in our APEX app, but the steps for the same if you would pick another library.

Step 1: we need to make the library available in our APEX application.

The easiest way to make the library available in your entire application is to add the following line in your Page Template:

How do I know it's that string you might ask. If you go to the Getting Started section of the library you chose it will tell you:

You're actually done now with the integration... You'll find some examples on the site to see the properties you can use (size etc.). The list of icons is also available here.

Here're some examples I use the image fonts for:

An image in a region

Sometimes I just want an image in a region, so I included the paypal icon (fa-paypal) and gave it a bigger size (fa-5x).

You see the result here:

Edit icon in a report

During the creation of a report region you can select the image you want, those are either images or text. Change the Link Icon to following:

Replacing the image will give your report immediately a fresher and more modern look

Icons in the Navigation List

For my navigation list I mainly use the "Vertical List with Subtext and Icon" list template.
By default it looks like this:

We want to say for every list item which icon we want to use. To do that edit the list template and change in the Template Definition:



to:

Note: I changed it in both the Current as Noncurrent List Template.

Now we can define the icon we want to use in our List at Attribute 02:

The final step to make the list look nice we need to make the icon float left so it's next to the text and we make it white when you hover. As we use an icon font we can just change the color with some css (you can add that on your page or in your page template in the Inline CSS position).

This is the result:

You find the online example at https://www.apexrnd.be/ords/f?p=DGIELIS_BLOG:FONTAWESOME

APEX and Scalable Vector Icons (Icon Fonts)

For a couple of years now webdesigners and developers don't use image icons anymore, instead we moved to scalable vector icons.

Before you had to create different images for the different formats and colours you wanted. Then to gain performance we created one big image with all those smaller images in it (called a sprite).
Next with some CSS we showed a part of the bigger image. A hassle...

In fact the evolution of using icon images you can perfectly see in APEX too. If you go to your images folder you will see many .gif files, all different icons:

In a later release APEX (till APEX 4.2) moved to sprites (see /images/themes/theme_25/images/), for example the Theme 25 sprite you see here.

The scalable vector icons (or icon fonts) solve the issues the image icons had. With the vector icons you can define the color, size, background etc. all with CSS. It makes building responsive applications so much easier, the icons stay fresh and crisp regardless of the size of the device and it's next to no overhead. This is exactly what APEX 5.0 will bring to the table: nice scalable vector icons, handcrafted and made pixel perfect by the Oracle team.

Image from Font Awesome 

In fact you don't have to wait till APEX 5.0 is there, you can add icon fonts to your own APEX application today.

There're many icon fonts out there, but here're some I like:

• Font Awesome - One of the most popular ones and probably included in APEX 5.0 too (next to Oracle's own library)
• Glyphicons - This library is for example used by Bootstrap
• Foundation Icon Fonts 3 - Used by the Foundation framework
• NounProject - I saw the founder at the TEDx conference and was very intrigued by it - they build a visual language of icons anyone can understand
• IcoMoon - This is more than an icon library, you can actually create your own library with their app. When my wife creates fonts in Illustrator, IcoMoon transforms them into a font.
• Fontello - You can build your own library based on other libraries on the net (the site shows many other popular font libraries I didn't put above), so if you can't find your icon here, you probably want to build it yourself :)

In the next post I'll show you how to integrate one of those in your APEX app.

APEX Conferences in 2015

In 2015 most APEX-only conferences are scheduled in history. I definitely recommend to attend at least one of the conferences as it's a great time to meet other people, industry experts and the APEX Development Team.

You'll find me at following conferences:

25-MAR-2015: APEX World - Rotterdam, the Netherlands

Every year a hit - and this year extra special as it will be at a different location - the beautiful SS Rotterdam. It's not decided yet which topics I'll present in the Netherlands.

9/10-JUN-2015 - APEXConnect - Düsseldorf, Germany

It will be my first time at a conference hosted by DOAG. I've heard so many great things about the excitement there is in Germany for APEX, so I look forward meeting the people over there.

On the 10th at 11h I'll present about the integration of APEX and Microsoft Sharepoint.

21/25-JUN-2015 - ODTUG KScope - Hollywood, Florida

I attended KScope for the first time in 2006 and since then returned almost every year. One of my most favourite conferences for sure. On Sunday the APEX Development is hosting the APEX Symposium: a full day of talks by the development team themselves. It also gives you an opportunity to meet them and many other experts in a nice informal setting.

This year these are my talks:

• A primer on Web Components in APEX
• How to make APEX print through node.js

There are some other conferences with great APEX tracks, for example GLOC, Collaborate, DOAG, UKOUG, ...

Next to the conferences there are many local APEX Meetups too. It's a totally different setting and concept compared to a conference, so definitely something to check out too. You can take your code to the meetups and ask questions or show what you did yourself.

You'll find me at most (if not all) of the Belgium APEX Meetups and I might attend some other meetups or conferences depending my schedule.

Look forward seeing you at one of the conferences or meetups.