New context menus experience in SAP Web IDE
The challenges with workspace context menus
Context menus are a familiar and frequently used interaction to launch commands over the project workspace. Right-click the mouse over the files tree, and all commands relevant to that item in the folder hierarchy appear in a menu for you to select from.
Context menu are composed by an algorithm that is calculated on-the-fly. It creates a dynamic structure of submenus and commands that change based on both the selected object and on the project context where that object is found.
Each tool and most plugins insert new commands into the menus. Those commands appear in the context of the selected file, folder, module, or project, or even the entire workspace. As the number of tools and plugins continues to grow, the workspace context menus became cluttered and unruly:
- commands are inserted in odd locations
- commands appear out of context and are irrelevant to the selected items
- too many command groups are being created with unclear grouping rules
- submenus are too deep
- commands names are too long and with inconsistent phrasing
- entrie menus are disabled and should never have appeared
It was time to refactor the context menu rules and structure:
to bring clarity, order, and a smooth experience to this frequent interaction.
So what’s new?
- The top-level context menu has been reorganized to better follow project development.
The reordering of command groups now follows use frequency patterns.
Command groups from top to bottom include:
- Development process commands – Run, Build, Deploy, Preview, have been brought together into a single command group. These high frequency commands now appear on top where users expect to find the most relevant process commands for the selected project resource. Specific tools can add their process submenus such as: Mobile and Debug.
- Tools section – the Git menu is here, and other resource management tools with relevant commands for resources up-and-down the workspace hierarchy.
- The New submenu for resource creation now has well defined command groups for difference levels of the file and folder hierarchy.
- Import and Export of resources – same as before.
- The Edit submenu groups all file and folder edit commands: Cut, Copy, Copy Full Path, Paste, Rename, and Delete.
- The Project menu is a new addition for project management commands.
- Quick Access is a new command that opens the Quick Access dialog to aid users in finding relevant commands using text search.
- Submenu depth has been reduced.
We’ve merged some of the 2nd and 3rd level menus submenus.
You’ll find the same commands with less mouse travel and fewer missed submenus.Here we see how the “Run as >” submenu is now a command group in the Run submenu.
- New item creation has also been reorganized.
Command groups have been defined for different types of created items and contexts:
- Project modules have a unique group and appear for MTA projects.
- Singular file types are grouped together.
- Related file types appear together in their own groups.
- Projects of all types can be created from the workspace context menu.
- Single file context menu is quicker and shorter.
All available editors for that file type are visible, almost all submenus have been merged, and all irrelevant commands removed.Here below, on the left, we see the context menu for an mta.yaml file with two visible editor choices, and all edit commands in direct view. On the right we have the context menu for an *.hdbcalculationview file. The menu includes the process commands group (second from the top) with unique commands for that file type.
- File and folder edit commands have been grouped.
The new submenu Edit now groups all edit commands. This shortens the top-level menu by one third. Edit commands are now contextual: they do not appear for the entire workspace context, and appear inline for single file context.
- Sharper context focus and clear rules for command appearance.
With the new command groups defined:
- You will not encounter out-of-place or out-of-context commands.
- You’ll see disabled commands only if there is a possibility for those commands to be enabled under different circumstances during that project timeline.
And what if…
If you think you’ve found a command out of place, snap your screen and tell us! ?
We’ll put it back in place and pronto!
What’s next?
- We continue to refine the context menu structure and to improve the dynamic performance times of the right-click interaction.
- We’ll also rethink and refactor the content and experience of the top menu bar that shares command groups with the context menus.
Much appreciated simplification!
Wish the clear console command could be easily executed directly on the console and not by pull down menus.
@Ev Shafrir - Neat one. There is an issue for the trial account when loading the project from template. Would it be anything to do with the updated version ?
Hi Vivek, thank you for your comment. The context menus simply rearranged existing commands. Perhaps you can open a separate question on the issue you encounter?
Sure thanks.
Hi Ev Shafrir,
Nice Modification and looks great.
Here i have a doubt, how can we build the mobile application? Previouly i used to build with this option ( project->Fiori mobile->Build Package App ).
Now i could not see the above option and i have tried to use the new Build option but its in disable mode.
could you please suggest how to build the packaged app.
Thank you,
Sudheer.
Thank you Sudheer for your comment.
Please tell us, which tools and features are you using in SAP Web IDE to build your mobile applications? Are you using HAT (Hybrid App Toolkit)? Or the MDK (Mobile Application Toolkit)?
This will help us understand the context.
Thanks.
Where is the “Paste” Function?!
Copy/Cut are still there, but I can’t find “Paste”? (Development -> Files)
Ctrl + V is also not working anymore.
Hi Daniel -
Please help us with a screen capture so that we see the specific context this is occuring for you? (tool / project / folder).
Thank you.
In the "Files" Explorer when you rightclick on a file, there is copy and cut, but no paste.
Also ctrl + v does not work. How should I be able to paste files I copied/cutted?
Thank you for the attaching the screen caputre.
The menu context organization exposes commands that are with direct context to the selected item. So the Paste command appears for all folders, but not for individual files. (Strictly speaking, we cannot paste into a file.)
We'll evaluate all feedback after an initial use period and refine the command context rules accordingly. Thank you again for this feedback.
Hi!
Thanks for the reply, but now I'm confused.
Why is there Copy/Cut on individual files, if there is no Paste possible (as you said)?
Also Copy/Pasting individual files like this was possible before (pretty sure about that)
ahhhhhh, now I get it.
Paste is only available while selecting a Folder.
Hidden in the "Edit" Submenu.
But in any other IDE (IDEA, Eclipse, Atom, etc.) if I "paste" a file on a file, in will insert it into the parent folder of that file.
Pretty sure that worked at some point in the webIDE too. Otherwise I wouldn't have noticed it not working anymore.
Thanks for the feedback/help.
Yes, the Paste command appears in the Edit menu for folders.
Yes, the Paste command did appear for in context menus for files.
Your feedback has been shared by others and the Edit submenu will most probably be dissovled and all edit commands appear (as they did before) included in the first level context menu. This change will happen together with other refinements to the new design. We're continuing to collect feedback.
Thank you.
From above.
4. Single file context menu is quicker and shorter.
All available editors for that file type are visible...
Can you apply a little "most often used" logic to which editor is default for a specific file type?
I often open the mta.yaml file by double-clicking only to have to close then design view and re-open it in code view(which I prefer).
If I open a specific file type more often with one view or another, it should become my default view for that file type.
Or at least give me a setting so that I can tell which view to default for each file type.
Thanks, -Andrew
Hi Andrew,
Indeed we have the setting you are looking for. You have control to choose which editor opens each of the code file types. Click on Preferences and then find the Default Editors page.
Please refer to this help page: Setting User Preferences
Thanks, Ev
Indeed. I should have checked before leaping! -Andrew