Drag and drop in APEX 4.1

Hi everyone,
I'm wanting to create an APEX application but I am a novice when it comes to APEX.
One of the key points to my app is that it will need to be able to have drag and drop capabilities. Not drag and drop data but drag and drop objects like in this blog post: http://rutgerderuiter.blogspot.com/2008/07/drag-planboard.html
That article is pretty much what I want to do. I was just wondering if this is easier in the most recent version as that blog is several years old.
Does anyone know if there are newer features that make this easier? Any relevant links?
Thanks!
-Joe

Hi jarola,
I was looking for a sample application that provides a fancy "drag and drop" and found your thread here.
I checked your link and the online version of the kanban board - veeeery great! Exactly what I'm looking for!! thumbs up :-)
Since I want to use it in an APEX application, I downloaded your sample application. Import was successful and I also took care of your "readme.txt":
"When installing application on Application Express release 4
After installation, you need modify page template.
Move #HEAD# substitution string in page template header before javascript libraries."
But despite, I still get following error message when trying to create a new board:
TypeError: $.htmldbJSON is not a function
I tried to place the #HEAD# in different places, nothing seems to help. :-(
I'm running APEX Version 4.2.0.00.27 .
It would be glad if somebody can help me to find what I'm doing wrong here...
Thanks & regards
FireFighter

Similar Messages

Drag and drop in apex 4.0

hi,
i am just wanna to have a page in oracle apex 4.0 with drag and drop region to retrieve its data from a database table and to arrange them through using the drag and drop method into another region that allow me to get the arranged set id's to insert it into database table
is there is any solution to these problem please
thanks a lot,,
Radwa

Maybe if you asked on the apex forum...

APEX Bug - Drag and Drop

Hey all
I've discovered a rather annoying bug in APEX's drag and drop item layout.
I'm designing a form and putting mainly text fields down in a column.
Every now and then one of these text fields needs to have a text item (display only) beside it.
The problem is, say if I add 2 display only items beside 2 different text fields, it "forgets" about one of these items when I press the Next button.
It just comes up with the next screen - but it's missing one of the display only items!
Then, seemingly at random, the missing item will (after much editing of the item layout) just appear again at the top of the item list! (when it was positioned somewhere completely different before).
I've managed to reproduce this multiple times.
Makes creating and editing pages with items a very annoying chore!

Oh, ok.
Well, it happened to me every time on 2 separate item regions.
I'll just go and try to do it again... See if it still 'works' :)
ok well it's still doing it...
I just added 2 display only items to my existing item list, and NONE of them were actually added.
Here was my display list:
Region: Collection Details
186 P2_COLL_DAYS Checkbox
193 P2_COLL_TIME Text Field
195 P2_ALLOW_MULTI_TRANS Checkbox
196 P2_ACC_COUPON_TYPES Text Field
198 P2_COUPON_OPTIONS Text Field
200 P2_MESSAGE_1 Text Field
201 P2_MESSAGE_2 Text Field
202 P2_MESSAGE_3 Text Field
203 P2_MESSAGE_4 Text Field
204 P2_MESSAGE_5 Text Field
205 P2_MESSAGE_6 Text Field
22 Itemsand I tried to add a display only item after both of these:
196 P2_ACC_COUPON_TYPES Text Field
198 P2_COUPON_OPTIONS Text Fieldname: "P2_ACC_COUPON_TYPES_TEXT"
text: "[e.g. 1,2,3]"
and
name: "P2_COUPON_OPTIONS_TEXT"
text: "[e.g. 5 or 5,10,15]"
And neither of them showed up on the next page (where you confirm and adjust the items).
I'm using Internet Explorer 7.

Use drag and drop to sort data in report

Hello!
I found a good description to sort data in a Tabular Form per drag and drop.

