Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » scout » [Oxygen] Initial size of Search Form
[Oxygen] Initial size of Search Form [message #1786395] Wed, 02 May 2018 15:39 Go to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 211
Registered: November 2014
Senior Member

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
Re: [Oxygen] Initial size of Search Form [message #1786598 is a reply to message #1786395] Tue, 08 May 2018 08:03 Go to previous messageGo to next message
Patrick Bänziger is currently offline Patrick BänzigerFriend
Messages: 69
Registered: September 2011
Member
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 11:17 Go to previous messageGo to next message
Claudio Guglielmo is currently offline Claudio GuglielmoFriend
Messages: 170
Registered: March 2010
Senior Member
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] Wed, 09 May 2018 03:48 Go to previous messageGo to next message
Peter Pfeifer is currently offline Peter PfeiferFriend
Messages: 211
Registered: November 2014
Senior Member

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 22:27 Go to previous message
Patrick Bänziger is currently offline Patrick BänzigerFriend
Messages: 69
Registered: September 2011
Member
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:


  1. The index.html is coded to load the helloworld-all-macro.js
  2. The hello-world-macro.js can include further modules/javascript files using the __include('path') directive
  3. 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
  4. 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)


  1. Create the file "helloworld-module.js" in src/main/js
  2. Add this line to the helloworld-all-macro.js:
    __include("helloworld-module.js");
  3. Paste this line into your newly created helloworld-module.js:
    scout.TableControl.CONTAINER_SIZE = 200;
  4. 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 22:29]

Report message to a moderator

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


Current Time: Sun Nov 18 12:32:35 GMT 2018

Powered by FUDForum. Page generated in 0.02289 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top