Multiple File Upload Plugin – v2.0 Released

The following improvements have been made in v2.0 of the Multiple File Upload for Oracle APEX:

  1. Added support for saving files to a collection
  2. Added support for saving to a BFILE column and File System Directory
  3. Added 2 new events for when all files have finished uploading (success or failure)
  4. Changed the plugin event labels
  5. Added the option to auto close the dialog when all files have been uploaded successfully
  6. Added the option to show/hide previous uploads in the dialog
  7. Changed foreign key column/item to support up to 5 columns/items
  8. Bug Fix: File Size column value was always null



Peeking behind the scenes…

It’s been a while since my last post but this is simply because I’ve never been so busy in my life. Both Peter, myself, and the team have been working long hours 7 days a week, but… today I’m taking a moment to breathe and give you some insight what’s happening behind the scenes within the formation of our new company FOEX GmbH.

It’s all about plugins

We have built (and continue to build) a framework of plugins called FOEX that is essentially a new foundation layer for APEX application development. We have been modularly building these plugins for over 12 months and constantly refactoring them to work cohesively together or independently. Using several plugins or the entire suite, developers can build rich internet applications backed by the Sencha Ext JS 4 UI library and Application Express. Visit tryfoexnow.com to keep an eye on our progress.

But plugins are just the beginning

My personal drive for building plugins is not for the achievement/reward of writing them, but to use them, and use them in multiple different ways. The ultimate goal is so we can achieve any complex development requirement thrown at us. Now that we have the first version of the framework almost ready, we can start building applications. This is the exciting part which allows us to see a whole range of different possibilities and understand where we still need to improve to make things even better than they currently are.

Framework Experiments

In order to document and use the plugins we are working on ways to demo their features in a real world usable way. One of the most usable ways we can think of is to build a new application to assist the current APEX builder and look for ways to help improve developer productivity whilst building applications using our plugins. Both Peter and myself are devoted SQL Developer users and we want to bring some of those GUI capabilities to APEX. Here’s a screenshot from our LAB of our FBuilder project that we’re designing to do just that! (and built using just our plugins in APEX)

APEX Builder Assistant

Inspiration has come from a lot of places, a special mention goes out to Noel Portugal for his OraTweet solution released a number of years ago… I hope Noel doesn’t mind us promoting his work and drawing inspiration from with our tweet deck inspired demo using our twitter and layout plugins.

Tweet Deck & Oratweet inspired sample page


To ensure we have the most secure plugins available we have formed an alliance with Recx Ltd but our partnership goes beyond that. We want people to build the most beautiful and secure applications possible, and to do that we want to evangelize how important security is and embed it within the cycle of your development process. But we aren’t security specialists and that’s why we called on the best in the business, Recx Ltd, to be part of a new era in APEX development setting a whole new standard.

Release Dates

It won’t be long before we’re releasing our new company website and opening an invitation up for interested parties willing to be involved in our hosted framework beta testing program, not dissimilar to apex.oracle.com, with a downloadable release to follow after completion of the beta trials. For those that have immediate project requirements we will be open to discussions to help get you moving ASAP before our official release launch.

Spreading the Word

Peter and I will both be at the Austrian User Group conference day in June, and will also be attending Kscope 12 and presenting. If your interested in what we are doing we urge you to come and meet us and talk with us. We’re both passionate about APEX development and want to plant the same seeds in you, that were planted in us.


The amount of work to get where we are has been huge, but it pales in comparison to the mountain that is ahead of us which we have started to climb. We’re on a long journey and sometimes we underestimate the amount of time it takes to get to the next base camp. The point to take away is that we’re always moving forwards and our first base camp is now in sight. We have an ambitious roadmap to bring new applications to life, release version 2.0, produce a Sencha Touch framework for APEX, introduce new modular solutions similar to interactive reports, the list goes on… and on…

So on a final note, as the saying goes “Rome wasn’t built in a day” and it wasn’t…. but soon your applications might be ;-)


APEX Plugin – Body Chart

Recently I had an inquiry via my website asking whether I was able to create a selectable body chart APEX plugin for a physiotherapy practice so they could easily highlight joint pain and record information against these selected areas. One of the challenging requirements was to allow fine grained selectivity of 16 areas on each hand, whilst working within a very limited budget.

Initially I was hesitant, since I had never done this, but I recalled reading a number of blogs in the past which described using Raphael.js, an open source SVG drawing library which easily allowed you to hook in javascript events on mousenter, mouseout etc. to obtain the details of the selected area and add colour fills. So armed with this knowledge I thought I would take a risk and give it a go as I could see the potential for other uses, and to my surprise it was actually a lot easier than I expected it to be.

