Log In    |    Knowledge Base    |    4D Home
Tech Tip: Creating an expanding and collapsing window
Published On: April 25, 2002

Compatibility: 6.5.x and 6.7.x

This tech tip will show you a simple way to create an expanding and collapsing effect for your windows.

First let's take a look at what it will look like in action.

In the initial state, the window is opened as displayed below.

When the user clicks on the downwards blue arrow, the window will expand vertically. The user can now enter more information into the form.

If the user clicks on the upwards blue arrow, the window will collapse and back to the initial state.

To implement this feature, a picture with 2 frames is created in the picture library.

A picture button (named vPic) is created in the form with the created picture assigned to it.

Next, you must find out the fixed size of the form and the initial height where the window should display.

In this example, the form is created with the width of 286 points and the height of 333 points. The window will be opened with a height of 190 points (right below the save and exit button).

The following object method is created for vPic.

If (Form event=On Clicked )

 GET WINDOW RECT($Left;$Top;$Right;$Bottom;Frontmost window)


 If (vPic=1)

  SET WINDOW RECT($Left;$Top;$Right;$Bottom+$tempSize;Frontmost window)


  SET WINDOW RECT($Left;$Top;$Right;$Bottom-$tempSize;Frontmost window)

  End if

End if

This method will check for the status of the arrow to see if it is pointing up or down. It will then change the height of the window, depending on the condition.

Note: You may need to change the value of $tempSize for your own project.