You are viewing limited content. For full access, please sign in.

Question

Question

substitute control based on rules

asked on October 31

I’m migrating a form from the legacy designer to the modern form designer. The form includes five dropdown controls, each with:

  • Unique labels
  • Distinct lookup data sources populate the dropdown options
  • Conditional visibility rules (only one displays at a time, based on logic)

In the legacy designer, these controls shared the same position on the form, and rules hid all but the active one. In the modern designer, however, the visible control shifts position depending on which one is active, disrupting the layout.

Question: Is there a way to anchor all five controls to a single, fixed position in the modern designer—so the active dropdown always appears in the same spot, while the others remain hidden?

0 0

Answer

SELECTED ANSWER
replied two days ago Show version history

Hi Good question. Here are the views. The classic form is in the runtime view. I use css to get the controls to appear 4-across. I suspect the solution for the modern designer may involve css as well.

The reason for multiple controls is that after the user selects the business unit, they select the accounting period for the transaction from a list of periods that are currently open--based on a data lookup. The open periods will be different for different business units.

In the modern designer, if I select any business unit other than the first, the accounting period dropdown will show at the left edge of the line below instead of where I wanted it.

Classic Form.png
Modern Form - Designer View.png
Modern Form - Runtime View.png
Classic Form.png (12.81 KB)
0 0

Replies

replied on November 3

If you put them all in a single column but only ever have one displayed, they will all always appear in the same place.

0 0
replied on November 3

Can you share a picture of what the fields look like on both forms? 
 

In the modern designer do you have all of the fields side by side?

0 0
SELECTED ANSWER
replied two days ago Show version history

Hi Good question. Here are the views. The classic form is in the runtime view. I use css to get the controls to appear 4-across. I suspect the solution for the modern designer may involve css as well.

The reason for multiple controls is that after the user selects the business unit, they select the accounting period for the transaction from a list of periods that are currently open--based on a data lookup. The open periods will be different for different business units.

In the modern designer, if I select any business unit other than the first, the accounting period dropdown will show at the left edge of the line below instead of where I wanted it.

Classic Form.png
Modern Form - Designer View.png
Modern Form - Runtime View.png
Classic Form.png (12.81 KB)
0 0
replied one day ago

Ah gotcha now. I was thinking it was always on the other line. Its definitely possible and you have two options

1. Add all of the fields to one row in the designer and give the fields a css class like "one-row". In the CSS pane just add this CSS

.one-row {
  width: 25%; /* 100% / total # of fields */
}



downside of this is if you have too much in one row it can get messy and is hard to multi-select fields.


2. Use a section to set the widths for everything you want. Hide the section label and give it a class "hide-padding". In the CSS pane use this CSS

.Section.hide-padding {
  border: none; /* remove 1px border */
  & .fl-section.fl-component > div > .pane {
  	padding: 0px; /* remove section padding */
  }
  & .line {
    margin-bottom: 0px; /* remove section padding */
  }
}



Downside of this is the designer looks wild, but the end result is the same.

I'd probably go with option 1 as its a little simpler.

0 0
replied one day ago

Woo-hoo! I love option 1 for its simplicity (and of course for the fact that it works. Thank you Zachary!

0 0
replied one day ago

Np!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.