With the long awaited early adopter release of Application Express 4.0 , we finally can create custom item types. This is something I’ve been waiting for a long time. And with APEX now using the jQuery and jQuery-UI libraries by default I decided to have a go on finding out how easy it actually is to create an item type based on the jQuery-UI slider widget . After reading and exploring some of Patrick Wolf’s  documentation, it was pretty easy to find out how to go about.
The first thing we have to do is to create the custom item type itself and adding some attributes to it. These attributes will show up when a new application control is created.
- First create the plugin by navigating to: Shared components > User interface > Plugins -> Create
- Give the plugin a name: “slider”
- Set the type of plugin to: Item
- Set the internal name to something like “com.test.apex.slider”
This name must be unique, so it’s agood thing to reverse your company’s domain before the plugin’s name to create a proper namespace.
For our slider we want a few attributes: minimum value, maximum value, number of steps and the width of the slider itself.
Navigate to the “Attributes region” and add the attributes as follows:
Once the attributes are created, we need to create a process that renders the html for our item type.
The jQuery-UI slider widget uses a DIV for the slider itself to project on, so we need to output that, along with a normal readonly textitem to show and submit the slidervalue back to APEX:
- Paste the code to render the custom item into the “Source” region.
One more thing we have to do before creating the actual slider item on a page:
- In the “Callbacks” region enter “render_slider” (or call to your package procedure) in the “Render procedure name”.
- Hit “Create” or “Apply changes”
To add a Slider, create a new page in your application and create a new “Page control”. Choose item -> Plugin and there you will see your newly created “slider” item type listed.
- Give your item a name like you normally would e.g. P1_AMOUNT, and attach it to a region.
- Supply your item with a label and give the item a width (this is actually the size of the input type showing the slider’s value)
When you hit “Next” you will see the list of attributes you created with your custom item type definition.
- Give the attributes some values and hit “Next”
- Optionally supply a source- and default value and create the item.
Now when you run the page, you should be seeing you slider.
Ofcourse you should always create a validation process and attach it to your item type to be sure no malicious values can be submitted, and you might want to replace the readonly input field with a regular one, so you can type in the value and sync with it.
I’m very surprised on how fast you can create your own item types, something I’ve been waiting for a long time. We’ve been using jQuery extensively on our projects and it’s great we finally can create and access custom attributes in a well-structured manner. Before that we had to “abuse” some default item attributes to supply values for let’s say the width of the slider, or create multiple versions of the jQuery-UI widgets on a page with their options hardcoded in them.
This feature truly adds unlimited possibilities to create custom interfaces, and even better: I think we’re going to see a lot of plugins available from the community any time soon !