List Drag On Row : Amazing

[Davidk]

The new List Drag On Row feature is just excellent. I built a PGB App with the example component and the drag action is smooth and clean... exactly like a native app.

With the List Drag Row, and the ControlBar and Disclosures, ViewBox, FormView, and Templating language... the Alpha team is erasing the line between native and hybrid apps.

And all this crosses over into web apps as well.

As Wallace would say... Nicely Done !

ListDragRow.PNG

[Davidk]

Re: List Drag On Row : Amazing

Have a look for Row Drag Actions here... http://aadocuments.s3.amazonaws.com/...easeNotes.Html

[CharlesParker]

Re: List Drag On Row : Amazing

Agreed I just saw that - nicely done builders too!

[peteconway]

Re: List Drag On Row : Amazing

Yes - very nice.

[CharlesParker]

Re: List Drag On Row : Amazing

So far, I am getting my image in my list control to change out to grey - and mark the row as complete - in other words the drag action script appears to work, the only problem is this is a list with a detail view and it is NOT saving my edit. Not sure how to do that.
My action code is as follows:

this.setValue(index,false);
var data = this.getData(index);
if(data.tasks_is_complete =='Yes'){
	this.setValue(data.tasks_is_complete=='No');
	//listObj.updateTableRow(rowNumber,{tasks_is_complete: 'No'});
	{dialog.object}.saveListEdits('TASKS',{rows: 'current'});
}else{
if(data.tasks_is_complete =='No'){
	this.setValue(data.tasks_is_complete = 'Yes');
	//listObj.updateTableRow(rowNumber,{tasks_is_complete: 'Yes'});
	{dialog.object}.saveListEdits('TASKS',{rows: 'current'});
}
this.updateRow(index,data);
}

Now I doubt that the "saveListEdits" is right (not throwing an error) OR "updateTableRow" but not sure what to put in its place to sync/save the row edit - I commented out "updateTableRow" because I think "this.updateRow" takes its place.

[CharlesParker]

Re: List Drag On Row : Amazing

