How to extend CMS Pages with per site custom fields

Need Help
#1

Hi, I need to extend the CMS Page model with custom fields. I’ve been doing that using the backend.form.extendFields event in OC1. But in this case I’d like to have some custom properties that depend on the site (and not necesarily on the locale). I’d like to have some indication just to get started on the right direction.
I’ll really appretiate the help.
Thanks,

#2

Hi @federico.schafer

This link might help: Introducing CMS Editor Extensibility API - October CMS

2 Likes
#3

Hi, thanks. In fact I had read that and tried it. I have succesfully extended the cms pages with custom fields. But my issue starts when I need per locale or per site fields. I honestly couldn’t achieve that. I think adding a point in that article that tackles those needs would be much appretiated.

#4

The translate plugin solves this by adding a new tab for each locale. Here is an example:

Event::listen('cms.template.getTemplateToolbarSettingsButtons', function($extension, $dataHolder) {
    if ($dataHolder->templateType !== 'page') {
        return;
    }

    if (!LocaleModel::isAvailable()) {
        return;
    }

    $locales = LocaleModel::listAvailable();
    $defaultLocale = LocaleModel::getDefault()->code ?? null;

    $properties = [];
    foreach ($locales as $locale => $label) {
        if ($locale == $defaultLocale) {
            continue;
        }

        $properties[] = [
            'property' => 'localeUrl.'.$locale,
            'title' => 'cms::lang.editor.url',
            'tab' => $label,
            'type' => 'string',
        ];

        $properties[] = [
            'property' => 'localeTitle.'.$locale,
            'title' => 'cms::lang.editor.title',
            'tab' => $label,
            'type' => 'string',
        ];
    }

    $dataHolder->buttons[] = [
        'button' => 'Translate',
        'icon' => 'octo-icon-globe',
        'popupTitle' => 'Translate Page Properties',
        'properties' => $properties
    ];
});
1 Like
#5

Does it mean that this code is not anymore working in OC v3?

Event::listen('backend.form.extendFields', function ($widget) {

      if (!$widget->model instanceof \Cms\Classes\Page) {
        return;
      }
 if ($widget->isNested) {
        return;
      }

      $widget->addFields(
        [
          'settings[hero_bg_img]' => [
            'label' => 'Hero Background Image',
            'commentAbove' => 'Optional.',
            'span' => 'right',
            'tab' => 'voilaah.azalea::lang.editor.hero',
            'type' => 'mediafinder',
            'mode' => 'image'
          ],
    });
...
#6

Hey @chris

That code can be adapted to the new API, since it supports mediafinder too.

#7

thanks @daft

alright, I am trying this code coming from the demo plugin and I cant see anything in the editor page.
what I am missing? using OC v3.4.10

Event::listen('cms.template.extendTemplateSettingsFields', function ($extension, $dataHolder) {
            if ($dataHolder->templateType === 'page') {
                $dataHolder->settings[] = [
                    'property' => 'header_image',
                    'title' => 'Header Image',
                    'type' => 'mediafinder'
                ];
            }
        });

        Event::listen('cms.template.getTemplateToolbarSettingsButtons', function ($extension, $dataHolder) {
            if ($dataHolder->templateType === 'page') {
                $dataHolder->buttons[] = [
                    'button' => 'My Custom Button',
                    'icon' => 'octo-icon-text-emoticons',
                    'popupTitle' => 'My Custom Settings',
                    'useViewBag' => true,
                    'properties' => [
                        [
                            'property' => 'facebookPageUrl',
                            'title' => 'Facebook Page URL',
                            'type' => 'string'
                        ]
                    ]
                ];
            }
        });
    }

EDIT:
I had to migrate the project and now it is working fine, Awesome!

#8

HowIs there to grab the previous settings value done with the old way?

Is it by settings false the useViewBag ?

'useViewBag' => false,
``
1 Like
#9

Yes, I think that’s why this setting was included. For compatibility with the previous design.

1 Like
#10

Hi @daft and @chris!
I’d like to add the translatable custom fields to the already present Translate Button (created by translate plugin in the example), and not create a new one for basically also translations… I was able to do it for the settings button or a new one, but couldn’t achieve to extend that one. Do you know how I could do that?