Below is a Youtube video to give you an understanding of how the plugin works and here’s where you can demo the plugin in action.

The following blog post should provide you the necessary javascript code example for you to build the map. I used it as my starting point for the item plugin and I found it really easy to follow. Since the post covers most of the javascript side the rest of the post will focus on creating the actual supporting JSON and SVG outline image as I found this to be the most troublesome and time intensive part of the task.

These are the high level steps which I performed.

  • Hand draw an outline on a piece of paper
  • Scan the outline into a jpeg or other image format
  • Open in Adobe Illustrator and use the “Live Trace” feature, ensuring that your divided sections remain intact e.g.
  • Save the file as SVG and select the “Convert to Outline” option
  • Open in Notepad++ or an equivalent editor
  • Extract the “d” value from the Paths which should look something like the following:
  • Each of these paths need to defined in a single JSON object which Raphael.js will draw e.g.
    apex.svgMaps = apex.jQuery.extend({}, {
       BodyMapPaths: {
          "part1": {
             name: "Frontal Region",
             "path": "M145.044,18c0,16,0,32,0,48c-10.667,0-21.333,0-32,0c0-16.333,0-32.667,0-49c4.292-2.042,8.513-4.153,14-5C134.863,12.181,140.377,14.667,145.044,18z"
          "part2": {
             name: "Occipital Region",
             "path": "M406.044,48c-0.716,2.715,4.716-0.715,4,2c0.92,5.92-1.711,8.289-2,13c-2.35,1.65-5.688,2.313-6,6c-14.333,0-28.667,0-43,0c-0.512-2.822-2.178-4.488-5-5c-1.203-3.796-2.128-7.872-3-12c-1.053-3.719,3.372-1.961,4-4c-2.062-22.062,6.979-33.021,24-36C398.786,12.745,409.515,27.321,406.044,48z"

    Note: in order to work out what body part each path was I opened the svg file in notepad++ and replaced the path XML with insert statements and loaded the data into a database table. I then performed an update post load to give each path a name/id the rownum sequence so I could identify what it was on hover to then perform the name translation. e.g.

        "SEQ"             NUMBER,
        "ID"              VARCHAR2(4000 BYTE),
        "NAME"            VARCHAR2(4000 BYTE),
        "DESCRIPTION"     VARCHAR2(4000 BYTE),
        "B_PATH"          VARCHAR2(4000 BYTE),
    -- Load the data before updating the null columns with the row numbers e.g.
    INSERT INTO svg_bodymap_parts(b_path) VALUES('M111.044,19c2.331,13.669,0.335,31.665,1,47c-4.021,0.688-5.708-0.958-9-1c-2.524-3.143-2.982-8.351-4-13c-1.053-3.719,3.373-1.961,4-4C101.946,34.569,104.587,24.876,111.044,19z');
    INSERT INTO svg_bodymap_parts(b_path) VALUES('M146.044,20c7.416,4.326,10.279,17.154,8,28c-0.715,2.715,4.715-0.715,4,2c0.36,6.693-1.135,11.532-4,15c-3.22-0.22-4.231,1.769-8,1C146.044,50.667,146.044,35.333,146.044,20z');
    -- Set a unique identifier for each path
    SET seq = rownum-1
    ,   name = 'part'||rownum
    ,   id = 'part'||rownum
    -- Extract data in JSON format since we will store it in
    -- a static javascript file since the image will never change
    SELECT '"'||id||'":{name: "'||name||'", "path":"'||b_path||'"},' json
    ORDER BY seq

I did have some issues getting all the selectable areas traced properly in Adobe Illustrator and it’s not the prettiest of outlines but it provided the customer everything they needed and they were quite satisfied. You could always outsource this part to an experienced graphic designer to get a higher quality image produced.

Also one of the labour intensive tasks was performing an English translation of the paths one by one, and there were 190 paths (a path is a selectable area/shape). Add to this a review process which meant I had to repeat this step all over again after having to add more selectable areas to the body.

An SVG image is outputted top to bottom left to right, which means a change at the top of the image will change the sequence of all paths below. I’d strongly recommend that if you are going to build a similar plugin that you get the image outline correct the first time especially if you have outsourced the map to a graphic designer. As it will reduce your costs and associated headaches.

To give you an idea of the amount of time required to build the plugin, I was able to produce the entire solution in just under 4 days which included the initial prototype, drawing the image and converting to SVG, client meetings, a review process, creating the jQuery plugin, creating the APEX plugin, testing across IE6-9 Firefox Google Chrome, and producing documentation.

Of course the amount of time may vary depending upon how familiar you are with javascript and creating APEX plugins but the good news is that once you’ve done the process once it will be much easier second time around.

Pages ... 1 2