Cockpit: How does Content Preview work?

Created on 19 Jun 2018 · 5Comments · Source: agentejo/cockpit

Hi there,

I've started checking out cockpit recently, looks great so far!

I'm trying to use the content preview of a collection following this example #649 but without luck.
I'm using VueJS for my frontend and I am attaching a listener on the mounted of the component but I don't get any data back.

The collection is "page" and I want to preview that based on the slug, my content preview url is set as "localhost:8080/page" for dev right now.

Any help/example would be much appreciated

cheers!

Source

tsimenis

Most helpful comment

I figured it out, right now. After reading this post on Stackoverflow, I got the basic concept of postMessage. Copy and paste from #649 didn't work. You have to replace data with message.

My setup is Xampp7 on Windows,
Backend: http://localhost/cockpit
Frontend: http://localhost/test
Test browsers: Opera 53, Firefox ESR 52.8.1 (64-Bit)

Preview url: http://localhost/test/preview.php

content of preview.php:

<!doctype html>
<html><head><meta charset="utf-8" /><title>Cockpit Preview</title></head><body>

<div id="preview">send something via postMessage</div>

<script>
var el = document.getElementById("preview");

window.addEventListener('message',function(event) {
  console.log('message received:  ',event);
  console.log('entry: ',event.data.entry);
  el.textContent = JSON.stringify(event.data.entry);
},false);
</script>
</body></html>

In this example, I replace the content of the preview div with a long json string.
Now you can create a proper preview page and replace all the content with the received data.

raffaelj on 23 Jun 2018

👍4

All 5 comments

I figured it out, right now. After reading this post on Stackoverflow, I got the basic concept of postMessage. Copy and paste from #649 didn't work. You have to replace data with message.

My setup is Xampp7 on Windows,
Backend: http://localhost/cockpit
Frontend: http://localhost/test
Test browsers: Opera 53, Firefox ESR 52.8.1 (64-Bit)

Preview url: http://localhost/test/preview.php

content of preview.php:

<!doctype html>
<html><head><meta charset="utf-8" /><title>Cockpit Preview</title></head><body>

<div id="preview">send something via postMessage</div>

<script>
var el = document.getElementById("preview");

window.addEventListener('message',function(event) {
  console.log('message received:  ',event);
  console.log('entry: ',event.data.entry);
  el.textContent = JSON.stringify(event.data.entry);
},false);
</script>
</body></html>

In this example, I replace the content of the preview div with a long json string.
Now you can create a proper preview page and replace all the content with the received data.

raffaelj on 23 Jun 2018

👍4

Thanks, works like a charm!

gjvanmastrigt on 27 Jun 2018

@raffaelj argh such a silly thing to miss, works as expected with the proper listener. thanks :)

tsimenis on 28 Jun 2018

Can you give me an example on how this works for React app?

gbalakrishnan-cx on 21 May 2020

👍1

Would be so helpful to have better documentation on how the preview works in the official cockpit documentation. I did get previews to work in a vue environment, but I set things up differently than @raffaelj. I have a cockpit backend and a vue-cli frontend setup that are completely separate. In the frontend I made a new route, /preview, using the vue router (src/router/index.js). I set the value of the Preview URL in cockpit to "my-url.com/preview". When that route is accessed, it listens for data from the 'message' event, rather than getting it from the API.

In src/assets/components/Podcast.vue:

mounted () {
    if (this.$route.name === 'SingleEpisodePreview') {
      //previews
      let that = this
      window.addEventListener('message',function(event) {
        that.data = []
        that.data.push(event.data.entry)
        that.activeIndex = 0
      }, false);
    } else {
      this.getData()
    }
  }

Hope that helps anyone with a similar case. (The site I'm building is https://supernovapodcast.art/).