Microsoft Dynamics 365 | Integration, Dataverse...

Unified Interface - form layout issue

(0) Share

Report

Posted on by Lee-Martin

509

I've a form created in classic interface on Dynamics 365.

There are a large number of similar fields so I've created a structure where I've used Web Resources to create labels on the top and left axis. This works fine in classic look (screen grab attached).

However, in the new unified interface instead of creating a concertina effect which makes the fields shorter on the same line, it actively moves them to new lines which subsequently makes the form unreadable (screen grabs attached).

How can I retain the original behaviour in the Unified Interface?

Original

Unified Interface

All responses (10)

Answers (0)

cloflyMao 25,198 on at

Like (0)

Report

RE: Unified Interface - form layout issue

Hi Lee,

You could request a support ticket if those layout would be issue that not meet your demand:

https://admin.dynamics.com/?referer=mbssupport

or suggest your business requirement as an idea to forum:

https://experience.dynamics.com/ideas/

Regards,

Clofly
Lee-Martin 509 on at

Like (0)

Report

RE: Unified Interface - form layout issue

OK that is a serious issue. The value is closer to the column heading on the right than the one it represents.

We have already spent a lot of man hours on the layout and we don't have time to waste on this.

We're only moving to the Unified layout due to the classic look being suspended next year.

I've worked with responsive designs before and all of them all a use to set a maximum as well as a minimum.

Are there any more layout issue with the unified interface which will cause us further serious problems?
cloflyMao 25,198 on at

Like (0)

Report

RE: Unified Interface - form layout issue

Hi,

I raised a support ticket and answer below:

The issue that you described is not an issue, that's also by deisgn,

The width that you set will be treated as the minimum width in the UCI, and any available space will be used to expand the width further. At this time, there isn't a way to set the column width to a fixed value in the UCI.

The available customization would be that you can restric the sub-grid keep grid layout instead of being changed to list layout when screen size is small.

https://community.dynamics.com/crm/b/crminogic/posts/how-to-rearrange-traditional-sub-grid-in-dynamics-365-crm-unified-interface

Regards,

Clofly
Lee-Martin 509 on at

Like (0)

Report

RE: Unified Interface - form layout issue

As a compromise and the best way to save wasted business hours, we've decided to use a new entity and display the results in sub grids.

We now have the reverse problem

In the view for the sub-grid. We have 4 columns, one 300px, and three 75px.

We have used normal Dynamics functionality to state that we want one column of 300px, and three of 75px.

This is an OOTB feature.

Why then does the sub-grid stretch those fields beyond the dimensions that Dynamics allows us to specify.

This again is a usability issue.

In the Unified Interface, how to we ensure that the required dimensions which Dynamics allows us to specify OOTB are enforced?
cloflyMao 25,198 on at

Like (0)

Report

RE: Unified Interface - form layout issue

Hi Lee,

Currently there is no option for us to stop responsive behavior in UCI(because it is designed to be responsive interface).

To meet your business requirement in UCI, you might only set each columns parent container width attribute manually in the section, with unspported JavaScript methods at form onLoad event.

However, the method is not perfect:

1. You should set the section's parent tab to first tab, otherwise parent.document can't grab the element when form onload.(my thought is that in UCI, other elements in other tabs besides first tab would only be loaded after we click them)

2. A timer is needed to wait for section element been loaded.

3. Space in field should also be removed with js.

You could take it as reference:

function keepLayout() {

debugger;

setTimeout(function() {

try {

if (Xrm.Internal.isUci()) {

var columnSet = parent.document.querySelectorAll('[data-id="tab_2_section_1"]')[0].children[0].children[0].children;

for (var i = 0; i < columnSet.length; i++) {

columnSet[i].style.setProperty("width", "25%", "important");

}

}

} catch (err) {

alert(err);

}

}, 2000);

}

Result:

With remove() function to remove space in fields.

Regards,

Clofly
Lee-Martin 509 on at

Like (0)

Report

RE: Unified Interface - form layout issue

In addition, there are other areas where I've used a web resource as a label in a 4 column section.

The columns with the label are now out of sync with the columns without it (I've placed spacers in the other cells in the row with the label).

Again this was working as required in the classic look. Even reducing the text size of the label doesn't eliminate this.
Lee-Martin 509 on at

Like (0)

Report

RE: Unified Interface - form layout issue

Thanks for your help, my knowledge of responsive behaviour isn't the issue.

The problem is that my original layout is a specific business requirement.

The design was done in that way because the form labels are too intrusive and so the equivalent of column and row headings using web resource labels where deemed the appropriate solution. - I'm actually using more than one of these grids.

The image below this comment "you could create web resource for each cell elements:" is exactly how I have created them. A web resource above each column and also to the left of each row, with each individual field (with the label removed) in the appropriate place.

I've experimented with 3 columns with the label on top (using both the row and column headings in the label), but there isn't enough room in the label without it going onto more than one line (which breaks the business requirement), and adjusting the label length from 115 to the maximum of 283 does not appear to work (is this also something that's also changed in the Unified Interface, as nothing is changing when I adjust this?).

I have zero need for these forms to behave responsively, is there a way to suspend this unrequired behaviour?
cloflyMao 25,198 on at

Like (0)

Report

RE: Unified Interface - form layout issue

Hi Lee,

As Ravi suggested, UCI has responsive design, and from your screenshot of UCI,

I thought your form layout would be 4-columns in one section, and your screen width resolution is lower than 1517,

thus your elements flowed.

UCI

Classical(bottom section):

layout:

However, it seems that you had created 3 web resources for each column of fields ?

because all fields flowed with their parent column.

The responsive behavior is by design in UCI, so you should make your form structure be adaptive to this automatic behaviour feature,

you could create web resource for each cell elements:

Or build two sections, section element will keep layout even if screen width is lower than 1000,

But responsive behavior will still happen on field elements.

Regards,

Clofly
Suggested answer

RaviKashyap 55,410 on at

Like (0)

Report

RE: Unified Interface - form layout issue

Hi,

Unified Interface has responsive design which adapts to the screen size. this means that if there is not sufficient width then it will reflow the components to the next line. This is what happening in your case. If you can, try to reduce the width and see if it aligns properly.

Hope this helps.
Suggested answer

Denny Deng on at

Like (0)

Report

RE: Unified Interface - form layout issue

you could consider to raise a support ticket to MS CRM support