Oh by swapping out the image (that's a conditional image) I mean that the button for the slide is working as expected and changing the value of tasks_is_complete by using this code:

this.setValue(index,false);
var data = this.getData(index);
if(data.tasks_is_complete == 'Yes'){
	return [{html: 'Complete', className: 'flag', action: 'setcomplete'}]; 
} 
if(data.tasks_is_complete == 'No'){
	return [{html: 'Not Complete', className: 'archive', action: 'setcomplete'}]; 
}

so what this does is change the button and it's appearance by the value in tasks_is_complete
very cool and simple thanks to AS.

[Davidk]

Re: List Drag On Row : Amazing

This is the Action code you want.

var data = this.getData(index);
switch(data.tasks_is_complete){
	case 'Yes':
		var updData = {};
		updData.tasks_is_complete = 'No';
		this.updateTableRow(index,updData);
		//{dialog.Object}.saveListEdits('TASKS',{rows: 'allRows'});
		break;
	case 'No':
		var updData = {};
		updData.tasks_is_complete = 'Yes';
		this.updateTableRow(index,updData);	
		//{dialog.Object}.saveListEdits('TASKS',{rows: 'allRows'});
		break;
}

I'm not sure where you are getting rowNumber from. A suggestion... use camelCase in your code... e.g. setComplete instead of setcomplete.
.saveListEdits() is for synchronzing back to the table. Do you want to do this every time a row is swiped? I'd use a Sync button... but it depends on what's required.
.updateRow is for non-Detail View, non-data bound Lists... so it wouldn't be used in this case.
Use a switch statement instead of nested if statements... much easier to read.

[CharlesParker]

Re: List Drag On Row : Amazing

Ok, so this would be a fast way to mark a task as complete. Drag to the right and reveal the Complete or Not Complete button - selecting it or continuing the action would set the complete status to switch out and then YES syncronize - it doesn't appear to do that.

Where I was getting row number from is in the click event for the image: currently, if you click the image it sets the complete status to yes or no (it swaps it out) then saves the value.
My Onclick code for that is:

var tic = data.tasks_is_complete;
if(tic=='No'){
	listObj.updateTableRow(rowNumber,{tasks_is_complete: 'Yes'});
	{dialog.object}.saveListEdits('TASKS',{rows: 'current'});
}else{
	listObj.updateTableRow(rowNumber,{tasks_is_complete: 'No'});
	{dialog.object}.saveListEdits('TASKS',{rows: 'current'});
}

since this is a conditional image the image then swaps out accordingly to a greyed out image.
Like I said you can observe it in action from that link i posted previously. The list I am working on is in the Technician Agenda

The problem comes in with my current code where if you swipe it updates as expected but if you then click the image I get an error that says that "the database cannot find the data you requested" and I get a yellow triangle and a red one (error) on the row.
Prior to the drag event the Onclick works great!


SO to continue and make this EVEN MORE functional I want to drag to the left now creating 3 buttons with 3 different classes - so far so good and I have set alerts for each one which does indeed work swimmingly!
I want to run some action javascript which doesn't appear to work. Obviously, syntax here is a bit different and that's what REALLY needs clarification to me.
For instance, I have a button that I used the action javascript to open a google map through a super control definition - that works great.
How would I do the SAME thing with my map button in the drag event?
I just can't use the action javascript builder or a run action because I get this.blah-blah blah errors in the console that kills the whole component on load so how are we supposed to know all of the this.syntax statements? we can run/reference to make full use.

One last thing, the color picker is pretty amazing now too, but the style builder doesn't preview the new background colors. I am sure they will get that sorted.

[CharlesParker]

Re: List Drag On Row : Amazing

What's with the empy brackets in var updData= {};
???

[Davidk]

Re: List Drag On Row : Amazing

It seems that you're trying to mix and match other stuff with the List Side-to-Side Drag Row functionality. If your "conditional image" is a template command... then ok... but I'd use the correct terminology.

If your conditional image is actually a conditional image with an onclick event... then I'm not sure what you're trying to do with reference to the List Side-to-Side Drag Row stuff.
Your image should be taken care of in the List Layout... as in the sample.

It seems you should start a new thread.

var updDate = {}; sets up a new Object... which is used for the JSON going into the .updateListTable() method.

[CharlesParker]

Re: List Drag On Row : Amazing

ok, I am not trying to mix and match (although, at this point, it might appear that way). What I am trying to do is REPLACE the current Onclick event of the dynamic conditional image with the drag function. I was only bringing it up to show that method and how I was getting it done and the fact that it indeed uses "javacsript" but the javascript you have to use in the drag event is different.
Actually, there are 4 possible values so after further thought on what I want to do I am convinced your case statement is the way to go.
I have it working as expected with this code:

this.setValue(index,false);
var data = this.getData(index);
switch(data.tasks_is_complete){
case 'Yes':
	var updData={};
	updData.tasks_is_complete ='No';
	this.updateTableRow(index,updData);
	break;
case 'No':
	var updData={};
	updData.tasks_is_complete ='Yes';
	this.updateTableRow(index,updData);
	break;
case 'Flag':
	var updData={};
	updData.tasks_is_complete ='Yes';
	this.updateTableRow(index,updData);
	break;
case 'Reminder':
	var updData={};
	updData.tasks_is_complete ='Yes';
	this.updateTableRow(index,updData);
	break;
	}
{dialog.object}.saveListEdits('TASKS',{rows: 'current'});

[CharlesParker]

Re: List Drag On Row : Amazing

One caveat of note here. After I got the drag to the right working I set out to create a drag to the left with 3 buttons. One of the buttons is named FLAG and the code behind that sets the tasks_is_complete field to a value of 'Flag'
Here's where I accidentally introduced an error.
The code ran perfectly, however, if I attempted to drag it again I would get an error about property undefined cannot read 'length'. The PROBLEM was that when I setup the first drag to the right javascript I only had two conditions - tasks_is_complete could either be Yes or NO and that would determine what the button would read, set its class, etc. Since the value was now 'Flag' and neither 'Yes' nor 'No' I got an error. Once I ammended the javascript to include all possibilities the error is gone and all is well.
This is a REALLY cool feature that makes my app work FASTER. Now, all a user has to do is slide the row to flag a task or mark it as complete and they can easily change it back!

Took me awhile to figure it out. This reminds me of writing a conditional image statement and then having a condition where nothing was true...hello, error!