volto icon indicating copy to clipboard operation
volto copied to clipboard

Add support for custom item placeholder and fixed (non-add/removable) lists in ObjectListWidget

Open alexandreIFB opened this issue 6 months ago • 1 comments

This PR implements two new features for the ObjectListWidget:

  • Custom item placeholder:
    You can now define which field will be used as the placeholder/title for each item in the list, using the placeholderItemField prop. This makes it easier to identify items in large or complex lists. If placeholderItemField is not provided, the widget will fallback to the previous behavior, using the schema title or a default value.

  • Fixed (non-add/removable) lists:
    The new fixedItems prop allows you to lock the list, disabling the add and remove buttons. This is useful for scenarios where the number of items should be fixed, but editing is still allowed. If fixedItems is not set, the widget keeps the previous behavior, allowing add and remove actions.

    I'm open to suggestions for a better name for the fixedItems property!

Example usage

In the Teaser schema or any other, add just for testing purposes:

social_networks: {
  title: 'Redes Sociais',
  widget: 'object_list',
  fixedItems: true,
  placeholderItemField: 'name',
  schema: {
    title: 'Rede Social',
    fieldsets: [
      {
        id: 'default',
        title: 'Default',
        fields: ['name', 'url'],
      },
    ],
    properties: {
      name: {
        title: 'Nome',
        type: 'string',
        choices: [
          ['facebook', 'Facebook'],
          ['twitter', 'Twitter'],
          ['instagram', 'Instagram'],
          ['linkedin', 'LinkedIn'],
        ],
        default: 'facebook',
      },
      url: {
        title: 'URL',
        type: 'string',
        default: '',
      },
    },
    required: ['name', 'url'],
  },
  default: [
    {
      '@id': uuid(),
      name: 'facebook',
      url: 'https://facebook.com/exemplo',
    },
    {
      '@id': uuid(),
      name: 'twitter',
      url: 'https://twitter.com/exemplo',
    },
    {
      '@id': uuid(),
      name: 'instagram',
      url: 'https://instagram.com/exemplo',
    },
    {
      '@id': uuid(),
      name: 'linkedin',
      url: 'https://linkedin.com/in/exemplo',
    },
  ],
},

Motivation

  • Improves usability for editors working with large or fixed lists.
  • Enables new use cases, such as fixed social network lists, team members, etc.
  • Makes item identification much easier.

Maintains full backward compatibility: if the new props are not used, the widget behaves exactly as before.

Closes #7168.

alexandreIFB avatar Jun 03 '25 19:06 alexandreIFB

I think this is a little bit more clear and explicit, but please make sure it is still correct. Thank you!

Corrections are welcome, thank you!

alexandreIFB avatar Jun 04 '25 13:06 alexandreIFB

@stevepiercy the news is ok now?

wesleybl avatar Aug 08 '25 15:08 wesleybl

@wesleybl yes, and thank you for the follow up!

stevepiercy avatar Aug 08 '25 16:08 stevepiercy

This PR needs a technical review and approval, then it can be merged.

stevepiercy avatar Aug 08 '25 16:08 stevepiercy