Tabbed interface for user profile edit screen in volto

pigeonflight · February 14, 2024, 10:30pm

I want to group the fields in the user profile under tabs like this:

Would appreciate a few pointers.

So far we've done some customising of the user profile (userschema.xml in the backend).

BTW, with some help from @tiberiuichim we now have support for repeatable field values (stored as a zope schema list): see a dicussion about this: Customizing the user profile edit view: adding repeatable fields to member fields and the personal-information view

I have a live prototype of the tabbed interface concept available so people can see what we're aiming at.

tiberiuichim · February 15, 2024, 7:29am

In a form schema, the fieldsets are rendered as tabs. So the "trick" would be to define several fieldsets and assign fields to those fieldsets. I don't know if that's possible with the userschema.xml, but I would expect that it is.

pigeonflight · September 29, 2024, 10:43pm

Following up on this. I want to pull this off next month. I'll put in the time, but will need some pointers along the way. I think I need a few check-ins with someone with right amount of Volto and Plone experience.

pigeonflight · September 30, 2024, 12:12pm

I've made some initial progress by customising components/manage/Preferences/PersonalInformation.jsx
Currently I'm hardcoding fields to showup under hardcoded tabs. It works for a quick proof of concept.

tabbed-interface-demo

pigeonflight · September 30, 2024, 1:25pm

Now that I know it works, I'm switching to use semantic-ui. For this project, hardcoding in the frontend is likely good enough. Eventually, it might be nice to abstract this so that it could be defined along with the userschema.xml.

tabbed-interface-demo (1)

pigeonflight · October 1, 2024, 3:48pm

Volto already provides a Form component:

github.com

plone/volto/blob/8aff340d809d2334ae2bb30609f0f50fc6631856/packages/volto/src/components/manage/Form/Form.jsx#L67


      
          } from '@plone/volto/actions';
          import { compose } from 'redux';
          import config from '@plone/volto/registry';
          import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
          
          /**
           * Form container class.
           * @class Form
           * @extends Component
           */
          class Form extends Component {
            /**
             * Property types.
             * @property {Object} propTypes Property types.
             * @static
             */
            static propTypes = {
              schema: PropTypes.shape({
                fieldsets: PropTypes.arrayOf(
                  PropTypes.shape({
                    fields: PropTypes.arrayOf(PropTypes.string),

This is used by PersonalInformation.jsx to create the default form.

github.com

plone/volto/blob/146600451642250b98ee807e39036e524420778d/src/components/manage/Preferences/PersonalInformation.jsx#L165-L226


      
          <Form
            formData={this.props.user}
            schema={{
              fieldsets: [
                {
                  id: 'default',
                  title: this.props.intl.formatMessage(messages.default),
                  fields: [
                    'fullname',
                    'email',
                    'portrait',
                    'home_page',
                    'location',
                  ],
                },
              ],
              properties: {
                fullname: {
                  description: this.props.intl.formatMessage(
                    messages.fullnameDescription,

This file has been truncated. show original

I'm assuming that Volto also provides a tabbed form option, this would save me from reinventing my own, as I am currently doing.