Custom users area – no create button

I have created a custom users view that extends the k-users-view component, but somehow the Create new user button has gone missing. Panel stuff is not my strong suit so I am not sure where to look for a solution. The Vue component for the users view? The dialogs for the view? Any help is greatly appreciated. :slight_smile:
The site is on version 5.0.0-beta.6

<?php

use Kirby\Cms\App as Kirby;
use Kirby\Toolkit\Escape;
use Kirby\Cms\App;
use Kirby\Toolkit\A;

Kirby::plugin('my-plugin/users-view', [
    'areas' => [
        'users' => function () {
            return [
                'label' => 'Accounts',
                'icon' => 'users',
                'menu' => true,
                'link' => 'users',
                'views' => [
                    'users' => [
                        'pattern' => 'users',
                        'action' => function () {
                            $kirby = App::instance();
                            $role  = $kirby->request()->get('role');
                            $roles = A::sort($kirby->roles()->toArray(fn($role) => [
                                'id'    => $role->id(),
                                'title' => $role->title(),
                            ]), 'title', 'asc');
                            return [
                                'component' => 'k-users-view',
                                'props' => [
                                    'role' => function () use ($kirby, $roles, $role) {
                                        if ($role) {
                                            return $roles[$role] ?? null;
                                        }
                                    },
                                    'roles' => array_values($roles),
                                    'users' => function () use ($kirby, $role) {
                                        $users = $kirby->users();

                                        if (empty($role) === false) {
                                            $users = $users->role($role);
                                        }

                                        // sort users alphabetically
                                        $users = $users->sortBy('lastname', 'asc');

                                        // paginate
                                        $users = $users->paginate([
                                            'limit' => 20,
                                            'page'  => $kirby->request()->get('page')
                                        ]);

                                        return [
                                            'data' => $users->values(fn($user) => [
                                                'id'    => $user->id(),
                                                'image' => false,
                                                'info'  => Escape::html($user->email()) . ' [' . Escape::html($user->role()->title()) . ']',
                                                'link'  => $user->panel()->url(true),
                                                'text'  => mb_strtoupper(Escape::html($user->lastname())) . ', ' . Escape::html($user->firstname())
                                            ]),
                                            'pagination' => $users->pagination()->toArray()
                                        ];
                                    },
                                ]
                            ];
                        }
                    ]
                ]
            ];
        }
    ]
]);

I did some further digging and the issue (obviously) lies with the buttons property of the area but I still have not found a solution. When I remove my plugin, I am able to configure/override the buttons for the users area via the config. But with the plugin, button settings won’t have any effect and no buttons are visible.

Kirby::plugin('my-plugin/users-view', [
    'areas' => [
        'users' => function () {

            return [
                'label' => 'Accounts',
                'icon' => 'users',
                'menu' => true,
                'link' => 'users',
                'buttons' => [
                    // This button does not show up
                    'newsletter' => [
                        'icon'   => 'heart',
                        'text'   => 'Kosmos',
                        'theme'  => 'purple-icon',
                        'link'   => 'https://getkirby.com/kosmos'
                    ],
                ],
                'views' => [... custom users view ]
            ];
        }
    ]
]);

I would think the buttons entry must be in the view props, not the area options.

You mean like this? Unfortunately also has no effect.
I also can’t seem to find the k-users-view component anywhere. Is that part of the UI lab?

<?php

Kirby::plugin('aceki/users-view', [
    'areas' => [
        'users' => function () {

            return [
                'label' => 'Accounts',
                'icon' => 'users',
                'menu' => true,
                'link' => 'users',
                'views' => [

                    'users' => [
                        'pattern' => 'users',
                        'action' => function () {
                            return [
                                'component' => 'k-users-view',
                                'props' => [
                                    'buttons' => [
                                        'newsletter' => [
                                            'icon'   => 'heart',
                                            'text'   => 'Kosmos',
                                            'theme'  => 'purple-icon',
                                            'link'   => 'https://getkirby.com/kosmos'
                                        ],
                                    ]
                                ]
                            ];
                        }
                    ]
                ]
            ];
        }
    ]
]);

