Skip navigation.

Dimitri Gielis

Syndicate content
I created this Blog to share my knowledge especially in Oracle Application Express (APEX) and my feelings ...
Updated: 14 hours 57 min ago

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

Mon, 2015-01-12 16:36
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.
Categories: Development

Representing many-to-many tables in a Report

Sun, 2015-01-11 14:08
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!!!

Categories: Development

APEX and Font Awesome integration

Fri, 2015-01-09 17:30
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:

#LIST_LABEL#

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
Categories: Development

APEX and Scalable Vector Icons (Icon Fonts)

Thu, 2015-01-08 17:30
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.
Categories: Development

APEX Conferences in 2015

Wed, 2015-01-07 17:30
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.

Categories: Development

Generating sample data for your APEX application

Tue, 2015-01-06 17:30
You need some sample data sometimes too? When I'm showing some new concepts at a customer or when I'm doing some training I just want some "random" data. Well, it's not really random data, it's a specific type of data I need depending the column and it should be a text that is somewhat meaningful and not hard to read like "1RT3HFIY".
When my wife is doing design and lay-out and she needs text, she's using Lorem Ipsum. In fact it's build in the Adobe tools she's using and the text looks readable (although it isn't). It would be so cool if for example SQL Developer had that feature "populate my table(s) with sample data" (even keeping relationships into account).
Before, I used data from all_objects or generated data with dbms_random and a connect by clause for the amount of records I wanted, but it wasn't ideal. I also looked at scrambling my data, which is nice because existing relations keep intact, but for me it didn't really work nicely if I needed to scramble a lot of columns. There're some companies having solutions for generating/scrambling data too, but below I want to share what I'm currently doing.
Go to generatedata.com and enter the definition of your table and which kind of data you want per column.

Once the definition is there you can define how you want to receive the data. I found the SQL tab didn't really work well, so I use CSV as output.
Next in Oracle SQL Developer I right click on my table and say "Import data" and select the csv.It automatically knows the format etc. and maps it correctly to my table. Hit Next and you have your sample data available :) 

You can also load the data straight from the Data Workshop in APEX.


Categories: Development

Highlight negative numbers in an APEX Report (css only)

Mon, 2015-01-05 17:30
Here's a screenshot of the result we want: the negative numbers are highlighted in red.

There're many ways to achieve highlighting certain areas in a report, but depending the complexity of the logic that defines what gets highlighted I use one of the following three techniques:
  1. CSS only
  2. CSS and a Dynamic Action with one line of JQuery
  3. CSS and a column in the SQL query that defines the class
In this post I will explain the first technique, the other two are for future posts.
CSS only solution to highlight a negative number
Create a classic Report (the same technique works for an Interactive Report). Edit the number column(s) you want to turn red in case it's negative and modify the Column Formatting as below.

I'm wrapping a span around my column (AMOUNT) and use the HTML5 data- attribute to store the number in that attribute. Doing this will allow me to use a CSS selector to see if it's a negative number or not. Unlike JQuery, CSS doesn't have a :contains selector, if it did, we didn't have to create the extra data-number attribute.

In the Page Attributes, in the CSS section we add following inline css (note you can add this to your Page Template too, so it works for all pages):

