Eclipse Community Forums: Eclipse Scout » [Oxygen] Initial size of Search Form

Home » Eclipse Projects » Eclipse Scout » [Oxygen] Initial size of Search Form

[Oxygen] Initial size of Search Form [message #1786395]

Wed, 02 May 2018 11:39

Eclipse User

Hello there,

I was wondering if it is somehow possible to set the initial size of a search form.

I stumble across this issue within my sample project and just saw the same behavior within the Contacts Demo App (https://scout.bsi-software.com/contacts/)

There the search form is also using more space as it actually might have to (see screenshot).

index.php/fa/32741/0/

So is it possible, that the size can somehow be adjusted to the actual space needed?

Thanks

Peter

Attachment: searchform.png
(Size: 29.30KB, Downloaded 473 times)

Re: [Oxygen] Initial size of Search Form [message #1786598 is a reply to message #1786395]

Tue, 08 May 2018 04:03

Eclipse User

Hello Peter

It took me some searching, but I believe this is a CSS / LESS property called "table-control-container-height" which defaults to 345 pixels.
You can override this, but note that this is a global property and - as far as I know - not adjustable on a per-form basis to save space.

If you wish to change this property, you'll need the usual procedure for overriding CSS / LESS properties (create a new LESS file with a new altered property definition in your "ui.html" Maven module, create a LESS-Module-File and include your new file there).

Patrick

Re: [Oxygen] Initial size of Search Form [message #1786609 is a reply to message #1786395]

Tue, 08 May 2018 07:17

Eclipse User

Hi Peter

Patrick is right, you can adjust the LESS variable called @table-control-container-height.

This variable is rather new and will only work from the 8.0 release. For previous releases you have to adjust the variable using JavaScript:

scout.TableControl.CONTAINER_SIZE = 200;

Setting it for a specific form is not supported so far. You could probably do it by extending SearchFormTableControl, add a property called height, use the new table control by overriding AbstractPageWithTable.createSearchFormTableControl() and make sure the new property will be sent to the UI. In TableControl.js the property 'height' already exists so if it comes along with your table control it should work without the need to write custom JavaScript code.

Hope it helps
Claudio

Re: [Oxygen] Initial size of Search Form [message #1786651 is a reply to message #1786609]

Tue, 08 May 2018 23:48

Eclipse User

Hi there,

thanks for the answers. So then JavaScript it is.

Unfortunately JavaScript programming is something I have never done before in my life :) If someone could me point to the right direction where to start I am more than happy.

Thanks a lot

Peter

Re: [Oxygen] Initial size of Search Form [message #1787150 is a reply to message #1786651]

Sat, 19 May 2018 18:27

Eclipse User

I'll try to give you a brief overview how the HTML UI works with the JavaScript and LESS Files. The specific code to change the height as at the end of this post.
The files and locations mentioned here are named like the "HelloWorld" example project, depending on your project it may vary.

The helloworld.ui.html project serves as the home of all UI-related code that is not part of the "model" (the usual Java Code you write to compose the interface, like forms, groupboxes etc., located in helloworld.client).

In the helloworld.ui.html project, you'll see different folders:

src/main/java : Contains UIServletFilters etc.
src/main/resources/WebContent: Contains the basic HTML and Javascript components the app needs to launch.
src/main/js: The location to put your JavaScript code. It will be included as additional resources (build-helper Maven plugin included in the default Master POM).

The way Scout now works:

The index.html is coded to load the helloworld-all-macro.js
The hello-world-macro.js can include further modules/javascript files using the __include('path') directive
Similarly, the helloworld-all-macro.less is included (and pre-processed to a CSS file) and can use the the "@import" directive to include other LESS files
The directives are replaced by the ScriptFileBuilder and turned into actual JS/CSS.

To get around to your actual question:
If you want to change the height of the TableControl (and thus, search form) in every location, do the following: (Scout 7.0)

Create the file "helloworld-module.js" in src/main/js
Add this line to the helloworld-all-macro.js:
__include("helloworld-module.js");
Paste this line into your newly created helloworld-module.js:
scout.TableControl.CONTAINER_SIZE = 200;
Reload your browser (F5), you should get the new version immediately. Watch for messages in the console from the ScriptFileBuilder indicating if the file was not found (check the path). You'll also see a message in the "helloworld-all.js" file delivered to the browser if it fails.

For more elaborate examples, check out the UI HTML module of the Widgets Demo App.

[Updated on: Sat, 19 May 2018 18:29] by Moderator

Previous Topic:	AbstractPageWithTable.execCreateChildPage
Next Topic:	Fresh Eclipse Oxygen w Scout Install On Centos 7

Goto Forum:

-=] Back to Top [=-

Current Time: Mon Jul 07 01:32:23 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter