Allow defining inlineAttributeInputHtml and attributeHtml from BaseNativeField

[ryansupercool]

We make heavy use of custom native field layout elements in a custom plugin i.e. extending BaseNativeField. It would be great if you could define within that class the attributeHtml i.e. the preview in element tables, and also inlineAttributeInputHtml.

You can already define the card preview html via BaseNativeField::previewHtml and BaseNativeField::previewPlaceholderHtml.

Currently we have a custom implementation to achieve this but would be nice if Craft did this by default - unless we've missed something?

Within the element classes we have this to set the table preview HTML which calls the same previewHtml as used in cards:

protected function attributeHtml(string $attribute): string
{

  $fieldLayout = $this->getFieldLayout();

  if ($fieldLayout && $fieldLayout->isFieldIncluded($attribute)) {
    $field = $fieldLayout->getField($attribute);

    if ($field->previewable()) {
      return $field->previewHtml($this);
    }
  }

  return parent::attributeHtml($attribute);
}

For the inline inputs we have this in the element class:

protected function inlineAttributeInputHtml(string $attribute): string
{
  $fieldLayout = $this->getFieldLayout();

  if ($fieldLayout && $fieldLayout->isFieldIncluded($attribute)) {
    $field = $fieldLayout->getField($attribute);

    if (method_exists($field, 'getInlineInputHtml')) {
      return $field->getInlineInputHtml($this);
    }
  }

  return parent::inlineAttributeInputHtml($attribute);
}

Followed by this in the field layout elements to expose the inputHtml

public function getInlineInputHtml(?ElementInterface $element = null): ?string
{
  return $this->inputHtml($element);
}

This is a little different to how its handled in CustomFields where inputHtml supports inline but we're limited in what we can do without extending BaseNativeField itself.

Thanks!

[brandonkelly]

You can customize an attribute’s HTML via Element::EVENT_DEFINE_ATTRIBUTE_HTML:

use craft\base\Element;
use craft\base\Event;
use craft\events\DefineAttributeHtmlEvent;

Event::on(Element::class, Element::EVENT_DEFINE_ATTRIBUTE_HTML, function (DefineAttributeHtmlEvent $event) {
    if ($event->attribute === 'myAttribute') {
        $event->html = '...';
    }
});

And you can override its inline HTML using Element::EVENT_DEFINE_INLINE_ATTRIBUTE_INPUT_HTML.

[ryansupercool]

Thanks, this is a lot cleaner/self contained. It would still be nice to get BaseNativeField::attributeHtml and BaseNativeField::inlineInputHtml at some point but this solution if nicer than what we have. Thanks again.

For completeness we've implemented this as a Trait that we are now using in all of our field layout elements that extend BaseNativeField. For any other attributes in our custom elements, we are still using the Element::atrributeHtml methods etc.

/**
 * @mixin BaseNativeField
 */
trait AttributeHtml
{
	/**
	 * @inheritdoc
	 */
	public function init(): void
	{
		Event::on(
			Element::class,
			Element::EVENT_DEFINE_ATTRIBUTE_HTML,
			function (DefineAttributeHtmlEvent $event) {
				if ($event->attribute !== $this->attribute) {
					return;
				}

				$event->html = $this->previewHtml($event->sender);
			}
		);

		Event::on(
			Element::class,
			Element::EVENT_DEFINE_INLINE_ATTRIBUTE_INPUT_HTML,
			function (DefineAttributeHtmlEvent $event) {
				if ($event->attribute !== $this->attribute) {
					return;
				}

				$event->html = '...';
			}
		);
	}
}

class OurField extends BaseNativeField
{
	use AttributeHtml;
}