showcaseApp sample: questions and a suggestion

[claudiobosticco]

SmartClient Version: SNAPSHOT_v13.1d_2022-10-05/AllModules Development Only (built 2022-10-05)

Chrome on MacOS

Hello, I just noticed that in the showcaseApp sample there's a comment in the js code (updateDetails function) which seems to refer to an unexpected behaviour or bug, could you please check it?

I was trying DynamicForm.linearMode: true, (on desktop) like this:

isc.DynamicForm.create({
    ID:"editForm",
    autoDraw:false,
    dataSource:"supplyItem",
    linearMode:true,
    linearNumCols:4,
    titleOrientation:"left",
    useAllDataSourceFields:true,
    fields:[
        {name:"SKU"},
        {name:"description", rowSpan:3},
        {name:"category", editorType:"PickTreeItem", dataSource:"supplyCategory",
         emptyMenuMessage:"No Sub Categories", canSelectParentItems:true},
        {name:"unitCost", editorType:"SpinnerItem", step:0.01},
        {name:"inStock"},
        {name:"nextShipment", useTextField:true, wrapTitle: false}
    ],
    autoFocus:false
});

and I saw that the form overflows and appears an horizontal scrollbar:



is it a bug?

Also, I've tried different values for linearNumCols, but I don't see a difference, is it a bug or am I missing something?

Then I've got a a little suggestion for the sample: if you add to the DynamicForm

linearOnMobile:true,

and remove the fixed width, the form will look much better on mobile.

[Blama]

Hi Isomorphic,

out of interest I tried here (SNAPSHOT_v13.1d_2022-10-05) with the code from #1 (and autoDraw: true). To me it looks like this in Firefox 105.0.2/Win10.
I'm not seeing what the OP is seeing, but two small width issues, one in 13.1d only and one in 13.0p/13.1d.

Best regards
Blama

[claudiobosticco]

Hi Blama , I also see those two small width issues in Chrome on OSX.

To see the horizontal scrollbar you have to modify it like this:

isc.DynamicForm.create({
    ID:"editForm",
    dataSource:"supplyItem",
    linearMode:true,
    linearNumCols:4,
    titleOrientation:"left",
    useAllDataSourceFields:true,
    fields:[
        {name:"SKU"},
        {name:"description", rowSpan:3},
        {name:"category", editorType:"PickTreeItem", dataSource:"supplyCategory",
         emptyMenuMessage:"No Sub Categories", canSelectParentItems:true},
        {name:"unitCost", editorType:"SpinnerItem", step:0.01},
        {name:"inStock"},
        {name:"nextShipment", useTextField:true, wrapTitle: false}
    ],
    autoFocus:false
});

isc.VLayout.create({
    width:"100%",
    members:[editForm]
})

Now I wonder if the two issues are related...

[Blama]

Hi claudiobosticco,

I can see your issue as well in FF/Win10. I don't think the issues are related, as the MenuItem width does not matter with your code and the SelectItem width issue is not present in 13.0p. Yet, your issue with the scrollbar shows there as well.

Best regards
Blama

[Blama]

Hi claudiobosticco, Hi Isomorphic

I can also see that linearNumCols:4 does not seem to have an effect, even if I plaster all the FormItems with

, startRow:false, endRow:false, linearStartRow:false, linearEndRow:false

Best regards
Blama

[Isomorphic]

Hi
This is just a quick note to let you know we are taking a look at this one.
We'll follow up when we have more information

Regards
Isomorphic Software

[Isomorphic]

There are a few things being reported in this thread:

Firstly, if you put the form into linearMode in the demoApp sample in the showcase, it is rendered too wide for the space, causing horizontal scrollbars to show up.
This is due to the fact that the default titleWidth for a form is not wide enough to accommodate the titles.
The titles overflowing cause that column to expand - but the other column doesn't shrink since each item is already sized to fit it's calculated available space.
The easiest fix here is to just specify an explicit titleWidth of (say) 150 on the form.

Secondly - the linearNumCols property isn't working as you're expecting. By setting this property you were expecting to see a two-column form.

This is actually a misunderstanding of how linearMode rendering works.

By setting this flag to true, each item has its width and colSpan defaulted to "*" and its endRow property defaulted to true. [These properties can be overridden per item via linearColSpan and related properties].
This effectively gives you a single vertical column of items. Each item spans all the available columns by default, so chaning the linearNumCols attribute alone won't have any visible impact.
However if you want to break up some row to show 2 smaller items on the same row [State / Zip in an address form, for example], you can achieve this by specifying the linearNumCols and setting linearColSpan to 1 and linearEndRow to false on each of those items [as well as ensuring showTitle is false for them, etc].

This behavior is documented here: https://smartclient.com/smartclient-...orm.linearMode
However - since this led to confusion we'll be reviewing the documentation and the functionality here to see if we can make things more intuitive.

Thirdly - there's a report that the "category" item is rendering too wide for the form.
This is actually just a case of the button auto-fitting to its title and there not being enough horizontal space for it. If you specify a width of 500 on that form you'll see all the other items expand horizontally but this button staying the same size.

Lastly - there's the report that the "category" item appears 1px too far to the left.
This is a real bug resulting from a rounding error in some internal code. We've fixed this and it should be present in both 13.0 and 13.1 in the next nightly build.

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

I can see your "left-width" fix for ButtonItem in SNAPSHOT_v13.1d_2022-10-08 and assume it will be in 13.0p and 12.1p as well, once there are new builds.
Please note that there is also the 13.1d-only issue of the SelectItem right-width (see #2), that you didn't mention in your detailed post.

Regarding linearMode I'll play with it once the documentation is updated. I definitely had the same understanding issue here as claudiobosticco.
Using this including linearColSpan with every field I do see an effect:

startRow:false, endRow:false, linearStartRow:false, linearEndRow:false, linearColSpan: 2

Best regards
Blama

[claudiobosticco]

Thank you very much for the detailed explanation, now everything makes sense.

And BTW the new Shiva skin seems interesting :)

[Isomorphic]

Hi All
A quick update to let you know the documentation around DynamicForm.linearMode has now been updated. Please let us know if anything continues to be unclear

Blama - we're not sure whether this is still an issue with the most recent framework code:
> Please note that there is also the 13.1d-only issue of the SelectItem right-width (see #2), that you didn't mention in your detailed post.

We suspect this is the same problem as with the width of the canvas item - the form not being wide enough to accommodate the item - but if you're still hitting a problem here can we ask that you start a new forum thread dedicated to that, including the sample code and steps to reproduce the problem

Regards
Isomorphic Software