Create a custom Granite UI adapter to disable the Multifield component

Nate Yolles | January 21, 2016 | 709 comments |

Adobe Experience Manager's Granite UI introduces the concept of Adapters. Adapters are a client-side device inspired by Apache Sling's Adapters and its adaptTo method. Adapters are an easy and clean way of creating APIs for commonly used functionality associated with specific objects. Adapters attach functionality to DOM elements according to vocabulary. Vocabulary is analogous to Java Interfaces.

The first Adapter that you're likely to encounter is the foundation-ui. The foundation-ui is an object, adaptable from the global window object, that gives you the power of creating Coral UI alerts, notifications, prompts and loading indicators. Try copying the following JavaScript into the console of any Touch UI authoring page.

Granite UI alert triggered by foundation-ui adapter.

There are a variety of adapters which you can find in the Granite UI documentation. There are more adapters that are not listed in the documentation such as the foundation-clipboard which allows an easy API to write to local and session storage. So be sure to explore /libs/granite/ui/components/foundation/clientlibs/foundation/js.

It's easy to write your own adapters. Granite UI foundation components come with the foundation-field vocabulary. However, in this example we're going to create an improved adapter with an API that will completely disable the component by disabling the add button, all input fields, the remove and the drag-and-drop reorder buttons. We'll also add an additional method to enable/disable only the add button which could be useful in applying a max limit to the Multifield component.

Touch UI dialog with multifield disabled through the custom adapter.

Use the foundation-registry adapter to gain access to the Registry API where you can register a new adapter. The type property is the name of the adapter. The convention is to use the application name followed by the topic. The selector attribute identifies eligible objects, usually a DOM element or the window object. The target object to be adapted need not be obtained by using the declared selector, but it must satisfy the selector. The adapter property is where the public APIs are defined and executed.

In this example, we actual register three separate adapters. The Multifield component is essentially a composite of other components, so we'll use the parent adapter to delegate functionality to the children component's own adapters. Input fields such as textfields and selects can use the provided AEM foundation-field adapters, however, we needed to create new adapters for standard buttons as well as drag-and-drop reorderable buttons. The new adapters were created using the application's namespace rather risking collision with future AEM updates.

To make use of the API, use jQuery to get the Multifield component, adapt it to the custom vocabulary and run the custom disabled method.

Multiple adapters can be created for any selector. The AEM provided foundation-field adapter is still available to the .coral-Multifield selector even when the example code is used. To make your adapter available when authoring in the Touch UI, ensure that it's in a clientlib that identifies the cq.authoring.dialog category.

709 comments

Walter Hill | February 07, 2018 at 02:04 PM | Reply

Excellent post!

bcdtenbm | May 23, 2020 at 08:13 AM | Reply

viagra costco https://viagaramen.com/ viagra online austria <a href=https://viagaramen.com/>generic viagra cost</a> viagra cialis tablets

gzzillex | May 24, 2020 at 05:05 AM | Reply

how long after taking viagra can you take nitroglycerin https://usabuyes.com/ - costco pharmacy prices viagra [url=https://usabuyes.com/#]viagra online no prescription[/url] to buy viagra online uk

Syreeta | May 25, 2020 at 09:13 PM | Reply

sildenafil jak kupic best place to buy viagra online viagra ankara eczane

canadian online pharmacy viagra | June 02, 2020 at 07:28 AM | Reply

