Hey,
I am new to d8, I built a custom composite element with 3 field,
everything woks amazing but I have to little things that I don't know how to operate:

1. all fields in the custom composite appear as block items, one beneath the other (image attached).
is it possible to control the display via the UI?
I see that the fields at the custom composite element in the example form are one next to each other.

2. is it possible to remove the add more fields via the UI?
I know I can remove them using this css but I would like to choose for each field:

div[class*="add-more-items"] {
    display: none;
}

this is the yml of my form:

uuid: 1ef4c762-be89-4810-8b48-f25f86392b0a
langcode: he
status: open
dependencies: {  }
open: null
close: null
weight: 0
uid: 1
template: false
archive: false
id: hatsara_achuz_misra_obei_horaah
title: 'webform custom composite'
description: ;
category: ''
elements: |
  private_data:
    '#type': webform_flexbox
    sso_first_name:
      '#type': textfield
      '#title': 'fname'
      '#title_display': before
      '#description_display': after
      '#readonly': true
    sso_last_name:
      '#type': textfield
      '#title': ' lname'
      '#title_display': before
      '#description_display': after
      '#readonly': true
    sso_id:
      '#type': textfield
      '#title': 'id'
      '#title_display': before
      '#description_display': after
      '#readonly': true
  flex3:
    '#type': webform_flexbox
    workinotherinstitution:
      '#type': radios
      '#title': 'add more fields'
      '#title_display': before
      '#options':
        yes: yes
        no: no
      '#options_display': two_columns
      '#other__type': textfield
      '#other__option_label': ''
      '#required': true
  flexbox4:
    '#type': webform_flexbox
    '#states':
      invisible:
        ':input[name="workinotherinstitution"]':
          '!value': כן
    '#states_clear': false
    additionalworkplaces:
      '#type': webform_custom_composite
      '#title': 'מקומות עבודה נוספים'
      '#multiple': 4
      '#multiple__header': false
      '#multiple__add_more_input_label': ''
      '#multiple__min_items': '1'
      '#multiple__sorting': false
      '#format_items': table
      '#element':
        musad_name:
          '#type': textfield
          '#title': musad_name
        taasuka:
          '#type': webform_select_other
          '#options':
            'עובד הוראה': 'עובד הוראה'
          '#title': taasuka
          '#אחר': אחר
        hekef:
          '#type': textfield
          '#title': hekef
          '#description': 'ספרות בלבד'
      '#select2': true
css: ''
javascript: ''
settings:
  ajax: false
  ajax_scroll_top: form
  page: true
  page_submit_path: ''
  page_confirm_path: ''
  form_submit_once: false
  form_exception_message: ''
  form_open_message: ''
  form_close_message: ''
  form_previous_submissions: true
  form_confidential: false
  form_confidential_message: ''
  form_convert_anonymous: false
  form_prepopulate: false
  form_prepopulate_source_entity: false
  form_prepopulate_source_entity_required: false
  form_prepopulate_source_entity_type: ''
  form_reset: false
  form_disable_autocomplete: false
  form_novalidate: false
  form_disable_inline_errors: false
  form_required: false
  form_unsaved: false
  form_disable_back: false
  form_submit_back: false
  form_autofocus: false
  form_details_toggle: false
  form_access_denied: default
  form_access_denied_title: ''
  form_access_denied_message: ''
  form_access_denied_attributes: {  }
  form_file_limit: ''
  submission_label: ''
  submission_log: false
  submission_views: {  }
  submission_views_replace: {  }
  submission_user_columns: {  }
  submission_user_duplicate: false
  submission_access_denied: default
  submission_access_denied_title: ''
  submission_access_denied_message: ''
  submission_access_denied_attributes: {  }
  submission_exception_message: ''
  submission_locked_message: ''
  previous_submission_message: ''
  previous_submissions_message: ''
  autofill: false
  autofill_message: ''
  autofill_excluded_elements: {  }
  wizard_progress_bar: true
  wizard_progress_pages: false
  wizard_progress_percentage: false
  wizard_progress_link: false
  wizard_start_label: ''
  wizard_preview_link: false
  wizard_confirmation: true
  wizard_confirmation_label: ''
  wizard_track: ''
  preview: 0
  preview_label: ''
  preview_title: ''
  preview_message: ''
  preview_attributes: {  }
  preview_excluded_elements: {  }
  preview_exclude_empty: true
  preview_exclude_empty_checkbox: false
  draft: none
  draft_multiple: false
  draft_auto_save: false
  draft_saved_message: ''
  draft_loaded_message: ''
  confirmation_type: page
  confirmation_title: ''
  confirmation_message: ''
  confirmation_url: ''
  confirmation_attributes: {  }
  confirmation_back: true
  confirmation_back_label: ''
  confirmation_back_attributes: {  }
  confirmation_exclude_query: false
  confirmation_exclude_token: false
  limit_total: null
  limit_total_interval: null
  limit_total_message: ''
  limit_user: null
  limit_user_interval: null
  limit_user_message: ''
  entity_limit_total: null
  entity_limit_total_interval: null
  entity_limit_user: null
  entity_limit_user_interval: null
  purge: none
  purge_days: null
  results_disabled: false
  results_disabled_ignore: false
  token_update: false
access:
  create:
    roles:
      - anonymous
      - authenticated
    users: {  }
    permissions: {  }
  view_any:
    roles: {  }
    users: {  }
    permissions: {  }
  update_any:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_any:
    roles: {  }
    users: {  }
    permissions: {  }
  purge_any:
    roles: {  }
    users: {  }
    permissions: {  }
  view_own:
    roles: {  }
    users: {  }
    permissions: {  }
  update_own:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_own:
    roles: {  }
    users: {  }
    permissions: {  }
  administer:
    roles: {  }
    users: {  }
    permissions: {  }
  test:
    roles: {  }
    users: {  }
    permissions: {  }
handlers: {  }

Comments

davsev created an issue. See original summary.

davsev’s picture

Issue summary: View changes
jrockowitz’s picture

1. To alter the display of a composite element you would have to use custom code or CSS

2. Currently, to remove the 'add more items' you would have to use custom code or CSS.

It should be possible to provide a 'Show/hide add more' checkbox via the UI.

jrockowitz’s picture

Title: Custom composite fields appear as block elements » Add the ability to remove the add more fields via the UI

Updating the issue title to reflect the change.

jrockowitz’s picture

Status: Active » Needs review
StatusFileSize
new14.08 KB
jrockowitz’s picture

StatusFileSize
new54.14 KB

@davsev BTW, If you want to display your elements in a table layout check 'Display elements in table columns'

davsev’s picture

Great!
Thank you!!

jrockowitz’s picture

Status: Needs review » Fixed

  • jrockowitz committed ccf72a0 on 8.x-5.x
    Issue #3007247 by jrockowitz, davsev: Add the ability to remove the add...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.