I met with an issue the original tree node in Axure RP9 does not support context menu(right-click) interaction. I tried another method to achieve this effect: making it with a repeater.
Repeater
Component
The repeater comprises 3 widgets: a dynamic panel(containing plus and minus command icons), an icon widget, and a text field.
Data
The Data chart has several columns defining different values, which you can see in the attached rp file.
Process
I made some interactions for the repeater to make it like a full function of a tree node and supported right-clicking. But I have trouble collapsing and expanding the same level and having different parent text.
Trying to manually build a collapsible tree structure with a repeater in Axure is difficult. I found this past post with a good solution:
Applying that approach to your file, I came up with this possible solution in the updated file below. You didn’t say what you wanted to do with the right-click, so I just have it selecting the node label.
Applying that approach to your file, I came up with this possible solution in the updated file below. You didn’t say what you wanted to do with the right-click, so I just have it selecting the node label.
Thx. Bro. Your solution helps me a lot. I will try my best to understand the cases and interaction orders.
My expected right-click could make a panel show like a menu to the position where the mouse is. I can make it show and hide, but not successful with positioning. I guess the point is I don’t know if the interaction setting of move to '[[MouseX]], [[MouseY]] is correct.
I find another variable like [[Cursor.X]], [[Cursor.Y]].
I really need material to learn the variable guide. I have no idea if there are some system variables available e.g. current time, mouse position, date for now. And what is the name rule exactly of these system variables?
Yes, this is really good info to know! Here is the reference documention for the built-in system variables and widget properties, as well as math, string, date, etc. functions.
RP 9:
RP 10:
Pay attention to the first section of that page that explains how to get to the list of all available system variables and functions. It is very useful for creating expressions because you can click any of them to insert it into your “Edit Value” dialog.
For example, if I wanted to get current information about the cursor position, I would click the little “fx” button to the right of a value field in an action, then click “Insert Variable or Function”, then spin open the “Cursor” category, then click on “Cursor.x” or “Cursor.y” …here’s a screenshot:
…and don’t sleep on the Search feature here. Instead of scrolling through the list, you can start typing something, like “cur” to find “Cursor”, or “item” to get to the list of repeater column names.
The “Insert Variable or Function” is especially helpful for repeaters, because when you target a repeater you can see all of its datasheet columns. So, if I wanted to get the first character of a node name in your tree repeater, I could look at the list of Repeater properties:
So, you can see that in general, like in javascript, you can chain dot-properties and functions. …Usually. There are some exceptions, which are not really documented anywhere …except really in this forum. Some major examples are Axure’s lack of support for regular expressions (RegEx) and arrays. Searching the forum for a function name or whatever you want to do is a great first step though. Also, because the functions are based in javascript you can also search the web for things like, “javascript cursor” or “javascript get the first character of a string”. The Mozilla Dev site and StackOverflow results are usually the best hits.
Now, for your specific question about moving a menu widget/group/panel to the cursor location, here is an updated file with a demo on Page 3. Tree node made by repeater.rp (190.3 KB)
I created a dummy menu group of widgets named, MyMenu
It hides itself automatically with a Loaded event.
(I could have just set it to hidden in the editor, but I find its harder to edit things, or even know/remember what is there if things are hidden by default.)
Clicking it hides itself (and deselects all selected rows in the repeater.)
To the “Node” dynamic panel, I added actions to the Context Menu (Right Click) event:
Relying on your advice, I find a way to set variables and complex interactions.
I may need more exercises to verify the effect I want to make. I am now getting some sense of specific steps when I want to create a brand-new interaction.
As your saying, could I believe my future efforts of learning some javascript means something to my prototyping in Axure? Because they have similar basic logic and commands.
I read the detailed interaction settings. It’s a brilliant method to set widgets automatically hidden when they are loaded.
For the Right-click event, I made a “move” event before.
move to [[Cursor.x]],[[Cursor.y]]
But it doesn’t work. Maybe I made a spelling mistake last time (sad face).
As for the index command, is it the same as the SQL search command? I find it is frequently used in Update rows events.
In general, if I want to make a complex interaction that I never handled before, I should follow the steps:
No, not really, but it is related. In SQL, javascript, and most programming languages, including Axure’s interactions, “index” is a property of an object, like a list or array, and not a command. In Axure, “index” is a property of a repeater which refers to the index position of a row, starting at “1”, so the first row in a repeater has an index value of “1”, the second row has “2”, etc.
Yes, it is common to refer to the .index property when updating repeater rows, which makes it easy to target the first or last row, or third row, etc. One thing to note is that if a repeater is filtered or sorted, the index value of a row can change, so you might not be targeting the row you intend.
In my example, if I want to set a different icon for the target row, I need to make the icon transferred to a dynamic panel first and add a column to mark the panel’s state. And accomplish this by firing the action of “update rows”. What case and event should I choose then?
It depends on how, when and from where (inside repeater or outside repeater) you want the make the icon change. You could change the dp state directly from within the repeater, or you could add a column to control the dp state and the repeater’s Item Loaded event, which gets fired for every row any time the repeater is updated, sorted, filtered, or rows added or deleted.
The icon is used to show the state of the node: leaf (a file) or folder (open or closed), and it gets automatically set based on the state of the node.
I made a dynamic panel (dp) from the folder icon.
I added a few states and put in images (actually shapes as placeholders)
I added a Panel State Changed event to the “Node-State” dp, with a conditional case for each icon: If state of This equals closed Set Panel State Tree Icon to Folder If state of This equals open Set Panel State Tree Icon to Folder-Open If state of This equals leaf Set Panel State Tree Icon to File
Page 5
I created a different way to automatically set the icon, using a column to control it. Also, a way to manually change the icon, by right-clicking a row and choosing it from the popup menu.
I created a new column in the repeater’s datasheet, named “Icon”.
In the Item Loaded event I added this action: Set Panel State Tree Icon to [[Item.Icon]]
Note that if the value of the Icon column is blank, or if it does not exactly match one of the Tree Icon dp state names, then Tree Icon will not change states and will remain in the default first state.
So, you can set the icon to be shown by default for each row by filling out the Icon column, using the name of the Tree Icon dp state, { Folder, Folder Open, File, Folder Original, Flower } .
You can also set it from outside the repeater by updating a row to set the value of the Icon column.
I changed the MyMenu group so that clicking a menu item will change the selected row’s icon.
As before, when a row is right-clicked it selects itself and shows MyMenu.
Clicking a menu item updates the repeater with a rule of [[Item.Select == "true"]], so all rows that have a value of “true” in the Select column will be updated. (There would be only one row selected–the one that was right-clicked.) It updates two columns: “Icon” column is set to the text of the menu item, and “Select” column is set to “false”.
Fantastic, thanks for your effort in my issues. I will gain much more than the exercise itself.
Can you tell us how you learned Axure or other prototyping tools?I find that you are very professional in interaction design, there is hardly any complex interaction that can be difficult for you
I’ve made prototypes and software applications of one type or another for over 30 years. I’ve learned from mentors, books, websites, training courses, trial and error. For Axure I’ve probably learned the most from this forum …and having some very unique and specific needs, like designing for custom embedded UI systems (device control panels, kiosk touchscreens, assistive technology, etc.)