Three things to get this to work:

  1. The Vue component expects an array for buttons, not an object. Your PHP array must not have any keys.
  2. As you are working very bare-bones here on the Vue components, they expect the button definitions already be fully resolved to an array with component and props entries:
'buttons' => [
	[
		'component' => 'k-view-button',
		'props' => [
			'icon'   => 'heart',
			'text'   => 'Kosmos',
			'theme'  => 'purple-icon',
			'link'   => 'https://getkirby.com/kosmos'
		],
	]
],

If resolving that array correctly yourself is an issue, you can use the Kirby\Panel\Ui\Buttons\ViewButton class to create it:

use Kirby\Panel\Ui\Buttons\ViewButton;

$button = new ViewButton(
  icon: 'heart',
  text: 'Komos',
  theme: 'purple-icon',
  link: 'https://getkirby.com'
);

//...

'buttons' => [
  $button->render()
]
  1. That alone will still throw a bunch of console errors if you only pass the buttons prop. The Vue component also needs roles and users props.

The k-user-view component is not in the UI lab. It’s no basic UI element but a core element that you are overwriting. For these we do not have easy examples, but you will have to go to the source code: kirby/panel/src/components/Views/Users/UsersView.vue at v5/develop · getkirby/kirby · GitHub

@jonasfeige Or is your main aim to get the default button(s) back in your custom view?

If so, make sure to implement these lines kirby/config/areas/users/views.php at v5/develop · getkirby/kirby · GitHub in your custom view.

Thanks so much, Nico! It’s all working now.
Getting the default buttons back was the main goal, but I’m glad to learn some of the deeper workings for the future.

For the record, this is my full implementation now:



Kirby::plugin('my-plugin/users-view', [
    'areas' => [
        'users' => function () {

            return [
                'label' => 'Accounts',
                'icon' => 'users',
                'menu' => true,
                'link' => 'users',
                'views' => [
                    'users' => [
                        'pattern' => 'users',
                        'action' => function () {
                            $kirby = App::instance();
                            $role  = $kirby->request()->get('role');
                            $roles = A::sort($kirby->roles()->toArray(fn($role) => [
                                'id'    => $role->id(),
                                'title' => $role->title(),
                            ]), 'title', 'asc');
                            return [
                                'component' => 'k-users-view',
                                'props' => [
                                    'buttons' => fn() =>
                                    ViewButtons::view('users')
                                        ->defaults('create')
                                        ->bind(['role' => $role])
                                        ->render(),
                                    'role' => function () use ($kirby, $roles, $role) {
                                        if ($role) {
                                            return $roles[$role] ?? null;
                                        }
                                    },
                                    'roles' => array_values($roles),
                                    'users' => function () use ($kirby, $role) {
                                        $users = $kirby->users();

                                        if (empty($role) === false) {
                                            $users = $users->role($role);
                                        }

                                        $users = $users->sortBy('lastname', 'asc');

                                        $users = $users->paginate([
                                            'limit' => 20,
                                            'page'  => $kirby->request()->get('page')
                                        ]);

                                        return [
                                            'data' => $users->values(fn($user) => [
                                                'id'    => $user->id(),
                                                'image' => false,
                                                'info'  => Escape::html($user->email()) . ' [' . Escape::html($user->role()->title()) . ']',
                                                'link'  => $user->panel()->url(true),
                                                'text'  => mb_strtoupper(Escape::html($user->lastname())) . ', ' . Escape::html($user->firstname())
                                            ]),
                                            'pagination' => $users->pagination()->toArray()
                                        ];
                                    },
                                ]
                            ];
                        }
                    ]
                ]
            ];
        }
    ]
]);

@distantnative Not sure if this is already planned for v5, but maybe it would make sense to add a few words about the buttons (and getting back the defaults) in the docs here:

Sure but we will only add the info in the main docs once v5 is released.