Resizable Panels Using Fixed Positioning

Resizable Panels Using Fixed Positioning

Introduction

WebClient includes a feature called FixedPositioning that can be used to make panel functions auto resizable according to the user’s screen. This works by using the values of Fix, Size and Position properties of each control in the panel. 

 

Here is an example of how a panel’s controls behave when different Fix properties are toggled. 

 


 

In this example, we have a panel that contains a textbox field. If we open the properties of the textbox, we can observe that four Fix properties can be found: Fix Bottom, Fix Left, Fix Right and Fix Left. 

 

By default, the Fix properties are toggled for Fix Left and Fix Top. Loading this function in the browser, we can observe the same configuration. 




















If we try reducing the window size, we can observe that the control is fixed to the left and the top.  




If we toggle Fix Right and Fix Bottom instead of Fix Left and Fix Top, the textbox will adjust to the lower right side of the window. 



If we toggle all the Fix properties on, the textbox will expand on all sides.  


Note: It's important to note that while almost all controls have fixed positioning, not all of them are resizable. Here's a list of which controls are resizable:


  1. Grid
  2. Edit
  3. Combo Box
  4. Tabs

How to use it

Once the fix properties of each controller are toggled accordingly, FixedPositioning must be activated by adding Define.FixedPositioning=Y in the WebClient.properties. The web templates will need to be regenerated to have the Plex properties set in the web templates. 



Considerations
 
Expanding Containers 

To make sure the fixed positioning works as intended in your application, you must also make sure the main containers are expanded. By default, WebClient pages have three main containers: html, body and body form. These containers need a height and width of 100% so they can be expanded in the whole page. You can achieve this by writing the following CSS code:

html { 

height: 100% !important; 

width: 100% !important; 

} 

  

body{ 

       height: 100% ! important; 

       width: 100%  !important; 

} 

  

body form { 

       height: 100% !important; 

       width: 100% !important; 

} 


If you're using templates for messages, please note that it could add extra containers in the page that also need to be expanded, among those templates are: WebMessages, WebHTMLMessages, and WebHTMLLogMessages. 

Example: WebMessages-page.wcli shows which containers are used for Web Messages.



So, in this example, the following attributes should be added in the stylesheet as well:

.WebMessages_Div1{ 

height: 100% !important; 

            width: 100% !important; 

} 

  

  

.WebMessages_Div2{ 

height: 100% !important; 

            width: 100%  !important; 

} 


Note: Always make sure to include the correct classes in the stylesheet. If the containers don't have a class specified, you can add one.


Tabs: 

The Tab Control consists of two parts: One is a PVTab Bean Control that helps the user switch between tabs. The other is a ChildSiteP where the functions are loaded. When making changes in the Panel Designer, it is suggested to keep both controls close to each other to avoid confusion. It is also advised to keep some space between the PVTab Bean Control and other controls (In this case, the Grid) to make sure they do not overlap. 

 

When it comes to positioning, the PVTab Bean Control is the one that decides the position of both controls. ChildSiteP is only responsible for the size of the tabs. 

Elements on the same axis 

When you design a screen in plex that will use fix position, the first thing you need to think in which direction you want the elements to move. Then you need to identify the bigger element in the screen. The bigger element is the one who will determine the properties of the other elements.

 

As you can see in this example the bigger element is the blue textbox, so this textbox will have both properties (Fix left and fix right). The green ones just need the fix left and the red ones just need fix right. 

 

Plex orientation difference 

What you see on the panel of plex is not always the same as it is in reality. If you want to be precise with the spaces between the elements in the panel you need to look at the properties panel. 

Here is an example of a child site and panel: As you can see the position property of the child container is 404 and his height is 372.

 

 

The panel height in this case is 825. 

 

The formula to calculate the margin bottom is: Bottom Margin = Panel Height - (Control.PositionY + Control.Height).


In this example the Bottom Margin would be: 825 - (404+372) = 49.


The margin bottom of this panel is 49 (Bigger than what we are seeing in the panel visually).

 


To solve this problem, we make more smaller the panel height (795), So now the margin bottom is 19. Doesn’t matter if you see that some elements are not visible in plex, then you will see them ok in web.


Note: The margin bottom formula most be used with the nearest element to the bottom edge 


Define properties

Here's a list of properties that might be needed to be defined in WebClient.properties when applying fixed positioning:   
  1. Define.FixedPositioning (Obligatory)
  2. Define.DisablePopupFixedPositioning (Highly recommended)
  3. Define.MinimumPanelRes (Optional)
For more information about each property, click the Define Dictionary article here.

Common problems 


Fix position not being responsive as it should.


If you notice that the web page is not being responsive to window size changes, it's very likely that the cause is a Define.MinimumPanelRes not being set properly. For more information click the article section How to implement the MinimumPanelRes define property?

    • Related Articles

    • How to implement file viewer in WebClient using Office Web Viewer

      Reference https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/ How to implement the FileViewer.ctrl The FileViewer.ctrl template is applied over an edit control in your Plex panel, at ...

    • Using OBASE with WebClient

      For OBASE, a good start is to import the attached file (WebClientOBASESupport) into the model (Tools->Import->XML Import).  Attached files description: WebClientOBASEOnly: It's for when the Plex model only uses OBASE. WebClientOBASESupport: It's when ...

    • How to Implement Outlook Style Calendar View Using EventCalendar.ctrl

      Create a grid function with the following fields. Event Id (Column Heading=Event Id) StartDate (Column Heading=Start Date) StartTime (Column Heading=Start Time) EndTime (Column Heading=End Time) Event Description (Column Heading=Summary) ViewType ...

    • Using Regular Expressions to “Filter the Noise” in CM evolveIT

      Please look at the attached file(s)

    • How To...

      1. Group Model Q: How do I change WebClient group model from licensed version to non-licensed version? A: a. Login to your group model and remove the old WebClient group model and add the new WebClient group model from your library list. b. Extract a ...