How to create an experience fragment in AEM?

Below are the steps to create an Experience Fragment (XF) in AEM:

1. Open AEM and navigate to the Assets console.
2. Click on the Experience Fragments folder on the left side of the console.
3. Click on the "Create" button at the top of the console and select "Experience Fragment" from the dropdown menu.
4. Fill in the required fields in the "Create Experience Fragment" dialog box, including the XF's name, title, and description. You can also select a thumbnail image to represent the XF.
5. Click on the "Create" button to create the XF.
6. Once the XF has been created, you can begin authoring it by clicking on the "Open" button next to its name in the Assets console.
7. The authoring mode for an XF is similar to the standard AEM authoring environment. You can add components and content to the XF, as well as define variations that can be used to tailor the XF for different audiences or use cases.
8. Once you have finished authoring the XF, you can publish it to make it available for use in your AEM sites. To publish the XF, select it in the Assets console and click on the "Publish" button at the top of the console. You can choose to publish the XF as a draft or a final version, and select the channels or audiences that should have access to it.
9. After the XF has been published, you can use it in your AEM sites by adding it as a component to a page or template. When the page or template is rendered, the XF will be displayed with its defined content and variations.

AEM service unsatisfied

When you see your AEM service and servlet is showing in state unsatisfied. Then click on the class name and see the detail, on the OSGi console that what causing this issue and which reference is unsatisfied.

Unsatisfied
Service Name: org.apache.sling.api.resource.ResourceResolver
Cardinality: 1..1
Policy: static
Policy Option: reluctant
No Services bound

ResourceResolver is not satisfied or the way of creating ResourceResolver object is not correct.

Policy Option

RELUCTANT
          The reluctant policy option is the default policy option for both static and dynamic reference policies.

References

1. Reference Policy Option

Hide and show AEM component using authoring

 Hi Friends, today in this article we are going to see an example of how we can hide and show the content of the AEM component using authoring.

First of all, we will add an isHide checkbox field in the component dialog so that an author can set it based on the requirement. Below is the code node structure of isHide node in the component dialog.

{
	jcr:primaryType: "nt:unstructured",
	uncheckedValue: "false",
	name: "./ishide",
	text: "Hide content",
	value: "true",
	sling:resourceType: "granite/ui/components/coral/foundation/form/checkbox",
	fieldDescription: "Hide the content of this component on page."
}

Since we have completed the dialog part now move to the component HTL page where we will manage the rendition.

<sly data-sly-use.objectJorvee="com.jorvee.aem.models.sample.custom.HideShow"></sly>
<sly data-sly-test="${!objectJorvee.isHide}">
	<div>rashidjorvee</div>
	<p>Some content here</p>
</sly

Once you will check the isHide option then after it will be difficult to find the component on the page, hence add the below line of code in the HTL file so that it will show a copy text to configure the component always in edit mode.

<div data-sly-test="${(wcmmode.edit)}"
     style="text-align: center; padding: 20px 0; width: 100%; text-decoration: underline; color: #00a8e1;"
     data-sly-unwrap="${wcmmode.disabled}">Configure your AEM component
</div>