Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

HIDE component in local and author

Avatar

Level 2

As a supplement to the design document, please do
not display it in the Author environment (editor, view as published screens), but operate only in the Publish environment .

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

 

@ferosekhan 

Can you replace with below in your sightly .

<div data-sly-test="${runMode.hasRunMode }">

 

 

Thanks,
Siva

View solution in original post

11 Replies

Avatar

Community Advisor

Hi @ferosekhan ,

 

You can setup run mode configurations for your component, and fetch that logic in HTL to check whether you would like to have it displayed or not.

eg. for run modes - https://www.techinnovia.com/run-modes/

 

Hope that helps you!

Regards,

Santosh

Avatar

Community Advisor

You can do this by detecting AEM runmode

If publish show otherwise hide

https://sourcedcode.com/blog/aem/checking-run-mode-from-sightly-htl-in-aem 



Arun Patidar

Avatar

Level 3

@arunpatidar is there a way we can use runmodes in cq:component node on property component group in case I want to have different groups on different envs say i want to .hidden on PROD? 

Avatar

Community Advisor

Hi,

It is not possible , however you can hide the dialog's content root node using rendercondition.



Arun Patidar

Avatar

Community Advisor

@ferosekhan 

It can be done by fetching runmode from AEM instance. you can hide the component afterwards.

TO fetch the runmode, please refer below thread 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/detect-instance-runmode-pr...

I hope it helps.

Avatar

Community Advisor

@ferosekhan :

 

You can add a new field in your dialog as runmode and you can input as publish. 

 

Then in your sightly you an call as ,

 

<sly data-sly-use.runMode= "com.sourcedcode.core.models.utils.RunModeHelper ;">

 

<div data-sly-test="${runMode.getHasRunMode}">

// you can write your component logic here.

</div>

 

 

package com.sourcedcode.core.models.utils;

import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Default;
import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.OSGiService;
import org.apache.sling.models.annotations.injectorspecific.RequestAttribute;
import org.apache.sling.settings.SlingSettingsService;

import javax.annotation.PostConstruct;

@Model(adaptables = SlingHttpServletRequest.class)
public class RunModeHelper {

@OSGiService
private SlingSettingsService slingSettingsService;

@RequestAttribute
@Default(values = "null")
private String runmode;

private boolean hasRunMode = false;

@PostConstruct
public void init() {
String runModes = slingSettingsService.getRunModes().toString();
hasRunMode = runModes.contains(runmode);
}

public boolean getHasRunMode() {
return hasRunMode;
}
}

 

source : https://sourcedcode.com/blog/aem/checking-run-mode-from-sightly-htl-in-aem

 

Thanks,

Siva

 

Thanks,
Siva

Avatar

Level 2

 code working good but publish environment also not showing!

 

Avatar

Correct answer by
Community Advisor

 

@ferosekhan 

Can you replace with below in your sightly .

<div data-sly-test="${runMode.hasRunMode }">

 

 

Thanks,
Siva

Avatar

Community Advisor

@ferosekhan You just need to get the runmode and use data-sly-test to match it using a variable isRunModePublish.

You can find your run modes in: http://localhost:4502/system/console/status-slingsettings

 

Using Java:

slingSettingsService.getRunModes()

 

Using Slightly:

 

var SlingSettingsService = Packages.org.apache.sling.settings.SlingSettingsService;

use(function () {
    // Get runmodes and transform them into an object that is easier to read for Sightly
    var runmodesObj = {};
    var runmodesSet = sling.getService(SlingSettingsService).getRunModes();
    var iterator = runmodesSet.iterator();

    while (iterator.hasNext()) {
        runmodesObj[iterator.next()] = true;
    }

    return {
        runmodes: runmodesObj
    }
});

 

 

and use HTL  

 

<div data-sly-use.logic="logic.js">
  <p>Current runmodes: ${logic.runmodes}</p>
  <p data-sly-test="${logic.runmodes.publish}">publish runmode</p>
</div>

 

 

Avatar

Level 2

try in a different manner, but the expected result does not come.