Authoring viewport (layout view) issue

[AD-Engineer]

AEM Viewports in layout view are broken on authoring instances and when authors interact with the different viewports, no change is presented on the screen and various JS errors are thrown in the browser console.

 

[HrishikeshKa]

Hi @AD-Engineer ,

It sounds like you're experiencing a specific issue in Adobe Experience Manager (AEM) where the authoring viewports in the layout view are not functioning correctly, leading to JavaScript errors. To address this, we can take the following steps:

1. Check JavaScript Errors

First, let's identify the exact JavaScript errors being thrown in the browser console. These errors can provide clues about what might be causing the viewport issue. Please follow these steps:

1. Open Developer Tools:

   • In your browser, right-click on the page and select "Inspect" or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac).
   • Go to the "Console" tab to see the list of JavaScript errors.

2. Identify Errors:

   • Look for any errors related to AEM, viewports, or any specific scripts or libraries.

2. Common Fixes for JavaScript Errors in AEM

Based on common issues that can cause viewport problems in AEM, consider the following steps:

2.1. Check Client Libraries

Ensure that all necessary client libraries are properly loaded. If there are missing or incorrect client libraries, it can cause JavaScript errors.

• Verify that the required client libraries are included in your page.
• Ensure there are no conflicts or missing dependencies.

2.2. Clear Cache

Sometimes, cached versions of JavaScript files can cause issues.

• Clear your browser cache and AEM cache:
  • In AEM, go to http://<your-instance>:<port>/system/console/bundles and refresh the bundles.
  • In your browser, clear the cache or open an incognito window to test.

2.3. Check Custom JavaScript

If you have custom JavaScript code, ensure that it does not conflict with AEM's functionality.

• Disable custom scripts temporarily to see if the issue persists.
• Review the custom code for any errors or conflicts.

3. Debugging Steps

3.1. Review Console Errors

Paste the JavaScript console errors here so that we can analyze them. Typical errors might include:

• Missing scripts or styles.
• Function not defined.
• Reference errors.

3.2. Check AEM Logs

Check the AEM error logs for any server-side errors that might be related to the viewport functionality.

• Go to http://<your-instance>:<port>/system/console/status-slinglogs.
• Check the error.log and other relevant logs for errors.

3.3. Update AEM and Packages

Ensure that your AEM instance and all associated packages are up to date.

• Check for any available updates for AEM and install them if necessary.

4. Provide Screenshot and Detailed Error Logs

Please provide the screenshot (Screen Shot 2024-06-09 at 18.17.25.png) and detailed error logs for a more accurate diagnosis.

Example Steps in AEM:

Verify Client Libraries

<!-- Ensure that client libraries are properly included -->
<cq:includeClientLib categories="your-clientlib-category"/>

Clear Cache

# Clear AEM dispatcher cache
cd /path/to/dispatcher/cache
rm -rf *

# Clear browser cache
# (Do this from browser settings or open in Incognito mode)

Final Steps

1. Provide the exact JavaScript console errors.
2. Upload the screenshot for visual context.
3. Check the client libraries and custom scripts.
4. Review and update AEM packages if necessary.

These steps should help you identify and fix the viewport issues in AEM. If you can provide more details, I can offer more specific guidance.

[AD-Engineer]

Hey @HrishikeshKa thanks for your reply. i have provided a screenshot on the question. It works on prod, and on some local instances. But not on dev and stage. It seems like a package issue. Just not sure which one.

[EstebanBustamante]

Hi, 

The issue is clearly that some js is not functioning correctly, this could be either you are missing a configuration or missing content. The best thing to do is to check what things could be missing from your Layout Responsive configuration, check the following things:

- You have the clientlib which exposes the breakpoints

- You have correctly setup the cq:deviceGroups in your template (although this could be set in your root page as well)

- The cq:deviceGroups points to a emulators which actually exists

Usually, you will require all the steps described here for this to work properly here: https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/developing/responsive-brea....

Hope this helps

[AD-Engineer]

There are env for that this is working. What kind of packages we should get to fix this? I mean it works on stage but not on dev. what should we get from stage to upload on dev that would be the cause of this issue?

[EstebanBustamante]

Why do you assume that there is only a missing package? As I mentioned earlier, there could be more issues at play, such as configuration problems or even differences in the code itself. Please check the official documentation that lists all the prerequisites for this feature to work: https://experienceleague.adobe.com/en/docs/experience-manager-65/content/sites/administering/operati....

However, based on your screenshot, it appears that some JS/CSS files might be missing. Please verify whether the client libraries that export your responsive grid layout are correctly placed on the page where you are encountering the issue.

[kautuk_sahni]

@AD-Engineer Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[AD-Engineer]

No, the issue was not fixed.