AEM Developer Series
- Day 00: AEM Developer Series
- Day 01: Introduction to AEM
- Day 02: AEM Architecture
- Day 03: Setting up AEM Development Environment
- Day 04: Developing First OSGi Bundle
- Day 05: Working with Sling Servlets in AEM
- Day 06: Playing with Sling Post Servlet
- Day 07: Creating your first component in AEM
- Day 09: Dueling with Java User API
- Day 10: Getting to know Sling Models
- Day 11: Client Libraries in Action
- Day 12: Creating your custom OSGi Configuration
- Day 13: Schedulers in AEM
- Day 14: Eventing in AEM
- Day 15: Custom Workflows in AEM
- Day 16: Creating JMX Beans in AEM
- Day 17: Working with QueryBuilder API
- Day 18: Working with Granite Datasources in AEM
- Day 19: Replication API in Action
- Day 20: Working with Users and Groups in AEM
- Create a simple text component with a basic configuration as follows (how? see here)
|Create a component|
- Create nodes and properties under the component node as per the following XML file
- Now, create a new file text.js under the path /apps/demoproject/components/content/text and paste the following code in it Here, note that we are using use(function()) which signifies the usage of the Use API and in the function, at line #4, we are initializing a JS object call text.
- Then, we created two members of the text object, title and description. we are setting these with the JCR properties title and description respectively. Note that to access these values from the JCR, we are using granite.resource.properties object.
- In line #9, we are returning the text object.
- Now rename text.jsp to text.html and paste the following code in it. Here we are using data-sly-use.text="text.js" which includes the JS file in the HTML code. You have to use the right path of the file if the HTML file and the referred file are not in the same location. This code gets the text object and accesses the properties via dot (.) operator.
- Now drag and drop the component on the page and configure it using the edit dialog. You will see the passed values on your page.
You can find the complete code of this project on my GitHub. Feel free to fork or open issues, if any.
I would love to hear your thoughts on this and would like to have suggestions from you to make it better.
Happy Coding 😊