Restructuring the layout of WI forms

Leigh_Kilday

I am testing different layouts to modernise the look of the WI forms. The way the .js files are currently defined, you define each row with columns.

I want to have a 2:1:1 layout in columns, where I can have the multi-line Description beside multiple rows of enum items.

I'm drawing inspiration from Azure DevOps work items, because that's what I'm used to.
For example (ignoring the boxed area - not my image):
 

Has anybody achieved this?

Geoff_Ross

Yup, doable.



Just used a negative margin end the end. The second row has a spacer and then the Other Field and then moved the whole thing up by giving the row above a margin-bottom of -80px.

Geoff_Ross

This exact layout is not going to be supported as a longstring boxes are only on one row and so the enums in the other columns will be very spaced out. But the 2:1:1 concept should be possible by using ColSpan to force controls to take the width of two columns (or more) instead of one.

Geoff

Tom_Hendricks

Stating the obvious, but I think what we really need here is the concept of a "RowSpan" attribute.

It hasn't been super high on my list, but I have also been wanting what @Leigh_Kilday is describing here, for more than a few of my forms.

Geoff_Ross

The trouble here is that the forms are defined as a array of rows, each with columns, so the concept of RowSpan would still make the whole row deeper, not just that 'piece' of the row. An option to flip the whole concept on its head and define a form a an array of columns each with rows would enable the exact design above but is a complete do-over of how portal forms work.

I wonder if there's something that could be done with the display attribute to allow a single control on a row to overlap with a spacer (blank space) below it?

Geoff_Ross

Yup, doable.



Just used a negative margin end the end. The second row has a spacer and then the Other Field and then moved the whole thing up by giving the row above a margin-bottom of -80px.