Dynamic Form/Section - Formatting Question

[Sin]

Hi,

We are redesigning an existing application that uses SmartClient 10.0.12.27.14. Please see the attached design. We have a few questions about how to implement this design.

1. How we can create the labelled borders you see around several fields that say “Size” and “Return”. We are trying to do this within one large DynamicForm if possible.
2. How can we redesign the sectionItems to look like the design for the “Fund Information” and “OPS Adjustments” sectionItems?


Thanks,

-Sin

[Isomorphic]

There are a lot of different ways you could get that look.

Were you given a CSS implementation for this look? If so, let's see it.

What browsers do you need to support? Older IE often requires a totally different approach from modern browsers.

Are there are any fixed dimensions or can panels like these be arbitrary sizes and shapes?

[Sin]

Hi thanks for looking at my question. To give you more details, I'm not given a CSS (I'm free to create one from scratch). As for browsers, we use Chrome primarily but do have to support IE9 and Safari 3.1. As for dimensions, the width is basically fixed. So basically, what you see on the picture is what we are trying to achieve (dimension-wise).

[Isomorphic]

OK. It's not clear if you ever intend the area under the labels (SIZE / RETURN) to be usable. If not, you could make an HLayout where the left side, including the space under the label, is one component.

As far as the details of how to do the text and the slanted line, there are lots of approaches from just having all one image to instead using fancy CSS tricks to draw diagonal lines (it is possible - at least for 45 degree lines). That part we'll leave up to you.

[Sin]

Just for clarification, as I'm fairly new to SmartClient.....did you say we can embed one of the layout controls, like HLayout, inside a DynamicForm?

[Isomorphic]

Any Canvas-based component can be embedded into a DynamicForm via CanvasItem. This includes HLayout and other Layouts.

[Sin]

Thank you for your response. We will take your suggestion attempt to embed other layout-type controls inside our dynamic form and continue our prototyping. Again, much appreciated!

Thanks,

-Sin

[Isomorphic]

We didn't actually suggest the use of CanvasItem here, or embedding an HLayout within a DynamicForm. We just pointed out that, since your diagonal tab design seems to completely burn all the space underneath it, you could take the diagonal tab and the space underneath it and render that as one component, paired with a DynamicForm (for the right half), combined via an HLayout.