Here is the url: Read Article - Drag &amp; Drop tabular form rows
It works fine if one follow the hint from Baki (For apex 4.2 one have to adapt a css class).
Afterwards I tried the same with an Interactive Report. It nearly works.
I once again had to adapt a css class.
I used the
apexir_WORKSHEET_DATA
class instead of the
uReportStandard
in the JavaScript for the Interactive Report.
Everything went fine. Except the "Save the Thing to the DB" issiu did not work.
The following code do not work (the "APEX_APPLICATION.G_FROWID.COUNT" is allways 0):
FOR i IN 1 .. APEX_APPLICATION.G_FROWID.COUNT
LOOP
UPDATE emp SET sort_order = i WHERE rowid = APEX_APPLICATION.G_FROWID(i);
END LOOP;
Does anybody know why?
Best thanks,
Ilb

Is it possible to create a tree with drag-and-drop functionality using ajax

I saw these samples;
Scott Spendolini's AJAX Select List Demo
http://htmldb.oracle.com/pls/otn/f?p=33867:1:10730556242433798443
Building an Ajax Memory Tree by Scott Spendolini
http://www.oracle.com/technology/pub/articles/spendolini-tree.html
Carl Backstrom ApEx-AJAX & DHTML examples;
http://htmldb.oracle.com/pls/otn/f?p=11933:5:8901671725714285254
Do you think is it possible to create a tree with drag-and-drop functionality using ajax and apex like this sample; http://www.scbr.com/docs/products/dhtmlxTree/
Thank you,
Kind regards.
Tonguç

Hello,
Sure you can build it, I just don't think anyone has, you could also use their solution as well in an APEX page it's just a matter of integration.
Carl

Drag and drop - like the builder?

Hi team,
It's nice to have drag-and-drop repositioning in the builder. It would be even nicer to be able to offer it to my users.
Is there any sort of guidance available on how to replicate the functionality of P5150 of the builder?
Thanks
jd

Hi JD,
Yes absolutely you can do that in APEX, however there is not really built-in support for it (although you can refactor the code used in the builder if you choose), but instead of doing that I would recommend using a 3rd party javascript library to make it much easier, two of the most commonly used for that type of drag-drop effect (generally speaking) are -
Yahoo UI Library - http://developer.yahoo.com/yui/dragdrop/
jQuery UI Library - http://ui.jquery.com/demos/draggable
I've used both and my preference is the jQuery library (for a few different reasons that I won't go into here), however if you follow their demos/guide you should be able to see just how easy it is to incorporate it into APEX (there is little APEX-specific coding you need to do really).
Hope this helps,
John.
Blog: http://jes.blogs.shellprompt.net
Work: http://www.apex-evangelists.com
Author of Pro Application Express: http://tinyurl.com/3gu7cd
REWARDS: Please remember to mark helpful or correct posts on the forum, not just for my answers but for everyone!

Drag and Drop functionality for SVG charts.

Has anyone been able to get a drag and drop functionality with charts?
I've read where Vikas was able to accomplish this with reports, but, unfortunately, it was an old post and his example is no longer available.
I understand that this is more on the browser/presentation layer rather than the back-end, but, judging from the replies from the mainstays in this forum along similar lines, I'm hoping someone may have accomplished this already.
I'm trying to get this to work for a "dashboard" type application I'm trying to prove out using HTMLDB.
Your responses are appreciated.
Thanks

Hello,
I've done drag and drop using the Adobe SVG Viewer before in a whiteboard application built on top of ... you guessed it... Apex. Unfortunately I do not have an example I can share with you but I know it can be done because I did it, trust me ;) . I am planning on building out that application as an application anybody can download and use but unfortually it will be bit.
Your best bet at the moment is looking on google http://www.google.com/search?q=svg+drag+and+drop there are quite a few examples.
Oh also look at this file in the images directory /images/javascript/svg_js_includes/svg_common/oracle.svgNodes.js it has quite a few helper functions and that file is included in every chart by default so there are functions you can use, (no drag and drop unfortunalty)
If you have can lock down the users in your environment to use only Firefox or Safari you can look at canvas as well it's pretty handy and can do alot of the same stuff
http://developer.mozilla.org/en/docs/Drawing_Graphics_with_Canvas
and of course some simple examples in Apex
http://apex.oracle.com/pls/otn/f?p=11933:78 (it runs on keypress in the textarea I use it to mess with Canvas constructs)
Carl
Message was edited by:
Carl Backstrom