What the CSS is doing: every span with as attribute data-number that contains a - (dash - which means it's a negative number) we give the color red. 
That's it...

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

Categories: Development

Creating a new APEX application

Sun, 2015-01-04 17:30
Previously I announced I would start a chain of blog posts related to Oracle Application Express. Next to the blog posts I'll build up a supporting APEX application where you can see the result of what I explain in real-time.

So, to start the chain I'll create a new APEX application. Almost in every project I start my APEX application the same way. Note that the screenshots are from APEX 4.2.6, as of the time of writing, that is the current latest production release, but I'll mention how things change with APEX 5.0
First I create a APEX application with the wizard (Create > Database application > Next > Next > Next > and use following settings for the Application Attributes:

For my navigation in the application I use Lists. Tabs are old school, so in this screen I changed the default One Level Tabs to No Tabs. If you like Tabs you can always apply a Tab template to your List. Note that in APEX 5.0 this is standard behaviour - APEX will create a "Navigation List" which you can give any look and feel you want.
The date format I filled in too. I like the DD-MON-YYYY format as there's no discussion what the format is (unlike dd/mm/yy or mm/dd/yy etc.)
In APEX 4.2 I start from Theme 25 as that is the responsive theme, so it will adapt to the type of screen it will be rendered on.

In APEX 5.0 I would go for the Universal Theme. That will be responsive and fully customisable through Theme Roller, but I will blog more about that once APEX 5.0 EA3 is released.
Next I give the application an alias (in Application Attributes), in my case DGIELIS_BLOG. That allows me to reference the application in an easier way than to remember the id of the app. 

I'll always create two pages: 
  1. the Global Page (Typically Page 0) which will serve the content that needs to be available on every page for example my List for navigation and my Breadcrumbs region.
  2. the Feedback Page, so people can immediate feedback of my application. This feedback will be captured in Team Development, a fully integrated project management feature of APEX.

The Feedback Page I customise further:


The Application and Page ID I make hidden as they are of less use for the customer. The A, X, Y items I delete. The APEX Development team created those items to align the items better (start-stop table), but with the responsive theme 25 they are not necessary and just overkill. I hope in APEX 5.0 those items are not there anymore.Finally I give the buttons a template (button Template) and make the Submit button hot.

One of my best practices is to make at least one button per page "hot" - the button that is likely to be used most of the time - as that makes the page more lively and user friendly.

The last step for my new application is to create my main navigation. So I create a List (Shared Components > Lists). I create a static List with as name Navigation and I enter the Home Page as first item in the list. Note that in APEX 5.0 such a list will automatically be created for you.

I will add this list to the Global Page (0) - add new Region without Template and select the list.
If you like Tabs, you can chose the Page Level Tabs List for your List Template:

If you selected a List Template different than Tabs you are done, but if you want to see real Page Tabs, you need to read further.
Before those Tabs are visible we need to make sure our Page Template supports tabs.
As during the creation of the application we chose not to use tabs, the default Page template didn't include a "Tab space", so we need to change that.
Go to Shared Components > Themes - Edit Theme (Tasks) - and select for your Page: One Level Tabs:



Now if you place the List Region on Page 0 at Position 6 the List will show up as Tabs as you expect.

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

Tomorrow we'll add a report and highlight the negative numbers (with just some css!).
Categories: Development

2015 - "The" Year of Oracle Application Express (APEX)

Sun, 2014-12-28 16:04
The year 2014 was the 10th anniversary of Oracle Application Express (APEX). I still find it unbelievable 10 years have pasted. Time flew by... you might think that after 10 years of building APEX applications the technology is out-dated or you get tired of it, but more the opposite is true.

Oracle Application Express is a web technology and the web evolves fast, which keeps it interesting and fun. We can follow the latest and greatest in web world, integrate it with APEX and give our apps any look and feel we want. Next to that, APEX is build on top of the Oracle Database, so we can leverage all the functionalities of the database.

So the longer you work with the Oracle database and the more you know of web technologies, the more you can do in APEX. That's why I don't find it boring after 10 years - it's fun!

And now 2015 is just around the corner, so what about APEX?



The 5.0 release of APEX will go live in Q1 - it's the biggest release of Oracle Application Express in the last 10 years. It has the most advanced development interface in history. Every single page is updated within the Builder and it comes with a gorgeous new UI.
In short: it's the best release ever.

So the year 2015, will be "The" year of Oracle Application Express.

To celebrate "The" APEX year - I put myself a challenge ... on January 5th I'll start my chain of blogging and will do a new (APEX related) blog post every single day.  I hope to get a chain of at least a 100... let's see how far I get :) thanks for being part of it!
Categories: Development