Four Js Development Tools Forum

Hi

I am after a bit of advice as to whether I can reduce the width of the field that is used when displaying numbers. Please see the attached screen shot and you will note that the field width used to display the Goods Value is much wider than required, as is the Price and Value columns of the table.

The format of these fields is dynamically set depending upon the requirements of the currency and whether the company wishes to use comma separators. In the example the format is "---,---,---,---&.&&" and the fields as defined in the .per file have to be 19 characters wide to prevent them being filled with "******".

I have tried using SAMPLE="000" but the result is always the same - a field that seems excessively wide and no different to if the SAMPLE element is not used.

The real issue for me is when displaying a table that has many columns of numbers as the screen width is quickly eaten up.


 

Hi Gary,

You have not attached the .per but the most likely reason the Goods Quantity and Goods Value fields in the top half of the form are wide is because they have been defined to have the same end position of the Currency ComboBox.

if you have ...

Currency            [f01                ]
Goods Quantity      [f02                ]
Goods Value         [f03                ]

... then those 3 fields have the same start and end position, so in the rendered form they will have the same start and end position.  If the ComboBox stretches in order to display the largest value, the Goods Quantity and Goods Value will also stretch. https://4js.com/online_documentation/fjs-fgl-manual-html/#c_fgl_form_rendering_grid_dependents.html

If you want the fields on each line to be independent of the lines above/below then make use of hbox tags https://4js.com/online_documentation/fjs-fgl-manual-html/#c_fgl_form_rendering_hbox_tags.html, so something like...

Currency            [f01                : ]
Goods Quantity      [f02                : ]
Goods Value         [f03                : ]

Also note you tried to use SAMPLE, note the line in the SAMPLE documentation https://4js.com/online_documentation/fjs-fgl-manual-html/#c_fgl_FSFAttributes_SAMPLE.html, where it explains what happens if the SAMPLE size is less than the width of the corresponding field tag.

For the columns, you can use DOM tree manipulation to alter the width of the columns but what I suspect is most likely happening (and DOM tree manipulation does not get around it) is that the stored settings is remembering the column width of the table columns, so every time it opens the form it sets the width of the column to be the last width used.  If you don't want to preserve what changes the user makes to the column width, column order, column sort order, then I'd suggest you set the forceDefaultSettings presentation style https://4js.com/online_documentation/fjs-fgl-manual-html/?path=fjs-fgl-manual#r_fgl_presentation_styles_table_style_attributes.html to yes so that the column width is as you set it, and then you can use DOM tree manipulation to alter the column width if you want.  I would also draw your attention to the presentation style below the forceDefaultSettings entry in the style reference.  I believe if you had set headerAlignment =auto it would be less of an issue because then your column headings for the numeric columns would be directly above their corresponding values,rather than the situation you have of the column headings being left aligned and the numeric values right aligned.  So add to your .4st

<Style name="Table">
   <StyleAttribute name="forceDefaultSettings" value="yes" />
   <StyleAttribute name="headerAlignment" value="auto" />
</Style>

and then if need be, look at using DOM tree manipulation to alter the column width at the same time you dynamically set the format.

Hope that helps,

Reuben

Hi Reuben

Thanks for the detailed reply - very helpful indeed. Using the techniques you outlined the screens are now looking much better.

Gary

Hi Gary,

Thanks for the feedback.  Are you able to post a screenshot so we can see a before and after.

Thanks,

Reuben

Sure.

Attached is the result of using hbox tags to decouple the Goods Quantity and Value fields from the currency ComboBox.

DOM manipulation is used to dynamically set the format (as before) but now also sets the field or column width. This, along with the headerAlignment attribute, has had a marked impact on the tables.

Gary