CDE - Popup component explained

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.

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

The first one is simple - just define the layout as you'd normally do, in the end of the dashboard or any place you want. When you configure the popup component, the component will be responsible for detaching the selected elements from the dom and only showing it when the popup is called. For a better experience, you can also set a css rule like display: none to prevent onstart flickering

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:

{
    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
}

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:

function f(e){   
    render_popup1.popup($(e.target));
}

Note that when you create a component with name 'popup1' CDE will generate a js variable 'named render_popup1'