Tip:
Highlight text to annotate it
X
In iRise, if you have the ability to visualize both the action and the result of
drag-and-drop interactions, which adds to the realism and impact of your
simulations.
In this video, we will demonstrate the creation of two drag and drop
interactions.
The goals for our two interactions will be similar. We want our reviewer to be
able to drag books from the catalogue on the left to the "books I've read" list
on the right.
As you can see in Studio, we've already created the Tile List and the datasheet
that populates the Tile List.
We've also added the drop target on the right which is a standard section widget.
Since we want the reviewer to be able to drag book entries from the Tile List to
the section on the right,
we need to make the section widget within the Tile draggable.
We do this in the Properties panel.
Choosing the drag and relocate option means that we will be dragging the entire
section and moving it into the drop target.
When you make a selection in the Draggable field, new options appear in the Properties
panel. Since we want the reviewer to be able to click anywhere inside the section,
we'll leave the Drag Handle field blank.
For During Drag will choose drag ghost copy of widget it setting an Opacity of 50.
We also want to prevent the reviewer from dropping the book entry just anywhere in
the page. To do this we will select the books read section for the Restrict
drop to attribute.
That's everything we need to make the book entries draggable but there's one more
thing we need to enable the behavior we're after.
In the books read section we will choose Vertical Layout
which will force all of the entries we drop in the section to stack themselves
one on top of the other.
Let's see how this looks in our browser.
If we try to drag a book and drop it anywhere but the books i've read section,
it snaps back into place.
If we drop it into the section, it remains there just as we planned.
Now let's imagine that instead of dropping the entire book entry into the books
i've read section, we just want to add the book titles to the list on the right.
We also want the gaps left by dropping books into the section to fill in
automatically. We can do this by triggering an On drop (over target) event
on the page.
First let's duplicate our existing page to serve as a starting point.
Since will no longer be dropping the content itself onto the books i've read
section, the first thing we'll do is change the draggable attribute to 'yes'.
Now we can set up the event trigger. In the Events tab, we'll expand the Show events for
dropdown and choose On drop (over target). This reveals a new drop down that we'll use
to select a drop target, but first we need to add the books read section to the
list of options.
With the trigger defined, now we can configure the event. We'll click the +Add
link under the events pane and choose Record.
We want to update records in the BOOKS datasheet with this event.
Note the On Drop (Over target) trigger on the navigation line.
Now we need to tell the simulation exactly how we want to record to be updated.
We'll use a constant for this.
In the Constant widget's Properties panel, let's select the 'Read' field and then type yes
in the list below it.
Then we'll send the value to the Update BOOKS action.
Because the clicked record has been sent to the clipboard, the value of the
'Read' field will be updated for only that record.
Finally, let's refresh the page after the record is updated to display any changes
in our data.
To display the book titles in the books i've read section,
we'll send them to a single column data table with no header.
Let's change the section layout to Absolute so we can position the table
wherever we want.
We can also remove the borders from the table.
We'll need a Get records action to populate the data table.
Since we only want to display records with the 'Read' value of yes, we'll configure
a where condition.
Let's test the interaction.
The list is generated as we planned, however the books aren't being removed
from the Tile List.
That's an easy fix.
We need to display only the records with a null value in the 'Read' column.
We'll configure a Where condition for this.
Again we'll select Read in the first column,
but this time we'll place our cursor in the last column and press Enter to apply the null value.
Let's test again.
Success!
As always with these types of interactions, use your best judgment in
deciding how far to take your simulations.
When you decide it makes sense, a drag-and-drop interaction can add a lot
of impact and clarity to your requirements.
Thanks for watching!