如何在AEM 6.1的DAM页面加载时触发弹窗提示？

Hey there! Let’s work through this requirement of yours—getting a guidance popup to show as soon as an author navigates to the Assets (DAM) console in AEM 6.1. You’re right that cq.authoring.dialog only targets dialog editing scenarios, so we need a tailored approach for the Assets page specifically. Here’s how to make this happen:

Step 1: Use the Right Client Library Category #

First, you need to attach your JavaScript to the Assets console’s clientlib context instead of dialogs. Create a new clientlib (or update an existing one) with the category cq.authoring.assets. This ensures your code loads only when the author is on the Assets page, not other editing screens.

• In CRXDE, create a clientlib folder (e.g., dam-guidance-clientlib)
• Set its categories property to cq.authoring.assets
• Add your JavaScript file to the clientlib’s js directory and reference it in js.txt

Step 2: Listen for the Assets Page Load Event #

AEM’s Granite UI uses event-driven loading, so we can’t just run code on initial page load—we need to wait for the Assets console to finish initializing. Use these events to trigger your popup:

Option 1: Generic Content Load Event #

Listen for foundation-contentloaded, which fires when the page’s dynamic content is fully loaded. We’ll also add a check to ensure we’re only on the Assets page:

$(document).on('foundation-contentloaded', function() {
    // Verify we're on the Assets console
    const currentUrl = window.location.pathname;
    if (currentUrl.includes('/assets.html')) {
        // Trigger your popup here
        renderGuidancePopup();
    }
});

function renderGuidancePopup() {
    // Use AEM's built-in Granite Dialog for consistent styling
    const guidanceDialog = new Granite.ui.Dialog({
        title: 'DAM Usage Guidelines',
        width: 600,
        content: `
            <div class="coral-Well">
                <h3>Quick Tips for Managing Assets</h3>
                <ul class="coral-List">
                    <li>Use descriptive filenames for easy searchability</li>
                    <li>Tag assets with relevant keywords</li>
                    <li>Compress large images before uploading</li>
                </ul>
            </div>
        `,
        buttons: [{
            text: 'Got it, thanks!',
            handler: function() {
                this.hide();
            }
        }]
    });
    guidanceDialog.show();
}

Option 2: Assets-Specific Ready Event #

For more precision, use the assetconsole-ready event—this fires specifically when the Assets console’s core components are initialized:

$(document).on('assetconsole-ready', function() {
    renderGuidancePopup();
});

Step 3: Accessing the DAM DOM Safely #

Since the Assets console loads dynamically, always access DOM elements inside the event callback (never on initial page load). For example, if you need to target the asset list container:

function renderGuidancePopup() {
    // Wait for the asset list to exist before interacting
    const assetList = $('.asset-list-container');
    if (assetList.length) {
        // Do something with the asset list DOM element
        console.log('Asset list loaded:', assetList);
    }
    // ... rest of popup code
}

Step 4: Test and Validate #

• Clear your browser cache and reload the Assets page to ensure the clientlib loads
• Use your browser’s DevTools to:
  • Check if your clientlib is listed in the loaded resources
  • Verify no JavaScript errors appear in the console
  • Confirm the popup triggers when you navigate to /assets.html

内容的提问来源于stack exchange，提问作者anele