It's been a long time request the ability to include popups in dashboards. Not only for the standard tooltips but also for rich and contextualized content.
Description
Popup component allows us to create a standard layout element and then place it inside a popup. We can use any kind of components available in CDE to put inside the component, with all the generic interaction rules.
After getting the popup's contents defined, we need to choose an element to bind the popup to. Usually a button, can be any html element, from image to table cell.
After getting the popup's contents defined, we need to choose an element to bind the popup to. Usually a button, can be any html element, from image to table cell.
Usage
There are 3 steps for defining the popup component
- Defining the content that will appear on the popup
- Configure popup component
- Call the popup
After that, add a popup component. The only thing that needs to be configured is the layout element that will be inserted in the content. Note that this will not appear in the general dropdown of the htmlObject element (only elements with no children appear on the list), so you'll need to type it manually.
There are 3 specific options with the following defaults:
The last bit is triggering the event that will call the button. We can bind it to a click event anywhere in the dom. The simplest and most useful example is clicking on a button component. This is the function that will trigger it from with a button component expression:{
gravity: "S", // where the popup will appear, valid values are N, S, E, W
draggable: true, // if you can drag the popup around
closeOnClickOutside: false // Clicking outside the popup will close the popup
}
Note that when you create a component with name 'popup1' CDE will generate a js variable 'named render_popup1'function f(e){
render_popup1.popup($(e.target));
}