Wednesday, January 06, 2010

APEX 4.0: My first Plugin - Editable Select List / Combobox

Before I just played around with APEX 4.0 and tested the new features and created some quick apps, but a week ago I made the decision to really see what APEX 4.0 can give me in a real project.

So the plan I had was to start this project in APEX 4.0. It's a risk as I might never be able to import it again in the next version of the Early Adopters release, but I made this conscious decision because I really wanted to see how much time APEX 4.0 could save me.

I'll do a proper blog post about the outcome once I finish the project, but I already wanted to discuss the Plug-ins part of APEX 4.0.

In my project a person need to be able to see and select a category. If the category doesn't exist he needs to be able to create it. So if I was in APEX 3.x I would look at using a select list or a popup lov. Possibly I would add a plus button next to it and write some javascript code to show a text item to enter a new category if it wasn't already in the system. Alternatively I would use some JQuery plugins like the autosuggest or an editable select list / combobox.

But in APEX 4.0 there is a build-in item type "textfield with autocomplete" which I could have used, but one of the drawbacks of that is that you can't really look what is in the system already without typing some letters. So I searched for an editable select list, but that item type didn't exist.

It would take me about 5 minutes to write some custom JQuery code and hook up the plugin to get an editable select list, but I would need to do that for every project again on every page I want to use it. So I thought it's a good moment to create such item type myself, which I would be able to reuse in every project.

It took me about 3 hours to understand how the plugins worked, read Patrick's documents and look at his examples and use that knowledge to create my first plugin. So I need to use this plugin 36 times to be break-even compared to if I did it the custom route.

But the big advantages of using the plug-in are:
- the implementation will be every time the same
- more people can use
- you don't need to know javascript to get things working

You can see the Editable Select List Plugin working and be able to download it here.

To install the Plugin in your own application, go to Shared Components > Plug-ins and hit the Install button.

Tell it in which app it needs to be installed into (Plug-ins are app specific).


And review the code, my plugin is called AE Sexy Combo, because it's based on the Sexy Combo JQuery plugin.


So now you should be able to create this item type on your pages.

You add a new item of type Plug-ins and select the AE Sexy Combo

You give it a name and you need to add a select statement to it (in the LOV section of the item) and it's ready!

Conclusion; it didn't take me too long to understand how the plugins worked especially not if you investigate the existing examples which you can use as a starting point.
I found it not easy to find my coding mistakes e.g. I'm not sure the plsql code gets parsed, but it took me some time to find I missed a ")" somewhere. But I used the apex_plugin.debug_page_item and found that helpful.
It would be nice to be able to upload multiple files at once and be able to reference the css like you do with javascript e.g. apex_javascript, get an apex_css.

I like Plug-ins very much, I think if people start to share that we can extend APEX ourselves all the time without having to wait for another APEX release. It's a very controlled environment, so much more secure to use especially for non-advanced developers.

24 comments:

Mark Lancaster said...

Hi Dimitri

No offence intended towards you, but definitely towards the author of "Sexy Combo".

This is a rip off of the Ext.ComboBox.

Some of the property names, and even the image used is a direct copy.
The author managed to mess up some of the CSS, and hasn't managed to hook up the image to handle the mouse-over, when-button-pressed functionality.

The author hasn't even had the decency to acknowledge Ext JS on his web-site.

Louis-Guillaume said...

Plugins are great! Another good example.

Anonymous said...

Why would your client want you to create their project in APEX 4 when it is still EA?

It sounds like you are just playing with clients money!!!

Mark James said...

Agree with Mark L, def. a ripoff.

Paul D. said...

Dimitri it doesnt seem to work. I typed 'Canada' into the list but it didnt save it in the list?

Unknown said...

@ Mark: they look similar, but I liked this one because it was based on JQuery and I didn't need the Ext JS framework. You can always leave a comment on the creator's blog

@ Anonymous:
It's not for a paying customer, it's a project for my wife's business. Next to that all logic is in packages and scripts. I just use APEX as a front-end. To redo the project in APEX 3.x would only take me a couple of days, but at least I know how everything will look like.

Unknown said...

@ Paul, it depends how you go out the list.
You can access the value with
$('input[name=p_t01__sexyCombo]').val()

I would need to polish the plugin a bit to do the correct insert into the table if it doesn't exist yet etc.

Anonymous said...

Nice Work.

Can this Combo also be used in Tabular Form?

Stew said...

Dimitri,

I also noticed that the functionality to add a new value didn't insert into the list. I must be confused because I thought that was the primary purpose of creating this plug-in. Did I misunderstand the unique functionality you are trying to provide?

It looks nice either way.

Thanks for forging ahead on this. Hopefully I get a new Apex project soon where I can start implementing some plug-ins.

Buzz Killington said...

I also am confused at the purpose other than making a select list into an auto-complete one.

It is not adding a new entry which is sort of how you present it.

Dimitri Gielis said...

@Buzz @Stew you can add your own text, however in the plugin I created I didn't add the changeCallback function. I worked further on this but hit other issues now if I want to submit this item. I need to call some javascript before apex.submit, but I'm not sure yet how to implement that in the plugin directly.

This is an EA plugin, I wouldn't use this yet in a production app... but I still have time to finetune it for the final release of APEX 4.0 ;-)

Dimitri Gielis said...

I'm also researching an alternative to the Sexy Combo; editable select list at http://coffeescripter.com/code/editable-select/ but I would probably make this as another plugin.

Before I post a new version I'll create a full test case/app so you see how things work with submit etc.

Thanks for all the feedback,
Dimitri

article marketing said...

I've just come across to your blog finding that it is a very interesting blog!

mnolan said...

I've found that for posting the page all you need to do to get it to work is: don't manually set the Id and set the following two options to an empty string: suffix: "", hiddenSuffix: "".

It seems that when you have multiple DOM elements with the same name e.g. p_t01, it takes the last one in the document, which happens to be the Sexy Combo's hidden value.

Anonymous said...

Link not working for 'You can see the Editable Select List Plugin working and be able to download it here.'

Dimitri Gielis said...

That is because it was written for the Early Adopter release of APEX 4.0.

I'll release a new version for APEX 4.0 production in the next weeks.

Unknown said...

Have you gotten round to a version for Apex 4.0 production yet? Thanx!

dare to win said...

Not able to download plugin pelase help..

Thanks
Saurabh

Anonymous said...

link is broken, pls give correct one...

Anonymous said...

Hi Dimitri

The link to download the plugin isn't working, is it possible to get the new link

MO

Stefan said...

Hi Dimitri,

Should we wait for a working version of the editable Selectlist/combobox plugin or can you send me the sources that i can finish it!?

regards
Stefan

Stefan said...

Hi Dimitri,

Can you send me the sources of your plugin so that i can finish it for Apex 4.0, or do you want to finish it yourself?

regards
Stefan

Anonymous said...

Hello Dimitri.
I'd like to use this plugin.
The downloadlink doesnot work.

http://tryapexnow.com/apex/f?p=AEPLUGINS:FIRST

Is there another possibility for downloading the AE Sexy Combo?

Groeten, Martienes de Wit.

Dimitri Gielis said...

My plugin is already old, there are better options now e.g. select2 http://www.apex-plugin.com/oracle-apex-plugins/item-plugin/select2_344.html