Custom placeholder and lock add/remove actions in ObjectListWidget

[alexandreIFB]

It would be very useful to add two new features to the ObjectListWidget component:

1. Custom placeholder for item title
   Allow a prop to define which object field is shown as the item title in the list, making it easier to identify items in large or complex lists.

2. Property to lock add/remove actions
   Add a prop (e.g., fixedItems) that, when enabled, disables the add and remove buttons, allowing only editing of existing items. This is useful for scenarios where the number of items should be fixed.

Practical Example

In the Teaser block, we could create a social networks field using these new features, as shown below:

...
fieldsets: [
      {
        id: 'default',
        title: 'Default',
        fields: [
          'href',
          'overwrite',
          ...(data?.overwrite
            ? ['title', 'head_title', 'description', 'preview_image']
            : []),
          'social_networks', # add field
        ],
      },
    ],
...

social_networks: {
    title: 'Redes Sociais',
    widget: 'object_list',
    disableAddRemove: true,
    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'],
          ],
        },
        url: {
          title: 'URL',
          type: 'string',
        },
      },
      required: ['name', 'url'],
    },
    placeholderItemField: 'name',
    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',
      },
    ],
  },

Before:

After

Benefits

• Improves usability for large lists.
• Enables fixed-list scenarios, such as social networks, team members, etc.
• Makes item identification much easier for editors.

[davisagli]

I've definitely wanted the first one before. Possibly it should take a custom component to render the title, instead of a property name

[alexandreIFB]

I've definitely wanted the first one before. Possibly it should take a custom component to render the title, instead of a property name

Yes, there is already an option that uses "title" by default. The idea is to support both scenarios: keep the fallback to the previous behavior (using "title"), and, in specific cases, when placeholderItemField is provided, use that value instead. This way, we ensure flexibility and backward compatibility, allowing customization when needed without breaking the current functionality.

[github-actions[bot]]

Hi There! 👋

We haven't seen any activity on this issue in a while :sleeping:, and we want to make sure that it's still relevant.

If updating to the latest version of Volto doesn't help, please let us know by:

• adding a comment about what needs to be done next 💬
• updating its status and other labels 🏷️

Otherwise close this issue. 🧹