FilterBuilder value width and Date/DateTime

[stonebranch1]

I have a FilterBuilder that I set the width via "setValueItemWidth(400)" and all the items respect the 400 width except Date and DateTime items (see attached image).

Am I doing something wrong?

[stonebranch1]

I upgraded to the latest code level:

SmartClient Version: v9.1p_2014-04-29/Pro Deployment (built 2014-04-29)

and still have the same issue.

[Isomorphic]

DateItems have a fixed width when showing the various Selectors. If useTextField is set to true, they will size as you expect.

[stonebranch1]

My FilterBuilder is just tied to a DataSource so it automatically builds itself based upon the fields there in. I do not do anything custom with it. How do I set the useTextField w/r to the FilterBuilder?

[Isomorphic]

First, think about what you are trying to achieve and whether it really makes sense.

Depending on the operator chosen, a variety of different editors can be shown, including a DateRangeItem and others which definitely won't fit into a uniform width.

Further, it doesn't assist with usability to take something that is basically a fixed width display and arbitrarily force some more space to be used - it just puts relevant controls (the DateChooser icon) further away, which is annoying to end users.

Third, since the DateItem renders the chosen date to the right, really really fitting into exactly 400px is going to require you to set some sort of hardcoded pixel value that depends on particular font used, and it will still be imperfect due to kerning.

So if you were thinking you'd "neaten" the display, you should probably just abandon this attempt - it worsens usability and can't be meaningfully achieved for all combinations of fields and operators.

[stonebranch1]

I understand all those aspects you have articulated, however in my case we render DateTime items in our own format which in the case of the FilterBuilder causes the input box to not display the entire value since it does not fit.

We always include the timezone as part of our DateTime format since we have users that can be configured for different TimeZones in which case we show all DateTime items in their configured TimeZone. Therefore to remove any ambiguity we always display the TimeZone information.

I was hoping I could make that field slightly larger in the FilterBuilder to avoid it being cut off. I know it displays to the right as well in brackets, but it would look much better if the input box also could show the entire formatted date.

Can the DateTime inputfield then be automatically adjusted to the proper size if you are saying we should not adjust the width myself?

I agree having 1 width setting for all the different editors is lacking but there is no type specific width settings on the FilterBuilder just a single common setting that applies (or almost applies) to all the types.

[Isomorphic]

If you're worried about accommodating your format system-wide, just set a larger default width system-wide using the skinning system. No reason to try to adjust the FilterBuilder only.

[Isomorphic]

Just as a further note, if you did want to do this at the FilterBuilder level, an override of getValueFieldProperties() would be the way to do it.

[stonebranch1]

Thanks for the information.

I was looking at the system-wide way but have not done any skinning yet so was not sure how to go about it.

[stonebranch1]

That seems like a very useful method to know about! Thank You.

I tried to use it, but since that item is a RelativeDateItem, I could not change the input field/select item width contained within the RelativeDateItem. It must have that stuff set internally to keep it consistent.

I tried creating a RelativeDateItem and setting the width to something large like 600 just to see and it did not change the appearance at all.

public FormItem getValueFieldProperties(FieldType type, String fieldName, OperatorId operatorId, ValueItemType itemType, String fieldType) {
  FormItem formItem = super.getValueFieldProperties(type, fieldName, operatorId, itemType, fieldType);
  if (type == FieldType.DATETIME) {
    formItem = new RelativeDateItem();
    formItem.setWidth(600);
  }
  return formItem;
}

I step through there in debug to make sure it was being executed and it was. In Firebug I can see the entire field (RelativeDateItem) set to the width set above, but the "selectItemText" field within the RelativeDateItem remains unchanged at width:128px according to Firebug.

[Isomorphic]

We've made a change to RelativeDateItem - there's a new attribute, valueFieldWidth, which controls the width of the main editor item in a RelativeDateItem (the "valueField" AutoChild).

The default for this new attribute is the default width of the DateTimeItem. So, now, you can set the global width of DateTimeItems, with something like:

DateTimeItem item = new DateTimeItem();
item.setWidth(300);  // some appropriate width for your format
DateTimeItem.setDefaultProperties(item);

and both DateTimeItems and the "valueField" AutoChild of RelativeDateItems will use that default width, including those in FilterBuilders.

[stonebranch1]

Thank You, Thank You, Thank You! Very much appreciated.

Its those nice customizations that you provide that allow us to make very nice user interfaces that provide an excellent user experience.

[stonebranch1]

I have tried to use it but still see the same behaviour in that the value field remains the same original size.

RelativeDateItem relativeDateItemProperties = new RelativeDateItem();
relativeDateItemProperties.setValueFieldWidth(DEFAULT_WIDTH);
RelativeDateItem.setDefaultProperties(relativeDateItemProperties);

DateTimeItem dateTimeItemProperties = new DateTimeItem();
dateTimeItemProperties.setWidth(DEFAULT_WIDTH);
DateTimeItem.setDefaultProperties(dateTimeItemProperties);

I also tried calling the new api on the FilterBuilder as well:

fb.setValueItemWidth(DEFAULT_WIDTH);

Build: v9.1p_2014-05-11/Pro Deployment (built 2014-05-11)

[Isomorphic]

You should only need to set the width on the DateTimeItem class.

If that's not working for you, please let us know your exact build

[stonebranch1]

I have tried what you suggested and I am only calling:

DateTimeItem dateTimeItemProperties = new DateTimeItem();
dateTimeItemProperties.setWidth(200);
DateTimeItem.setDefaultProperties(dateTimeItemProperties);

No setting on RelativeDateItem itself.

I see the width above (in this case 200) being use on a form that displays a DateTime data source field, but on the FilterBuilder I still see the original width of the input field which is just shy of displaying the DateTime given the formatting/parsing I am using.

I am using build: SmartClient Version: v9.1p_2014-05-11/Pro Deployment (built 2014-05-11)