Get jQuery Sortable Loaded
Sorting can be a powerful visual tool to use in any application where a user needs to reorder or sort lists. We are going to go through the basic steps to set-up and use jQuery Sortable and Oracle Apex to create a simple “To-Do” application.
First things first let’s get jQuery Sortable working in your application. In a future post, I will go through the process of using a different Sortable library, but for now jQuery Sortable will work just fine.
jQuery Sortable is included in the normal Apex build, but from the Apex documentation it is not active to keep overall page load times faster.
Include the URL below in your application or pages JavaScript File URLS section.
#JQUERYUI_DIRECTORY#ui/jquery.ui.sortable.js
Apex JavaScript File URL
Create “To-Do” page in Apex
Begin by creating a simple two-region page that will give us content to use with jQuery Sortable.
Next, let’s alter the standard delivered Classic Report template for “Comments”. Go to the application’s Shared Components >User Interface> Templates.
Under report templates find the “Comments” template and make a copy and give it a useful name.
Apex HTML Templates
Now open the newly copied Classic Report template from the steps above.
The intent in altering the template is to provide some HTML placeholders as helpers for jQuery Sortable, and to show us how to create some basic JavaScript interaction with the “To-Do” application.
Adding the data-id attribute will help single out the particular element that you plan on sorting.
Report Template Change
<li class="t-Comments-item #COMMENT_MODIFIERS#">becomes<li class="t-Comments-item #COMMENT_MODIFIERS#" data-id="#ELEMENT_ID#">
Now go back and set your page up to use the newly created template.The page should look similar to how the page looks below.
Page Layout
CREATE TABLE "TODO_LIST"
("TODO_ID" NUMBER NOT NULL ENABLE,
"NAME" VARCHAR2(100),
"DESCRIPTION" VARCHAR2(1000),
"STATUS" VARCHAR2(10),
CONSTRAINT "TODO_LIST_PK" PRIMARY KEY ("TODO_ID")
USING INDEX ENABLE
)
In the two regions we created previously (if using the TODO_LIST table queries below will get you started otherwise easy enough to adapt to your data.)
Query for the “To-Do” region
Make sure to change your classic report template to the one created earlier.
Also give the region a Static ID of todo
SELECT 'Grocery Getter' USER_NAME,
trunc(sysdate) COMMENT_DATE,
todo_id ELEMENT_ID,
name ACTIONS,
description COMMENT_TEXT,
null ATTRIBUTE_1,
null ATTRIBUTE_2,
null ATTRIBUTE_3,
null ATTRIBUTE_4
FROM todo_list
WHERE status = 'todo'
Query for the Done region
Make sure to change your classic report template to the one created earlier. Also give the region a Static ID of done
SELECT 'Grocery Getter' USER_NAME,
trunc(sysdate) COMMENT_DATE,
todo_id ELEMENT_ID,
name ACTIONS,
description COMMENT_TEXT,
null ATTRIBUTE_1,
null ATTRIBUTE_2,
null ATTRIBUTE_3,
null ATTRIBUTE_4
FROM todo_list
WHERE status = 'done'
Customized Report Template
The next post will bring it all together and introduce Sortable lists with some AJAX processing.
0 Comments