I was tasked with developing a canvas app for a client that required each screen to include a popup element. The popup needs be openend by clicking an image, upon being clicked, it triggers a popup screen where users can compose a message. I utilized a Library Component and explored methods to control its visibility effectively. The challenge was ensuring that the message popup would appear when an image is clicked and disappear upon user interaction with a designated button. My solution involved manipulating the component’s dimensions — adjusting the height and width to expose only the image or to reveal the entire component. This technique successfully creates the perception of the popup screen being opened and closed by the user.

• The first step is to create a solution with a canvas app and a component library.
• In my example I named the component comp VIM Message.
• Then open the component.
• Set the size of the component to 640 by 640.
• Add two custom output properties to the component named CompVIMHeigt and CompVIMWidth.

• Set the component width to ‘comp VIM Message’.CompVIMWidth
• Set the component height to ‘comp VIM Message’.CompVIMHeight
• Set the component reset to Set(varCompHeight, 80);
• Add an image element and set the following code on the Onselect. This will make the container visible and make the component bigger.

Set(varComVIMVisible, true);
Set(varCompHeight, 640);
Set(varCompWidth, 640);

• You might need to adjust the numbers based on your needs.
• Also set the X and Y properties on your image based on your needs. I use the following.

X = 'comp VIM Message'.Width - 55
Y = 15

• Add a container with the element you need in the popup.
• Set the following properties of the container.

Visible = varComVIMVisible
Height = 440
Width = 520
X = 75
Y = 190
Visible = varComVisible

• Add two buttons in the container one called Cancel (in Dutch that would be Annuleren) and Send (in Dutch that would be Verzenden).
• Set for both button the onselect to the following code, this will make the component smaller and hide the container.

Set(varCompHeight, 80);
Set(varCompWidth, 60);
Set(varComVIMVisible, false);

• Open the canvas app and add the component comp CIM Message.
• Insert the component into the canvas app.
• Set the Heigth property to the following code. This will make sure the Height has a value when the canvas app page is loaded.

If(IsBlank('comp VIM Message_HS'.CompVIMHeight), 80, 'comp VIM Message_HS'.CompVIMHeight)

• Set the Width property to the following code. This will make sure the Width has a value when the canvas app page is loaded.

If(IsBlank('comp VIM Message_HS'.CompVIMWidth), 60, 'comp VIM Message_HS'.CompVIMWidth)

• Set the X property to the following code. This will make sure that the Image part of the component is on the left top side of the screen.

If('comp VIM Message_HS'.CompVIMWidth = 640, 'Home Screen'.Width - 640, 'Home Screen'.Width - 60)

• Now run the canvas app and see if it works (it might not work in the play function in the edit mode).