How to enable the new "Responsive preview modes" in 3.3

Using Neos & Flow
1

Hi,

I saw some vids of this years conference. Now I’m keen to try the new Responsive preview modes.
What has to be done to enable them?

Regards
Klaus

2

Hi Klaus,

if you use the new UI, you can simply define it in the Settings. yaml. You can find an example here:

Best regards,
Michael

3

Would like to use «Responsive preview mode» too.
Have commented out line 11 to 14. Seams to work: Configuration>Settings
userInterface-editPreviewModes
with 300 x 600.

In the backend I tried the rawContent (Roh-Ansicht) and all others, but there is no changing in Preview? Do I have to enable it somewhere else or do I have done something wrong?

Raw-Content
Raw-Content.png764×148 10.7 KB

4

Something is still fishy here:

First I’ve got it running with the following conf:

......
      editPreviewModes:
        mobileXs:
          isEditingMode: false
          isPreviewMode: true
          fusionRenderingPath: ''
          title: 'Mobile'
          #position: 200
          width: 360px
          height: 640px

The name rawContent is in use, so I used mobileXs.
Got a new Button “Mobile”. The small view is working.
But strange: I could edit. I did it and published it. Everything else seems to work fine.
So, I added another mode to my conf (portait + landscape):

......
      editPreviewModes:
      mobileXs:
        isEditingMode: false
        isPreviewMode: true
        fusionRenderingPath: ''
        title: 'xs 360'
        #position: 200
        width: 360px
        height: 640px
      mobileSm:
       isEditingMode: false
        isPreviewMode: true
        fusionRenderingPath: ''
        title: 'sm 640'
        #position: 200
        width: 640px
        height: 360px

But now everything is spoiled! - Got a blank page in the backend.
I took away the second change, flushed caches, but the backend is still broken.
Even after turning back to the original settings (NeosDemo) the backend is a white page.

I have to reinstall the demo page again.

Page source (only the body, its too big):

    <body>
        <div id="appContainer" data-csrf-token="20e27dd31aea66e19cab0fe677a03459" data-first-tab="" data-env="Development">
        </div>
    </body>
</html>

So, be careful!

Regards
Klaus

5

Thank you @energyWinner,
will wait until there is some more stable version/information how to do.

6

I can confirm this. After adding the second config, i’ve added one for tablet and one for mobile, my neos installation is broken. First i get a 502, after resetting all additonal configs and cache flush my backend is “white”, too. In the browser console, javascript errors from host.js. “TypeError: Cannot read property ‘isEditingMode’ of undefined”

7

@energyWinner, don’t know if that helps, but I think the “isEditingMode” below “mobileSm” is missing one space-indention in your yaml.

Did not test anything yet, I watch this post because I am planning to test this feature too.

8

It’s a problem with the user profile or workspace? After deleting my user and recreate, all is fine again.

9

No every thing is fine.
If you have an indention error in yaml yo’ll get a neat exeption.

10

Now your system is working only with change the space?

Have the same problem with white-dead-of-neos altought I reset the settings.yaml, delete the Temporary-Folder, rescan the packages, flush cache, delete and publish resource.
With a different user all works fine, but the particular user seams to be demaged.

On your system the white-death-of-neos is gone only by change the space-idention?

11

No. There were some typos in my post, which led to a missunderstanding.
What I wanted to say is:

  1. The problem is not the yaml file. With the original settings.yaml the backend is still broken.
  2. Try for yourself: add or delete a SPACE in a yaml file and Neos/Flow thrwos an exeption. So, a miss interpretation due to indention issues of a yaml file is notpossible. The execution stops.

But a question back:
Can you work in the backend with another user?
Bad luck, I’ve only one.

Klaus

12

You can create a new user with the flow-command on cli.

13

Answer:
Yes, I could continue working with antother user (only editor rule unfortunatelly).
But the system became unstable. repair, or resource publish get’s errors…
Bad luck too, I had to rebuild the system from backup. :triumph:

14

@energyWinner: Have ask in «slack» for a solution/bugfix.
If your system is still demaged maybe your DB-entries would help to find the reason.
Unfortunately I have played back my system from backup. So no entries to look for. And do it again will broke maybe something important with no-way-back.
In neos-demo I can’t replay the damage.

@christianm asked my for:
can you check neos_neos_domain_model_userpreferences in the DB?
would like to see the entry for the broken user?

Maybe you could look in your db for the users entry? Or maybe @kathleen.peschke?

15

Ok, that’s really crazy. Can’t reproduce it.

Half an hour testing with different procedures, no crash. Only after remove one of two cofigurations, user with removed setting in DB get a blank/white page. But adding it again, all is fine.

Sry :frowning: