Showing posts with label HTL. Show all posts
Showing posts with label HTL. Show all posts

Saturday, 22 April 2017

Hashmap in Sightly / HTL

Use hashmap in sightly / HTL

WCMUsePojo code
package com.kishore.sightly;

public class GetMap extends WCMUsePojo {
    Map<String, String> myMap = null; 
    @Override
    public void activate() throws Exception {
        myMap = new HashMap<String, String>();
        myMap.put("name", "Kishore");
    }

    public Map<String, String> getmyMap() {
            return myMap;
    }
}

HTL code

<sly data-sly-use.model="com.kishore.sightly.GetMap" />

Name: ${model.myMap['name']}

Tuesday, 31 January 2017

Creating an Adobe Experience Manager HTL component that displays a repeating data set

You can create an Adobe Experience Manager HTL component that displays repeating information that can be set by an AEM author during design time. For example, consider a typical on-line section of a sports site. Each section of the HTL component can list a story includes:
  • a digital asset (located in the Experience Manager DAM)
  • a heading
  • text
The following illustration shows an Experience Manager HTL component listing various sport stories about a youth football club.
The HTL component displays a repeating data set that is set by an AEM author using a Touch UI dialog that contains a Multifield control.


An HTL component dialog
Read More

Friday, 9 September 2016

Creating an AEM 6.2 HTML Template Language component that uses a Multi-Field dialog

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Langauge (HTL - formally known as Sightly) to develop the AEM component. For example, consider an author whom enters information into a multi-field control in the component's dialog, as shown in this illustration.

Sunday, 14 August 2016

Creating an AEM HTML Template Language component that uses the WCMUsePojo class

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Langauge (HTL - formally known as Sightly) to develop the AEM component. HTL is the AEM template language that can be used to replace use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. For more information, see Introduction to the HTML Template Language.

An AEM author can access a HTL dialog to enter component values. For example, you can enter text that is displayed by the component, as shown in the following illustration.

A HTL Component Dialog


After you enter the component's values (for example, text values), you click the checkmark icon and the values are entered onto the AEM page. 

Values displayed in the AEM web page

Thursday, 11 August 2016

HTL (Sightly) Code Snippets

Below are few HTL syntax used frequently in AEM.


1. HTL does not support JSP tag libraries.


2. Including a script: data-sly-include instead of cq:include

<cq:include script="template.html"/> //Including a HTL file in JSP
<sly data-sly-include="template.jsp"/> //Including a JSP file in HTL

The element on which a data-sly-include has been set is ignored and not displayed.

3. Including a Resource: data-sly-resource

Includes the result of rendering the indicated resource through the sling resolution and rendering process. Basic syntax-

<article data-sly-resource="path/to/resource"></article>

Override resourceType of an include-
<article data-sly-resource="${'path/to/resource' @ resourceType='my/resource/type'}"></article>

Change the wcmmode-
<article data-sly-resource="${'path/to/resource' @ wcmmode='disabled'}"></article>