UI options

This page will introduce you to the usage of UI options in your catalogue.

What are UI options?

By using UI options, you can add your own options to the default settings of a catalogue.

Structure

Every option needs to implement UIOptionContract.

  • namespace: \Plenty\Modules\Catalog\Contracts\UI

This enforces the following methods:

  • getKey():string: Returns the identifier.

  • getLabel():string: Returns the label. Should be translated, as this is visible in the UI.

  • getType():string: Returns the type. You can find the list of types below.

  • isVisible():bool: Returns the visibility. Boolean.

  • isRequired():bool: Returns a boolean to make the option mandatory or not.

  • getDefaultValue(): Returns the default value.

  • getValues():Values: Returns a value’s container which can contain instances of value.

How does it work?

The types that are currently supported are available via constants if you extend the base option class:

<?php

const TYPE_CHECKBOX = 'checkbox';
const TYPE_DATE = 'date';
const TYPE_NUMBER = 'number';
const TYPE_OPERATOR = 'operator';
const TYPE_SELECT = 'select';
const TYPE_TEXT = 'text';
const TYPE_TOGGLE = 'toggle';

Classes for this are located in Plenty\Modules\Catalog\Services\UI\Options\Elements.

Examples

Example 1: Creating a select UI option

Creating a select UI option
<?php

namespace Plenty\Modules\Catalog\Services\Converter\ResultConverters\Defaults\Options;

use Plenty\Modules\Catalog\Contracts\UI\UIValuesContract;
use Plenty\Modules\Catalog\Services\UI\Options\Elements\SelectUIOption;
use Plenty\Modules\Catalog\Services\UI\Options\Elements\Values\Elements\SelectValue;
use Plenty\Modules\Catalog\Services\UI\Options\Elements\Values\Values;

/**
 * Class DelimiterOption
 * @package Plenty\Modules\Catalog\Services\Converter\ResultConverters\Defaults\Options
 */
class DelimiterOption extends SelectUIOption
{

    protected $key = 'delimiter';
    protected $defaultValue = 'comma';

    /**
     * @inheritDoc
     */
    public function getLabel(): string
    {
        return trans('catalog::converters/options.delimiter');
    }

    /**
     * @inheritDoc
     */
    public function getValues(): UIValuesContract
    {
        $values = pluginApp(Values::class);

        $values
            ->add( (pluginApp(SelectValue::class) )->setCaption(trans('catalog::converters/options.comma'))->setValue('comma') )
            ->add( (pluginApp(SelectValue::class) )->setCaption(trans('catalog::converters/options.semicolon'))->setValue('semicolon') )
            ->add( (pluginApp(SelectValue::class) )->setCaption(trans('catalog::converters/options.pipe'))->setValue('pipe') )
            ->add( (pluginApp(SelectValue::class) )->setCaption(trans('catalog::converters/options.tab'))->setValue('tab') );

        return $values;
    }
}

Example 2: Creating a text UI option

Creating a text UI option
<?php

namespace Plenty\Modules\Catalog\Services\Converter\ResultConverters\Defaults\Options;

use Plenty\Modules\Catalog\Services\UI\Options\Elements\TextUIOption;

/**
 * Class XMLElementName
 * @package Plenty\Modules\Catalog\Services\Converter\ResultConverters\Defaults\Options
 */
class XMLElementName extends TextUIOption
{
    protected $key = 'elementName';
    protected $defaultValue = 'entity';

    public function getLabel(): string
    {
        return trans('catalog::converters/options.elementName');
    }
}

How to make it visible in the UI

Follow these steps to get the options visible in the UI:

  1. Go to your DataProvider class and locate/create a public method called getSettings().

  2. Create a new UIOptions container.

  3. Add your new options to the container.

  4. Make sure you return an array.

<?php

public function getSettings(): array
{
    $options = pluginApp(UIOptions::class);

    $options
        ->add( pluginApp(YourNewOptionHere::class) ) // this is the previously created class which extends an already provided example like SelectUIOption
        ->add( pluginApp(YourSecondNewOptionHere::class) );

    return $options->toArray();
}

Congratulations, you’re done!