Problem/Motivation

To improve a developer experience and speed up development it would be nice to have a preview of API output. The preview could be done on the field/formatter level or the whole ce-display in a similar way that views module provides a preview.

Proposed resolution

There are already methods on the entity to generate fake data, which were added for layout-builder-previews, so that could be used + generate a preview output of an entity.

Remaining tasks

Needs more detailed concept.

Issue fork custom_elements-3533135

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

useernamee created an issue. See original summary.

useernamee opened merge request !133

useernamee’s picture

useernamee commented

We have a custom elements preview service that generates preview custom elements per field. The main method gets arguments - custom ce display and field name, and optional arguments formatter, formatter options and entity. if formatter is not provided then it is deduced from the ce display. If entity is set, than that entity is used for preview instead of generating sample data. This is also covered by kernel test.

One additional thing that could also be added is to generate preview of the whole entity not just one field. This can always be added if need for it arises but for now I was only thinking about per field preview use case.

Further plan is to add preview in the custom elements ui form. But I'm not sure yet where to output that data. Idea is to have changing the output dynamically on each change of the formatter or its settings. Each field could have a preview shown in a row for their field formatter or another option is to have a whole entity previewed in a tab bellow Custom elements display options.

fago’s picture

fago
Primary language German
Location Vienna
commented
Status: Active » Needs work

Thanks! Here my thoughts:

  • First off, I think we must be careful with naming of classes here to clarify what kind of preview we are talking about. At #3542938: Add API to preview custom elements in Drupal I'd like to introduce $custom_element->preview() for being to render the custom-elment with JS in the drupal UI. So this is, more a preview of "entity-ce-display config" right
  • Then, how would you envision the UI for that? I think that is important to clarify everything else. Imo, it would go on the "Manage CE" screen, e.g. have a preview-area in the bottom, similar like Views does it?
  • Last, I'd was thinking of this as entity-level preview, not field level. E.g. use the pre-existing API to generate preview/test-data of entity field items (as done by layout builder).
useernamee’s picture

useernamee commented

Added:
- another fallback using FieldItemInterface::generateSampleValue. I was lazy and added it at last place, but I'm considering moving it up the order
- per-entity preview (also includes fallbacks)
- added preview section to the manage custom element form in custom_elements_ui submodule. Currently it is not refreshed with ajax and it is always returning markup. Consider adding json preview as well (as a selection).

fago’s picture

fago
Primary language German
Location Vienna
commented

I think this can be much simplified by being based solely on the preview-API which already landed in 3.x + existing render logic + existing sample-values of core. It seems like all we should have to add is some glue-code and UI on top?

useernamee’s picture

useernamee commented

I removed the ce display preview service for now but at some point we might want to implement it back as it had helpful methods which are now part of the ce display form.

I also added a test for the form, but it needs more improvements. Added test improvements.

useernamee’s picture

useernamee commented
Status: Needs work » Needs review
fago’s picture

fago
Primary language German
Location Vienna
commented
Status: Needs review » Needs work

Thank you, much better! I did another review and left a couple of remarks at the PR.

useernamee’s picture

useernamee commented
Assigned: Unassigned » fago
Status: Needs work » Needs review
fago’s picture

fago
Primary language German
Location Vienna
commented

MR looks all good now, thanks! Taking a test drive now..

fago’s picture

fago
Primary language German
Location Vienna
commented
Assigned: fago » Unassigned
Status: Needs review » Needs work

Running it some issue when testing this on an article content type with a tags field.

Manage custom element dies, with exception:

The website encountered an unexpected error. Try again later.

Drupal\Core\Entity\EntityMalformedException: The "taxonomy_term" entity cannot have a URI as it does not have an ID in Drupal\Core\Entity\EntityBase->toUrl() (line 177 of core/lib/Drupal/Core/Entity/EntityBase.php).

Drupal\custom_elements\Processor\DefaultFieldItemProcessor->addtoElement() (Line: 327)
Drupal\custom_elements\CustomElementGenerator->process() (Line: 71)
Drupal\custom_elements\Processor\DefaultFieldItemListProcessor->addtoElement() (Line: 327)
Drupal\custom_elements\CustomElementGenerator->process() (Line: 59)
Drupal\custom_elements\Plugin\CustomElementsFieldFormatter\AutoCeFieldFormatter->build() (Line: 302)
Drupal\custom_elements\CustomElementGenerator->buildEntityComponentFields() (Line: 262)
Drupal\custom_elements\CustomElementGenerator->buildEntityContent() (Line: 205)
Drupal\custom_elements\CustomElementGenerator->generateMultiple() (Line: 178)
Drupal\custom_elements\CustomElementGenerator->generate() (Line: 1232)
Drupal\custom_elements_ui\Form\EntityCustomElementsDisplayEditForm->buildPreview() (Line: 443)
Drupal\custom_elements_ui\Form\EntityCustomElementsDisplayEditForm->form() (Line: 107)
Drupal\Core\Entity\EntityForm->buildForm()

The exception is NOT catched, so it fatals out.
Seems like just cathing RunTimeException wasn't a good idea, sry for that. Should explicitely catch EntityMalFormedExceptions or there others that we need to catch also?

Testing it on a simple page content type, I don't get it to work. The Preview field-set is there, but it's empty always?

useernamee’s picture

useernamee commented

I've added some fixes for articles for this exact case. I'll try to expand it to other entities as well.

Needs review.

useernamee’s picture

useernamee commented
Assigned: Unassigned » fago
Status: Needs work » Needs review

  • fago committed c9e731a5 on 3.x authored by useernamee 
    [#3533135] feat: Add preview of a custom elements entity display to UI...
fago’s picture

fago
Primary language German
Location Vienna
commented
Status: Needs review » Fixed

great, that works well!

The preview is empty for me when using nuxt-previewer, so there is some issue with that. But that should a separate issue. Done then!

Merged!

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.