Component ObjectList

Just wanted to share a recent problem I had with the objectList type and how it is used. I had my defineProperties function configured as follows:

public function defineProperties()
    {
        return [
            'services' => [
                'title' => 'Services',
                'description' => 'Service provided from Lantos Electric',
                'type' => 'objectList',
                'titleProperty' => 'title',
                'itemProperties' => [
                    'title' => [
                        'title' => 'Title',
                        'description' => 'The title to use',
                        'type' => 'string',
                    ],
                    'content' => [
                        'title' => 'Content',
                        'description' => 'The information to be displayed',
                        'type' => 'text',
                    ],
                    'link' => [
                        'title' => 'Link',
                        'description' => 'The link to use when clicked',
                        'type' => 'string',
                    ],
                    'icon' => [
                        'title' => 'Font Awesome Icon',
                        'description' => 'The font awesome icon to use',
                        'type' => 'string',
                        'default' => 'fa-3x fa-solid fa-phone-volume',
                    ],
                ]
            ]
        ];
    }

When clicking the “add” button of the inspector popup window however, it was giving the error: properties.sort is not a function. Changing things around as done here is what fixed it right up (Note that there is no “key” field anymore like ‘content’ => or ‘link’ => …

public function defineProperties()
    {
        return [
            'services' => [
                'title'             => 'Service',
                'type'              => 'objectList',
                'titleProperty'     => 'name',
                'itemProperties'    => [
                    [
                        'property'  => 'name',
                        'title'     => 'Service Name',
                        'description' => 'The name of the service',
                        'type'      => 'string',
                    ],
                    [
                        'property' => 'content',
                        'title' => 'Content',
                        'description' => 'The information to be displayed',
                        'type' => 'text',
                    ],
                    [
                        'property' => 'link',
                        'title' => 'Link',
                        'description' => 'The link to use when clicked',
                        'type' => 'string',
                    ],
                    [
                        'property' => 'icon',
                        'title' => 'Font Awesome Icon',
                        'description' => 'The font awesome icon to use',
                        'type' => 'string',
                        'default' => 'fa-3x fa-solid fa-phone-volume',
                    ],
                ],
            ],
        ];
    }

Hope this helps!

1 Like

Heads up, we fixed this inconsistency in the latest patch. Thanks for finding it!