Here you can learn about some new functions for the context menu. This is a blog of the series "Design Studio 1.5, View on..." - here the function "Context Menu Parameterization". For more topics see Design Studio 1.5: What's New in? A (technical) View.
The Starting point.
Design Studio 1.4 has introduced context menu on crosstab and filter / navigation panel components. Using the context menu some functions were accessible to the end user during run-time (w/o special code from the application developer). The component context menu is located in the area of technical components.
Pic 1. Context menu component
What is New?
In the release 1.5 there are some extensions in the context menu:
- it is possible to insert additional menu options
- new entries for "back" functions are available
- you can hide some options (via CSS)
- you can also ask for context when clicked
How to Insert New context menu options.
Going to the Context Menu component, after selection you can check the properties. There is one new property "Custom menu options". Opening it, you can add custom menu entries. You can either edit the script directly or make use of global functions.
Pic 2. Custom Menu Options (step-by-step)
New Entries.
You will find the new entries w/o any special configuration.
Pic 3. New Entries in Context Menu
How to Hide Menu Entries.
This was a quite heavy requested function in 1.4 release. Now it is possible. How to do it? It is possible by hiding the menu option via CSS.
The extension in release 1.5 is, all menu options (the delivered one) are accessible by CSS ID selector. Context menu has also a CSS class assignment, so you can define a CSS class to hide some options.
Define a CSS for the item in your CSS file. Every context menu item can be addressed by ID, below is the example for "BackToStart".
here the content of your css file:
#CONTEXT_MENU_backToStart {
display: none !important;
}
Here is the list of IDs for all menu items (which I could find).
| Header 1 | Header 2 | ||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
 |
|
How I thought we can define a CSS which can be "activated"
THIS DOES NOT WORK!
Context Menu does not pass the classes to HTML rendering, seems to be not implemented.
Anyway, I place how it should be for now - and will try to check why this is not working. It means "can" == "could" ;-(
In case you need to activate / deactivate menu items, you can extend the CSS class with a real CSS-Class-Name.
Then, in CONTEXT_MENU you can check up the property
Then, your CSS must be changed a bit, just add also a class there:
.hideBack #CONTEXT_MENU_backToStart {
display: none !important;
}
Also, there is currently no method
.setCSSClass(className);
in the CONTEXT_MENU item.
How to Ask for Context on Click.
Here is a small example how you can get the selection "click" context of the clicked area. I have places the script in the "Custom Call".
var context = CONTEXT_MENU.getContext();
var values = "";
context.forEach(function(value, key) {
values = values + "\r\nKey: " + key + " \r\nValues: ";
value.forEach(function(element, index) {
values = values + element + " | ";
});
});
values = "Context: \r\n" + values;
var area = CONTEXT_MENU.getClickArea();
values = values + "\r\nArea: \r\n" + area;
APPLICATION.alert(values);
The output of some Cell-Click.
Pic 4. Output of the Selection.
As you can see, you can access via array the selected dimensions and those values. Based on that you can make more code and execute some action.
What is currently not possible.
- as of the 1.5 release, you cannot make the menu visible in dynamic way based on the area
- you can read some context, but this is only "data-based", you cannot find the information on which component the context menu has been clicked.
I hope this helps a bit to start with this feature.