Drag and Drop Items

Dear all APEX developers,
i have a problem when rearranging items in the drag and drop layout and press next i get the following error:
report error:
ORA-29262: bad URL
anyone can help?
Best Regards
Ahmed

I remember that I fixed a bug in that area for our 4.0 release. So with 4.0 you shouldn't get this kind of error. What I remember the error occurs if you have special characters in the labels of the page items.
Regards
Patrick
My Blog: http://www.inside-oracle-apex.com
APEX 4.0 Plug-Ins: http://apex.oracle.com/plugins
Twitter: http://www.twitter.com/patrickwolf

"drag and drop layout missing in 4.2"

The drag and drop layout is missing in 4.2
So we have no GUI to arrange regions or items in a region...
So I'm not sure if going to 4.2 is a step forward at all?
Apex needs to be more drag and drop configurable not less surely ?

Send Apple feedback. They won't answer, but at least will know there is a problem. If enough people send feedback, it may get the problem solved sooner.
Feedback
Or you can use your Apple ID to register with this site and go the Apple BugReporter. Supposedly you will get an answer if you submit feedback.
Feedback via Apple Developer

Drag and Drop Layout with items attached to Page 0 Region Bug

Hi,
I have a region on P0 (P0_REGION) and multiple page items (not on page 0) are associated to the region. When I go to "Drag and Drop" the page items I see all the Page Items for the given page and all the Page Items that are linked to a P0 Region. For Example:
P0:
Region: P0_REGION
P100:
Items: P100_X, Region: P0_REGION
P200:
Items: P200_Y, Region: P0_REGION
Now on P200, click on "Drag and Drop" above P200_Y I'll see P100_X and P200_Y.
This is a bit of an issue if you have a lot of items that are linked to a region on Page 0 but actually belong to another page.
Is this a bug?
Thank you,
Martin Giffy D'Souza
[http://apex-smb.blogspot.com/]

Look at the following link:
Drag and drop - like the builder?

ExtJS Drag and Drop Tree Implementation

Hello!
I found this wonderful example of a drag and drop tree, with the ability to save the changes, but I'm not quite sure how to go about implementing it. Can someone point me in the right direction?
Thank you,
Tammy

Hi Tammy
My example uses drag and drop also, so the details are there.
Regarding your question on how to get started:
Really it's just a case of breaking the problem down into managable parts until you have solved all the pieces.
Start by implementing the "AJAX form using globals" at http://apex.oracle.com/pls/otn/f?p=200801:2011
It shows you how to pass data back to the database using AJAX with the WWV_FLOW variables, which are there for exactly that purpose.
Make sure you also understand the response Ext is expecting, use Firebug to examine the responses in both examples.
Once your comfortable with that, try loading a tree using an application process.
You can create stubbed responses initially for the application process, e.g.
htp.p(^'[{
    "text": "adapter",
    "id": "source\/adapter",
    "cls": "folder"
    "text": "dd",
    "id": "source\/dd",
    "cls": "folder"
    "text": "debug.js",
    "id": "source\/debug.js",
    "leaf": true,
    "cls": "file"
}]^');From there, add drag and drop calls, replace your stubs with production code...
I use application processes as a gateway, simply passing requests through to a database package.
It's not a small task by any means, so allow plenty of time for learning and understanding.
Regards
Mark

How to drag and drop nodes in Tree?

Hi,
I want to drag and drop nodes in the tree. For example a tree represents the hierarchy of employees reporting in an organization by using tree.I want to change the reporting an employee visible in the tree by simple drag and drop operation in place of going to another form for updating each employee record indiviually.
Regards
Piyush

