2.x Upgrade: Using SDC component template for entity type display

Created on 30 June 2025, 6 days ago

I will keep this brief to start.

I am attempting to upgrade a site from UI Patterns 1.x to 2.x. The site uses Content Type View Modes to map the content fields to component fields and display them. This is done the Manage Display tab using the "Select a layout" field.

After upgrading to 2.x, I am able to do the same, however it doesn't appear to use the SDC template (TWIG) file to display the mapped fields. I also don't see a pattern-use-wrapper.html.twig template in UI Patterns anymore.

Is this functionality no longer possible or available with UI Patterns 2.x?

πŸ’¬ Support request
Status

Active

Version

2.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States joegl

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @joegl
  • πŸ‡ΊπŸ‡ΈUnited States joegl
  • πŸ‡«πŸ‡·France pdureau Paris

    Have you activated ui_patterns_layouts sub-module ?

  • πŸ‡ΊπŸ‡ΈUnited States joegl

    Yes I have the ui_patterns_layout module enabled. I am able to set up everything in the UI the same as in 1.x. The issue is that the HTML output isn't using the .twig template included with the SDC component. It could be something we have custom in the back-end but I had assumed this functionality was part of UI Patterns. Thanks for the response.

  • πŸ‡«πŸ‡·France pdureau Paris

    Can you share your entity view display YAML file?

  • πŸ‡ΊπŸ‡ΈUnited States joegl

    Sure, I've pasted it below. I did remove all the hidden fields from the hidden section and config dependencies to try to reduce the lines here.

    Also it does sound like what I'm trying to do is supported in 2.x still, and something else could be preventing it from working? I can do some more troubleshooting on my own if that's the case but I wanted to confirm that functionality is intact in 2.x, because I got mixed results when looking it up,

    langcode: en
    status: true
    dependencies:
      config:
        - core.entity_view_mode.node.org_card
        - field.field.node.org_news.layout_builder__layout
        - field.field.node.org_news.cm_news_featured_media
        - field.field.node.org_news.cm_news_publishing_date
        - field.field.node.org_news.cm_news_source
        - field.field.node.org_news.cm_news_topics
        - field.field.node.org_news.cm_ext_news_dek_long
        - field.field.node.org_news.cm_ext_news_news_source
        - node.type.org_news
      module:
        - datetime
        - ds
        - element_class_formatter
        - field_formatter_class
        - link
        - org_media
        - user
    third_party_settings:
      ds:
        layout:
          id: 'ui_patterns:ext_profile_helper:news_vertical_teaser'
          library: null
          disable_css: false
          entity_classes: all_classes
          settings:
            label: ''
            ui_patterns:
              component_id: 'ext_profile_helper:news-vertical-teaser'
              variant_id: null
              props:
                attributes:
                  source_id: attributes
                  source:
                    value: ''
              slots: {  }
        regions:
          news_vertical_teaser_image:
            - cm_news_featured_media
          news_vertical_teaser_headline:
            - node_title
          news_list_publishing_date:
            - cm_news_publishing_date
          news_topics:
            - cm_news_topics
          news_source:
            - cm_ext_news_news_source
          news_dek:
            - cm_ext_news_dek_long
          news_url:
            - 'dynamic_token_field:node-news_content_url'
          news_external_url:
            - cm_news_source
        fields:
          'dynamic_token_field:node-news_content_url':
            plugin_id: 'dynamic_token_field:node-news_content_url'
            weight: 6
            label: hidden
            formatter: default
          node_title:
            plugin_id: node_title
            weight: 1
            label: hidden
            formatter: default
            settings:
              link: false
              'link class': ''
              wrapper: ''
              class: ''
    id: node.org_news.org_card
    targetEntityType: node
    bundle: org_news
    mode: org_card
    content:
      cm_news_featured_media:
        type: media_multimedia_formatter
        label: hidden
        settings:
          view_mode: default
          link: false
          image:
            image_formatter: responsive_image_style
            image_formatter_image_style: cta_2x_1014x676
            image_formatter_responsive_image_style: card_3_2
            image_formatter_view_mode: default
          video:
            video_formatter: entity
            video_formatter_view_mode: default
          other:
            view_mode: default
        third_party_settings:
          field_formatter_class:
            class: ''
        weight: 0
        region: news_vertical_teaser_image
      cm_news_publishing_date:
        type: datetime_default
        label: hidden
        settings:
          timezone_override: ''
          format_type: org_month_date_year
        third_party_settings:
          field_formatter_class:
            class: ''
        weight: 2
        region: news_list_publishing_date
      cm_news_source:
        type: link
        label: hidden
        settings:
          trim_length: null
          url_only: true
          url_plain: true
          rel: '0'
          target: '0'
        third_party_settings:
          field_formatter_class:
            class: ext-news-ext-link
        weight: 7
        region: news_external_url
      cm_news_topics:
        type: entity_reference_list_label_class
        label: hidden
        settings:
          link: true
          class: cm-list-unstyled
          list_type: ul
        third_party_settings:
          field_formatter_class:
            class: ''
          ds:
            ds_limit: '1'
        weight: 3
        region: news_topics
      cm_ext_news_dek_long:
        type: wrapper_class
        label: above
        settings:
          class: ''
          tag: div
          link: false
          link_class: ''
          summary: false
          trim: 200
        third_party_settings: {  }
        weight: 5
        region: news_dek
      cm_ext_news_news_source:
        type: entity_reference_label_class
        label: above
        settings:
          link: false
          class: ''
          tag: span
        third_party_settings:
          field_formatter_class:
            class: ''
        weight: 4
        region: news_source
    hidden:
      layout_builder__layout: true
    
    
  • πŸ‡«πŸ‡·France pdureau Paris

    You are using Display Suite. Is https://www.drupal.org/project/ui_patterns_ds β†’ installed?

  • πŸ‡ΊπŸ‡ΈUnited States joegl

    Yes, ui_patterns_ds is enabled.

  • πŸ‡«πŸ‡·France pdureau Paris
Production build 0.71.5 2024