Showing posts with label Multifield. Show all posts
Showing posts with label Multifield. Show all posts

Sunday, 10 September 2017

Creating RTE in Multifield

Discusses how to develop an AEM HTML Template Language (HTL - formerly known as Sightly) component that uses the WCMUsePojo class and uses a Multifield (granite/ui/components/foundation/form/multifield) in the component dialog. This article also covers using the Experience Manager Uber 6.3 JAR.
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.

Tuesday, 22 November 2016

Restriction on size in multifield

Following sample code can be used to put size restriction in a multifield -

1. Add a new property- "maxlinksallowed" to the multifield node in your cq:dialog. Refer the screenshot below-

2. Use this JS code-

$(document).on("dialog-ready", function () {
$(".js-coral-Multifield-add").click(function() {
    var field = $(this).parent();
    var size = field.attr("data-maxlinksallowed");
    if (size) {
        var ui = $(window).adaptTo("foundation-ui");
        var totalLinkCount = $(this).prev('ol').children('li').length;
        if (totalLinkCount >= size) {
            ui.alert("Warning", "Maximum " + size + " links are allowed!", "notice");
            return false;

You need to put the above code in a clientlibs JS file with category "cq.authoring.dialog".

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.