Flex Objects

Add Flex Types to your Plugin

In order to add Flex types, you must subscribe to FlexRegisterEvent.

// use Grav\Events\FlexRegisterEvent;

    public static function getSubscribedEvents(): array
    {
        return [
            'onPluginsInitialized' => ['onPluginsInitialized', 0],
            FlexRegisterEvent::class => ['onRegisterFlex', 0],
        ];
    }

Use the addDirectoryType(directory_type, blueprint_path) function to add as many Flex directories as you want.

    /**
     * @param FlexRegisterEvent $event
     * @return void
     */
    public function onRegisterFlex(FlexRegisterEvent $event): void
    {
        /** @var Flex */
        $flex = $event->flex;

        $name = "YOUR_FLEX_NAME";
        $directory = $flex->getDirectory($name);

        if (!$directory || !$directory->isEnabled()) {
            $flex->addDirectoryType("$name", "plugins://YOUR_PLUGIN_NAME/blueprints/flex-objects/$name.yaml");
        }
    }

The last thing to do is add the Flex blueprint to the registered path. You normally want to register /user/plugins/YOUR_PLUGIN_NAME/blueprints/flex-objects/YOUR_FLEX_NAME.yaml.

Check more about custom blueprints on Custom Directory Types.

Add configurations to a Flex Directory

You can add configurations by setting the blueprint property on your Flex Directory.

title: My Flex Object
description: Flex Object Directory
type: flex-objects  # do not change

# Flex Configuration
config: {}

# Flex Directory Forms
blueprints: {}

# Flex Object Form
form: {}

blueprints:
  configure:
    fields: # Put your tabs here
      new_tab: 
        type: tab
        title: New Tab
        fields:
          # ...

Add custom templates

You can overwrite the default templates of your flex objects by creating a layouts and types folders. On the types folder you must create the templates of the CRUD operations views you want to replace.

/your-plugin
    └── /admin
        └── /themes
            └─── /grav
                └─── /templates
                    └─── /flex-objects
                        ├─── /layouts
                        └─── /types
                            └─── /your-flex-name
                                ├─── /list.html.twig
                                ├─── /edit.html.twig
                                ├─── /list.html.twig
                                └─── /preview.html.twig

Example of list.html.twig:

{% extends 'flex-objects/types/default/list.html.twig' %}
{% use 'flex-objects/types/default/titlebar/list.html.twig' %}

{# The top buttons #}
{% block configure %}
    {{ parent() }}
    {# Custom buttons #}
{% endblock %}

{% block content %}
    {% if allowed %}
        {# Show objects #}
    {% else %}
        {# Send an error #}
    {% endif %}
{% endblock %}

You can check more on the Flex Objects Github repository.

To finish you must register the admin templates path.