Ron,
I looked into implementing drag / drop in one of the apex trees I created today and ran across this thread. Thank you Ron for the links, it helped a lot.
I added the code below to my page's "Execute when Page Loads" (tree region id is "tree_reg") and the tree is now drag/drop enabled.
It did break the [+] icon from collapsing the tree though ... but the apex.widget.tree buttons still work
var regTree = apex.jQuery("#tree_reg").find("div.tree");
regTree.tree({
callback : {
onmove: function(NODE, TREE_OBJ, REF_NODE, TYPE)
{alert(NODE.id+" "+TREE_OBJ.id+" "+ REF_NODE);}
});Next, I plan on creating a AJAX call using NODE.id, TREE_OBJ.id, and REF_NODE
V/R
Ricker

HOW TO DRAG AND DROP IN CALENDAR ?

Hi guys,
Once again I rely on your infinite wisdom to help me out with a little question I'm having regarding the Drag and Drop Functionality in the new Calendar control of the new APEX 4.1 (pretty cool by the way).
The thing is that I'm trying to create a simple little page for scheduling purposes, basically for having a centralized place in which the members of a team with a remote manager put the info of which days are they planning on working and when will they start their shift and when they gonna leave, for that purpose I made use of the new Calendar control (pretty neat) which is working fine and is being fed by the following query (note that the field "DISPLAY_COLUMN" is the value that is displayed on the calendar):
SELECT
CASE WHEN eas.IS_HOLIDAY = 1 THEN ea.FNAME || ' (OOTO Using a make up Holiday)'
WHEN eas.IS_VPN = 1 THEN ea.FNAME || ' (' || to_char(eas.SHIFT_START,'HH:MIPM') || ' - ' || to_char(eas.SHIFT_END,'HH:MIPM') || ')' || ' on VPN '
WHEN ( eas.IS_VPN = 1 AND eas.IS_HOLIDAY = 1 ) THEN ea.FNAME || ' (' || to_char(eas.SHIFT_START,'HH:MIPM') || ' - ' || to_char(eas.SHIFT_END,'HH:MIPM') || ')' || ' on VPN & its Holiday '
ELSE ea.FNAME || ' (' || to_char(eas.SHIFT_START,'HH:MIPM') || ' - ' || to_char(eas.SHIFT_END,'HH:MIPM') || ')'
END AS DISPLAY_COLUMN
, ea.ID AS ea_ID
, ea.NAME AS ea_NAME
, ea.FNAME AS ea_FNAME
, ea.EMAIL AS ea_EMAIL
, eas.ID AS eas_ID
, eas.ASSIGNEE_ID AS eas_ASSIGNEE_ID
, eas.DATE_ENTRY AS eas_DATE_ENTRY
, eas.SHIFT_START AS eas_SHIFT_START
, eas.SHIFT_END AS eas_SHIFT_END
, eas.IS_VPN AS eas_IS_VPN
, eas.IS_HOLIDAY AS eas_IS_HOLIDAY
, CASE WHEN eas.IS_VPN = 1 THEN 'VPN'
ELSE NULL END AS VPN_TEXT
, CASE WHEN eas.IS_HOLIDAY = 1 THEN 'HOLIDAY'
ELSE NULL END AS HOLIDAY_TEXT
FROM EBA_ASSIGNEES ea, EBA_ASSIGNEES_SCHEDULE eas
WHERE ea.ID = eas.ASSIGNEE_ID
ORDER BY DISPLAY_COLUMN
Alright, so far so good, everything is working just fine, the pop up window is inserting the calendar entries in the correct table as expected, but now I'd like to make use of the "Drag and Drop" functionality of this amazing control, to be able to "Clone" calendar entries in different dates instead of having the employees inserting their daily schedule for every day, so I'd like to be able to drag an existing entry from a certain day in the calendar and drop it elsewhere and I'd like the OnDemand process to make an insert on the table but with minor changes (like the date of the entry, of course) ,and I'm currently getting stuck in what to put in the OnDemand PLSQL process for that to happen (and how to reference the info in the row I'm currently dragging in the PLSQL code).
Here's the table in which I'm currently inserting the Calendar entries (and in which I want to insert the result of the drag and drop as well):
CREATE TABLE "EBA_ASSIGNEES_SCHEDULE"
(     "ID" NUMBER NOT NULL ENABLE,
     "ASSIGNEE_ID" NUMBER NOT NULL ENABLE,
     "DATE_ENTRY" DATE NOT NULL ENABLE,
     "SHIFT_START" DATE,
     "SHIFT_END" DATE,
     "IS_VPN" NUMBER,
     "IS_HOLIDAY" NUMBER,
     CONSTRAINT "EBA_ASSIGNEES_SCHEDULE_PK" PRIMARY KEY ("ID") ENABLE
Please guys, help me out here, I think this might be a simple process I just don't know how to proceed.
Thanks in advance.
Daniel Villegas.

Hi,
There are 3 things which you need to be clear about Drop & Drop On Demand Process.
1. Which Column is used as primary Key while creating the SQL Calendar, you can find this under calendar attributes, Since your SQL Query used for Creating Calendar does not have ROWID, I think you would have ID column "eas.ID AS eas_ID" from your query.
2. Which Column is used as Date Column in the Calendar from your query i think it must be one of these "DATE_ENTRY" DATE NOT NULL ENABLE, "SHIFT_START" DATE, "SHIFT_END" DATE, for the on demand process i will take DATE_ENTRY as your date column, please change accordingly
3. Which Table need to be updated with the new date value when the data is dragged. In your case the Table will be "EBA_ASSIGNEES_SCHEDULE"
So the on demand process will look like this.
declare
l_date_value varchar2(32767) := apex_application.g_x01;
l_primary_key_value varchar2(32767) := apex_application.g_x02;
begin
update EBA_ASSIGNEES_SCHEDULE set DATE_ENTRY= to_date(l_date_value,'YYYYMMDD HH24MISS')
where ID = l_primary_key_value;
end;
http://sathishkumarjs.blogspot.com/2011/07/enabling-drag-drop-and-add-edit-data.html
Hope this helps
"JS"

Upgrade to 3.1.1 broke drag and drop form items

after upgrading to 3.1.1 when I click the drag and drop icon in items on a form i can then move the fields around and when I hit next the page shows no fields, if I then click apply and look at the form the fields have not moved..

Hello,
For me this functionality is still working...
Do you have the same in another browser? (I'm using FF)
Regards,
Dimitri
-- http://dgielis.blogspot.com/
-- http://www.apex-evangelists.com/
-- http://www.apexblogs.info/

I want to Sync my iPhone 4 to iTunes however I get an error message from iTunes each time I connect the phone to the PC saying that I should restore to factory settings. Frustrating because it's already annoying enough that I can't drag and drop mp3's!!!

I have never been so frustrated before in my life with any phone. I find it obnoxious as it is that I cannot simply drag and drop files (especially MP3's) straight from my PC directly into my phone, which I have been used to doing up until now. Everyone who convinced me to get the iPhone has instructed me that my frustration can be fixed by downloading iTunes and syncing it all up via that program (which I have never used before). So, I downloaded the program successfully, however when I connect the iPhone 4 to the PC and iTunes is open, I get an error message that 'iTunes cannot read the content of the iPhone "iPhone" and that I should go to the Preferences tab of the iPhone and select 'restore' to restore this phone to factory settings. First of all, I don't understand why I need to do that. I have already downloaded apps and other important things in the 2 days that I have the phone. I am also scared that it will erase my contacts. This is such a headache. Music is very imporatant to me, but I am getting so frustrated that I don't have freedom over the phone which I thought was supposed to be one of the best out there. I would really appreciate help in this matter. I am sure the phone is great but I am on the verge of taking it back and getting something else.

Hey joshuafromisr,
If you resintall iTunes, it should fix the issue. The following document will go over how to remove iTunes fully and then reinstall. Depending on what version of Windows you're running you'll either follow the directions here:
Removing and Reinstalling iTunes, QuickTime, and other software components for Windows XP
http://support.apple.com/kb/HT1925
or here:
Removing and reinstalling iTunes, QuickTime, and other software components for Windows Vista or Windows 7
http://support.apple.com/kb/HT1923
Best,
David

Drag and drop in APEX 4.1

Similar Messages

Maybe you are looking for