Launches a Tecton application in a modal-like, platform-level overlay.
showOverpanel launches a Tecton application in a modal-like, platform-level overlay.
showOverpanel returns a promise that resolves when the overpanel is closed. If the application running in the overpanel calls closeOverpanel with the appropriate argument, that argument will be passed back to the promise resolution.
This function will not be available to a Tecton application currently rendered into the overpanel, as it is meant to overlay the current running feature and not un-render it.
Type
interface IOverpanelOptions {
fullWidth?: boolean;
size?: 'small' | 'medium' | 'large' | 'full';
height?: string;
testId?: string;
}
tecton.actions.showOverpanel(overpanelPath: string, params?: Dictionary<string>, options? IOverpanelOptions): Promise<ResolutionData>Note: The height will be ignored and it will be full view port height automatically if the screen height is shorter than 768px for better UX support in small screen devices.
Example
document.querySelector('#terms-conditions-link').addEventListener('click', function() {
tecton.actions.showOverpanel('termsAndConditions', {type: 'user'}).then(function(resolutionData) {
if (resolutionData.accepted) {
// do positive action, terms were accepted
}
});
});
// returns a Promise<resolutionData>.
// The returned promise resolves when the overpanel is closed.
// If resolutionData is passed to closeOverpanel, it will be the resolved promise's argument.In the code example above, a module is opening in an overpanel. For this to be successful, "termsAndConditions" - the argument passed to showOverpanel - must be in the configuredOverpanels section of the feature configuration file.
In addition to passing the options object as an argument in the showOverpanel invocation, you can add an options object to the feature configuration file to customize the default appearance of the overpanel module. (Enabled in UUX 4.6.1.1)
See more about the ways to configure your overpanels in our Modules as Overpanels guide.
{
"configuredOverpanels": {
"termsAndConditions": {
"featureName": "PeerLending",
"moduleName": "TandC"
}
}
}
In this example, showOverpanel is provided arguments to modify the width and height of the overpanel. Upon calling showOverpanel, the overpanel will slide upwards into the view. Upon calling closeOverpanel, the overpanel will slide downwards and out of the view. The closeOverpanel method is provided resolution data that will be accessible from within the showOverpanel’s Promise handling once the promise has been fulfilled.
Captured on UUX version 4.6.0.10A.
Lookup key for the overpanel configuration to launch. Overpanels must be configured in the feature config.
This is a Dictionary of Strings. It includes Tecton Parameters for the feature being loading into the overpanel.
Values provided in this argument will override any values in the options object for this module in the condfiguredOverpanels object. See our Modules as Overpanels guide for more info.
An object with a number of properties to customize the display and behavior of the overpanel.
fullWidth - If true, the content of the overpanel will consume the full width of its container.size - Determines the width of the overpanel container. Defaults to "full".height - Sets a custom height on the overpanel (i.e., "300px", "20rem", "70vh", etc.).testId - Sets a custom test-id on the overpanel for tracking and testing purposes. Defaults to the caller's module name{
fullWidth?: boolean;
size?: 'small' | 'medium' | 'large' | 'full';
height?: string;
testId?: string;
}
There is 1 frequently asked question related to this page.
Initial Release
size option
height option
testId option