Custom APi for Preview functionality

Support
1

Hello everyone,
I created my custom bees with cockpit by inserting the bees folder in the config folder.

I am trying to use the preview feature, and I have returned the json of my entry collection.

I noticed that it shows the classic one and not the one created by me.

Is there a way to also customize the response API of the preview function?

Thanks

2

Hi,
@pauloamgomes sorry if I tag you, I wanted to ask if there is a solution for this question of mine.

Thanks for the support in advance

3

Not sure what you mean or your need…

The preview functionality is handled in modules/Collections/assets/collection-entrypreview.tag , basically Cockpit will include in an iframe a target url and send the entry json to that iframe using postMessage command (check the updateIframe() definition on that file).

If you need to customize/override the preview url you can use https://github.com/pauloamgomes/CockpitCMS-Helpers#content-preview-url-override

4

@pauloamgomes
Let me explain better, I created my own collection of projects.

I exhibited my own custom bee for projects that has a certain structure.

{site_url}/api/project

I ask if it is possible to use the same structure of my api / project for the preview function.

At the moment preview gives me the json equal to

{site_url}/api/collections/get/project

I hope I have written more clearly

5

@raffaelj, @pauloamgomes

is there a solution for this?
I really need it

6

Not sure if we are talking on the same Preview functionality, the Cockpit preview will call an URL (your frontend application) that you define and it will run the result of that URL in an iframe passing the entry data via a post message call.

7

Yes I know that.
I would like to send the custom API to the page that I defined in the preview URL.

I created my frontend in Nuxt and based all the components on my modified bees.

Now I would like to create a Preview page to be put as url for the cockpit preview function but I would not want to rewrite all the components.

Now I get the standard cockpit json and not mine

8

@alessandro92 I’m sorry, but I don’t understand your question.

What are bees? I guess, you mean rest api endpoints.

What is your actual goal? Are you trying to use the content preview feature for a single collection entry while logged in the admin ui? If so, here is a short explanation, how to use it:

If not, try to explain, what you mean with “preview” and what you expect to see when you call your custom api endpoint /api/preject.

edit: We wrote at the same time. After reading your post from a minute ago, I understand your problem. Let me think about it…

9

You could modify the entrypreview component. It should work with copy/pasting it to /config/tags/entrypreview.tag, but I didn’t test it. Than change the updateIframe function so it sends the data in a format you need. But you still have to listen to the postMessage on your frontend side. If the entry preview component will be updated in the future, you will miss it, because of your outdated, modified one. I don’t recommend this idea.

The better option: Transform the data to your needs in your frontend and then update the page.

window.addEventListener('message', function(event) {

    var entry = event.data.entry;
    
    // modify entry to your needs
    
    // update your page with modified data
    
    // optional: Do the modification server side, send the event data to a custom cockpit
    // api endpoint and return the data in a format, you like

}, false);

And don’t forget, that it is a live update, that works without saving the entry. This is why it uses the iframe postMessage method.

1 Like
10

Thank you.
Tomorrow I see the solutions and do some tests.

It was convenient to do the live preview feature so that the response could be overridden.

Just like you do for custom endpoints in config/api