How to change the popup Layout

WorkWithPlus has a Popup Design by Default, but we can create our own custom popup layouts.

For this we need to go to WorkWithPlusTheme, to the node Class Popup, and do right-click > Add Class:

The WorkWithPlusTheme editor's Styles tab shows the component tree with the "Popup" node selected and outlined in red; a right-click context menu is open with entries Copy, Paste, Copy Class Properties, Copy All Class Properties, Paste Class Properties, Add Rule and "Add Class" (highlighted), plus Goto CSS definition, Import CSS, Expand/Collapse All Nodes and References.

Next we wile to assign a Popup class Name, and the class popup properties. For example, we can use an existet class or create our own popup class:

For example use an existent class:

The WorkWithPlusTheme editor's Styles tab shows the "PopupWhiteAndBlue" class selected under the Popup node, labeled "Class Name"; the Properties panel lists Header Class HeaderLine, Content Class ContentPlace, Resize handle Class Fixed30 and Close button Class PopupButtonsClose, annotated "Existent Class to popup", along with Background and Box properties such as Border Color RoyalBlue, annotated "We can assign: background-color, width, overflow, etc."

If we want to use our own custom class, we can do as follows:

Three overlapping WorkWithPlusTheme editor windows show the Styles class tree: the left panel highlights "HeaderWhiteAndBlue" under Classes > Image > Section, the middle panel shows "ContentWhiteAndBlue" under Classes > Section, and the right panel filtered to "PopupButtonsClose" highlights "PopupButtonsCloseWhiteAndBlue" under Classes > Image > PopupButtons > PopupButtonsClose.

The WorkWithPlusTheme editor's Styles tab shows the "PopupWhiteAndBlue" class selected under Classes > Popup; the Properties panel lists Header Class HeaderLine, Content Class ContentPlace, Resize handle Class Fixed30, Close button Class PopupButtonsClose, and Background/Box properties including Border Color and Border Top Color set to RoyalBlue.

Finally, in the event where we will to show the popup, we need to assign the class as follows:

    
&Window.Object= webPanelPopup.Create()
&window.Class = themeClass:PopupWhiteAndBlue
&Window.Open()

A GeneXus code editor shows generated event source ending the "Generated by DVelop Work With Plus Pattern" block, followed by manually added lines "&window.Object= webPanelPopup.Create()", "&window.Class = themeClass:PopupWhiteAndBlue" and "&window.Open()" before EndEvent, with an "Event Refresh" line below.

Te result is this:

A running WorkWithPlus "Person" Web Panel (localhost/WorkWithPlus_Demo.NetEnvironment/personww.aspx) shows an Insert/Excel/Open PopUp toolbar above an empty grid, with a "Pop Up Test" popup window open displaying four icon cards: Projects (0), Finished ($0) with a green check, In Progress (0) with a battery icon, and Profitability with a trend-line icon.