Plugin Language Select Field

Kirby 3 Solved ✅
1

Hallo,
I’m trying to generate a language select field (on panel side) but I’m getting a "Cannot read properties of undefined (reading ‘forEach’) for the following code:

<?php
use Kirby\Cms\Languages;

return [
    'language' => [
        'label' => 'Select a language',
        'type'  => 'select',
        'option' => [
            'type' => 'query',
            'query' => Languages::load(),
        ]
    ],
];

I’m missing something here…

2

Hi there, I’m a bit at a loss what you are doing there? Is that supposed to be a field blueprint defined via a plugin? Please provide more context if what follows doesn’t solve your problem.

Having said that, the property is called options (plural) not option, which might be the problem here.

3

Thanks for answering a Saturday.

I’m loos too (learning Kirby and Vuejs at the same time).

The simplest way I found to explain what I’m trying to do is:

populate a “languages select box” (for all configured kirby languages) inside /dialogs/fields.php in the Extended products area demo code that is part of the cookbook Advanced Panel area.

By the way, is there a way to add pagination to the results of src/components/Products.vue… I’ve tried several option found on the web but without luck. I’m stuck with the loading of external components like this one: HENNGE/vue3-pagination (github.com).

Thank you in advance for your patience and help.

4

Are you using Kirby 3.8 already?

Something in this direction should work

'options' => [
    'type' => 'query',
    'query' => 'kirby.languages',
    'value' => '{{ item.code }}',
    'text' => '{{ item.name }}'
]
5

Yes I’m using 3.8 :slight_smile: downloaded kirby :heart: two days ago and I’m playing around :sweat_smile:

Still getting:

Cannot read properties of undefined (reading ‘forEach’)

a hint for pagination inside vue panel files?

6

The property is still called options for all I know, but I just tried @distantnative’s example (replacing option with options) and getting this.options.forEach is not a function

1 Like
7

May I have found a bug in v3.8?

8

No, I just didn’t realise that those programmatic fields in dialogs probably don’t run again through a blueprint interpreter. So we actually have to provide all the options programmatically directly.

Does this work?

'options' => kirby()->languages()->toArray(fn ($language) => [
    'value' => $language->code(),
    'text' => $language->name()
])

(Hope you are on PHP 8, otherwise is needs to be full function () { return [] }.)

9

We need to get the values, then it will work:

'options' => array_values(kirby()->languages()->toArray(fn($lang) => ['value' => $lang->code(), 'text' => $lang->name()]))
10

php 8.1.2 and getting same result as @texnixe :

this.options.forEach is not a function

11

Then we can use $languages->values() | Kirby CMS

'options' => kirby()->languages()->values(fn($lang) => [
    'value' => $lang->code(),
    'text' => $lang->name()
])
1 Like
12

Yes! That was it! It now works seamlessly :partying_face:
Thank you so much @distantnative & @texnixe

PS: do I need do fill a new topic for the pagination?

13

Re. pagination: Yes, pagination is in general possible (take a look at the source code for the users view

-kirby/panel/src/components/Views/UsersView.vue

  • kirby/config/areas/users/views.php

However, this uses a users collection which can be paginated (in the PHP part) and a k-collection component which has a pagination property). I think the current implementation in the recipe would need some changes to make this work, or at least I don’t know how to implement it into the table.