viagra generic online [url=https://viagenupi.com/#]canadian online pharmacy viagra[/url] how much viagra should i take the first time? canadian online pharmacy viagra viagra for women https://viagenupi.com/

female viagra | June 03, 2020 at 04:28 PM | Reply

Greate post. Keep posting such kind of information on your page. Im really impressed by your blog. Hi there, You've done an excellent job. I'll certainly digg it and for my part suggest to my friends. I'm sure they will be benefited from this site. https://viatribuy.com/

generic viagra sales | June 03, 2020 at 06:28 PM | Reply

generic viagra sales http://viacheapusa.com/

substitute for albuterol inhaler | June 03, 2020 at 08:12 PM | Reply

substitute for albuterol inhaler https://amstyles.com/

where to buy viagra | June 04, 2020 at 10:21 PM | Reply

where to buy viagra https://mymvrc.org/

shddtydd | June 12, 2020 at 08:45 PM | Reply

levitra prezzi bassi [url=https://levitramen.com/]levitra 10mg price[/url] levitra duracion efecto

can you buy hydroxychloroquine in stores | June 15, 2020 at 12:22 PM | Reply

can you buy hydroxychloroquine in stores https://chloroquine1st.com/

clomid for sale | June 15, 2020 at 09:41 PM | Reply

clomid for sale https://clomidweb.com/

can i buy hydroxychloroquine over the counter | June 16, 2020 at 08:30 PM | Reply

can i buy hydroxychloroquine over the counter https://azhydroxychloroquine.com/

https://careprost.confrancisyalgomas.com | June 17, 2020 at 02:29 AM | Reply

https://careprost.confrancisyalgomas.com https://careprost.confrancisyalgomas.com/

female viagra pills | June 17, 2020 at 03:20 PM | Reply

female viagra pills http://viacheapusa.com/

https://careprost.confrancisyalgomas.com | June 18, 2020 at 02:37 PM | Reply

https://careprost.confrancisyalgomas.com https://careprost.confrancisyalgomas.com/

albuterol alternative drugs | June 18, 2020 at 03:46 PM | Reply

albuterol alternative drugs https://amstyles.com/

where can i buy tylenol online | June 19, 2020 at 04:18 AM | Reply

Hi there everyone, it's my first pay a visit at this site, and paragraph is truly fruitful in support of me, keep up posting these types of content. https://tylenol1st.com/

amoxicillin over counter cvs | June 20, 2020 at 06:20 AM | Reply

amoxicillin over counter cvs https://amoxycillin1st.com/

czzytkyl | June 20, 2020 at 11:33 AM | Reply

levitra zollprobleme https://levitramen.com/ - levitra coupon levitra tabletas 10 mg <a href=https://levitramen.com/>vardenafil levitra</a> levitra preturi

viagra | June 20, 2020 at 01:26 PM | Reply

viagra http://viacheapusa.com/

buy viagra without prescription | June 20, 2020 at 04:21 PM | Reply

Hi, i think that i noticed you visited my website thus i got here to return the favor?.I'm attempting to in finding issues to improve my website!I suppose its ok to use some of your ideas!! http://www.vagragenericaar.org/

tqtbhbjf | June 20, 2020 at 08:03 PM | Reply

acquistare levitra generico italia https://levitramen.com/# - generic levitra 20mg erfahrungsberichte mit levitra [url=https://levitramen.com/#]levitra dosage 40 mg[/url] acheter levitra bayer

btxdvyib | June 21, 2020 at 03:39 AM | Reply

buy viagra online no script https://usabuyes.com/ - real viagra without a doctor prescription sildenafil generic vs viagra <a href=https://usabuyes.com/#>lowest price viagra</a> sildenafil citrate 100mg

generic viagra sales | June 21, 2020 at 08:47 AM | Reply

WOW just what I was searching for. Came here by searching for viagra http://viacheapusa.com/

viagra substitute walmart | June 22, 2020 at 12:05 PM | Reply

If some one wants expert view regarding blogging and site-building after that i recommend him/her to visit this website, Keep up the fastidious work. https://viatribuy.com/

tadalafil without a doctor's prescription | June 22, 2020 at 09:04 PM | Reply

tadalafil without a doctor's prescription https://www.wisig.org/

viagra without prescriptions in usa | June 23, 2020 at 01:32 AM | Reply

viagra without prescriptions in usa https://mymvrc.org/

cialis 20 mg best price | June 23, 2020 at 08:27 AM | Reply

cialis 20 mg best price https://www.wisig.org/

best places to buy generic cialis | June 23, 2020 at 12:50 PM | Reply

I don't even fuck how I terminated up here, only I cerebration this billet was bang-up. I don't make love who you are simply for sure you're passing to a notable blogger if you are non already ;) Cheers! http://www.cialisles.com/

over the counter cialis | June 24, 2020 at 05:09 PM | Reply

This post will help the internet visitors for building up new blog or even a blog from start to end. https://www.wisig.org/

over the counter tylenol | June 24, 2020 at 09:25 PM | Reply

Heya this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I'm starting a blog soon but have no coding knowledge so I wanted to get advice from someone with experience. Any help would be greatly appreciated! https://tylenol1st.com/