After selecting a component, for example as a display format for a content type field, there are various options for the component, for example Variant and then various props. The current form is a bit unclear because there are often two select boxes and the placeholder text for the first box - Source - is often "Select" which seems like a direction to the site builder to select something from the Source menu. But often selecting a Source from this list can be skipped, and is only needed for advanced / unusual cases.

So this placeholder text of "Select" should be changed to avoid the idea that it is a direction to the user.

One possibility might be "default" which would hopefully suggest to the site builder that this is the most common value and probably what you want, but you can change it if you want to.

Or there could be a new heading such as "Advanced options" meaning for the UI Suite newbie site builder "you probably don't want these options" (ie green arrow options in the screenshot below).

form

CommentFileSizeAuthor
#10 prop-q.jpg108.97 KBjuc1
#4 2.jpg55.04 KBjuc1
#4 1.jpg50.39 KBjuc1
#2 Capture d’écran du 2025-07-25 08-21-40.png44.31 KBpdureau
button-q.jpg154.77 KBjuc1

Comments

juc1 created an issue. See original summary.

pdureau’s picture

pdureau commented
Title: Wording of Form / Select options on component settings » Wording of sources on component form
Priority: Normal » Major
StatusFileSize
new Capture d’écran du 2025-07-25 08-21-40.png44.31 KB

There are 3 kinds of Source plugins in UI Patterns 2:

  • "Widgets": simple form elements storing directly the data filled by the user. For example, a textfield for a string or a checkbox for a boolean.
  • Sources retrieving data from Drupal API: they can be context agnostic (ex: a menu for links) or context specific (ex: the title field for a string)
  • Context switchers: They don't retrieve data but they give access to other data sources. For example, the author fields from an article content.

We have already improved the UX of context switchers by renaming them like this: [Current context] ➜ [New context]: [Entity] ➜ [Field], [Field item] ➜ Referenced [Entity]... See #3525836: [2.0.5] Improve context switching UX

Can we do something similar for widgets? Knowing those facts:

  • There is already a tag to know which sources are widgets or not
  • Normally, there is only one widget by prop type, but community can add more in their projects

Or, more specifically, we do something special when the default source (we know this one thanks to the PropType attribute) is a widget, so we are sure there is only one:

This default + widget source are:

  • AttributesPropType: attributes
  • BooleanPropType: checkbox
  • EnumListPropType: selects
  • EnumPropType, VariantPropType: select
  • EnumSetPropType: checkboxes
  • IdentifierPropType, StringPropType: textfield
  • LinksPropType: menu >> not a widget
  • ListPropType: list_textarea
  • NumberPropType: number
  • SlotPropType: component >> not a widget
  • UrlPropType: url

We are already putting them at the top of the selector (don't we?), what can we do more? Some wording as proposed in the issue? Some hints?

For information, SDC Display doesn't have this issue because there is only 2 "sources" by prop type:

  • "Static": a widget with direct filling of data
  • "Dynamic": a contextualized data retrieval

SDC Display

What can we do to simplify our UX?

grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Maybe the confusion also comes from the default empty label "- Select -"?

Maybe let's change this default empty label to "- Choose a source -" or "- Choose a data source -"?

And for the widget source, like with "[Entity]", "[Field]", etc prefixes, why not add a "[Widget]" prefix? or in this case it is too much and just in a first time changing the empty label as a first step will be enough?

juc1’s picture

juc1 commented
StatusFileSize
new 1.jpg50.39 KB
new 2.jpg55.04 KB

@grimreaper

I think "Data source" is better than the current "Source" as the menu title but I don't like "- Choose a data source -" because it encourages the user to open this menu - Entity Link etc which might baffle Patterns beginners with options that they don't understand and probably don't want. I would like to see helpful defaults pre-selected wherever possible, and then re my screenshot below, hopefully the chevron - v - indicates to the user that a helpful option has been pre-selected but if you want to see more options, click on the chevron to open the menu.

ui

pdureau’s picture

pdureau commented
pdureau’s picture

pdureau commented
Title: Wording of sources on component form » [2.0.7] Wording of sources on component form
juc1’s picture

juc1 commented

Another thing - in the current layout, both select boxes are under the title "Source" - the relationship between the two select boxes is not clear eg that the first select box is the "parent" ie determines the options available in the second select box.

So maybe something is needed to indicate this relationship and / or maybe the second select box needs its own title, so something like:

Data source:
(First select box)

Value:
(Second select box.)

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Title: [2.0.7] Wording of sources on component form » [2.0.8] Wording of sources on component form
just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Title: [2.0.8] Wording of sources on component form » [2.0.9] Wording of sources on component form
juc1’s picture

juc1 commented
StatusFileSize
new prop-q.jpg108.97 KB

In this card SDC one of the props is do you want the content to be centred? - boolean yes / no

Do the other two source options ("More Data") here make sense for this question?

If not, could could irrelevant sources / options be removed / hidden to streamline the form? Of course I don't just mean for this particular prop but in general.

prop

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented

Dear juc1,
to answer your question in comment #10,
those other sources make perfect sense for the checkbox.
Some people will for example map a field value to the value of the prop.

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented

If you intend to simplify the default component form and propose simpler prop forms for the users, you can try our experimental sub-module "ui_patterns_ui", it allows to define simpler forms for each component.

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Title: [2.0.9] Wording of sources on component form » [2.x] Wording of sources on component form
juc1’s picture

juc1 commented

@just_like_good_vibes ok thanks.

just_like_good_vibes’s picture

just_like_good_vibes
Location PARIS
commented
Status: Active » Closed (works as designed)

hello, i close this issue for now. thank you.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.