popup-add-on
Reactive icon

Popup Add-on

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 22 October 2022
 by 
4.5
 (2 ratings)
popup-add-on

Popup Add-on

Documentation
1.0.0


How to use it.

STEP 1

Add reference to this module inside your web app, and put the Popup Addons block as the first child inside the target popup.

STEP 2

Configure the features that you want to enable.

STEP 3

Remember to configure all needed Event Handler.

Examples:

If AllowClose parameter is set to true implement the OnIconCloseClick handler, inside the handler you must set the IsOpen property to the popup to false.

If DisableBackDrop is set to false and you want to close or do anything else when a user click on the backdrop implement OnBackDropClick

If the HandleOverflowForPopupContent is set to true set the "TargetContainerIdForOverflowHandling" paramerter with the id of the main container in the popup.


UI Flows

PopupAddons

Block that add the following features to OS Popup:

-Moveable

-Resizable

-Close Icon and Event

-Expand Icon and Event

-Reduce Icon and Event

-Backdrop Deactivation

-Backdrop click event


Parameters

Name

Description

Type

Mandatory

AllowMove

 Enable the drag feature on popup.

Boolean

YES

AllowClose

 Render an icon in the top right corner.

Boolean

YES

AllowExpand_Reduce

 Render an icon on the top right corner that allow to expand and resize the popup.

oolean

YES

DisableBackdrop

 Remove the backdrop.

Boolean

NO

HandleOverflow

ForPopupContent

 Check the innerhegth of the popup content and if its overflow a max-h and overflow properties are set in the popup.

WARNING: If this parameter is true you must set the TargetContainerIdForOverflowHandling

Boolean

NO

TargetContainerId

ForOverflowHandling

 The id of the main popup content container.

Text

NO










Events (ALL events are not mandatory)

OnAfterExpand

Event triggered after expand event.


OnAfterReduce

Event triggered after recude event.


OnBackDropClick

Event triggered when the user click on the backdrop


OnIconCloseClick

Event triggered when the user click on close icon.