UI designer - add style to section/grid/field conditionally

Tool Set UI Designer
1

Is it possible to conditionally set/not set a CSS helper class on an element (section/grid/field/…) in the UI designer?

Reason is that we need to style/annotate the surrounding grid (parent), depending on the text field inside it being filled or not.
immagine
This could be done through a calculated field… But we don’t know if the UI designer offers anything for implementing a use case like this?

2

What comes to my mind is the following, but maybe there is a better way to do this:

You could use dependent controls. For those, you need a trigger field that is a boolean, confirm or enumeration which would be a computed field. Then you duplicate the grid/section, style one, the other not - and then only display one of them dependent on the computed trigger field.

3

I had exactly the same thought :slight_smile:

Dependent Helper Classes

I modeled the control grid for Shipping Address twice and then set the dependency so that one control grid was shown when the checkbox was checked and the other when it wasn’t.

4

Thanks, I think that looks promising.

Short question about the modelling. It won’t let me create a computation on a repeatable group field, although the computed field and the computation are within that same repeatable group:
image
What do I need to do here?

5

I’ve answered your second question in the linked thread.

6

@malcolm-silver-ice thank you!

Follow up question to modelling a UI element twice, depending on a bool variable:
image
I modelled it like this: we have a 2-column view with a repeatable group in each column. We have a calculated boolean, which tells whether the 2nd column (alternative_1) repeat has any entry or not.
In the document model it looks like this:
image

Now I want to add a style to the entire repeatable group alternative_1, depending on whether the calculated bool is true or false.

  • But I am not able to “duplicate” the repeatable group.
  • Nor do I know how to correctly make the repeatable group dependent on some field. Because if I right click alternative_1 in the right panel and choose “Dependent group” and choose the bool variable, this would mean I need to duplicate the entire alternative_1 group inside the document model as well, in order to distinguish 2 cases and show one or the other, right?
7

Hi @anon61393032

You have a number of different issues going on here which I will try to answer one by one.

  1. You have modeled a Multicolumn Section with 2 columns (Gebaeudeeinfuehrung_aussen_group). As you already have 2 repeats in this Multicolumn Section, you will not be able to add any further elements.

The solution to this is to create a Section and put the repeats in this section so that the structure looks like this:

  • Gebaeudeeinfuehrung_aussen_group
    • inline-repeat-variante_1
    • section_for_alternate_repeats
      • section_for_alternate_1
      • section_for_alternate_2

You can then drag and drop the repeats into their sections.

  1. You need to model a dependent control and not a dependent group. If you model a dependent group, then all the repeats based on that group will be affected. By modeling a dependent control, you can select which elements of the form model are affected.

You need to right click on the trigger element in your form model (in the screens view in the middle) and select “Dependent Controls”.

  1. Using “Dependent Controls” you can only select control grids and sections, not repeats. We have actually already solved this in part 1 by creating the individual sections for the repeats (section_for_alternate_1, section_for_alternate_2). As long as you modeled as suggested in the first answer, then you will be able to set the dependency for these sections.

You should now be able to toggle between the two repeats as desired.

8

Thank you, now it is clear!

image
image1512×970 146 KB

What could be the reason for the “Dependent Controls” → “Apply” to be greyed out? On all sections present in the screen view it is greyed out for me…
(using v2022.02 in this case)

9

The Dependent Control is modeled on the trigger, not on the element that you want to control. You need to right click on the control for the boolean, confirm or enumeration that you want to use to control this.

10

Ok, that means i need to “show” the boolean also on the UI, also if it is only a calculated value, right?
Because in principle the boolean itself should not be shown in our case…

11

You need to model it on the form. However, there’s nothing to stop you from modeling another dependency which hides the trigger :wink: