External Content

Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.

1. Change .content.xml file properties 
2. sling:resourceSuperType to point to the Cheer.IOs component [required]
3. jcr:title - new Component title
4. componentGroup - Brand specific Group [required]
5. jcr:description - Helpful description
   

Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.

1. Follow steps in Extend the Component - Basic
2. Extend the file i.e. extend-example-option2.html
3. Update file with new properties
4. Update the html file with desired changes
   

The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.

1. Follow Steps in Extend Component Basic
2. Extend the file component.html to point to the new component-tmpl.html file
3. Extend the file i.e. component-tmpl.html
4. Update file with new markup

Use this approach if you need to change the Sling Model to update the backend logic.

Files that will need to be added when extending:

1. Follow Steps in Extend Component - Basic
2. Java Interface - this will implement the model with the new methods (if needed)
3. Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
4. The component.html file to match the new component name
   

It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.

This gives us the flexibility to change our classes or add attributes easily.  Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.

By implementing the UrlProcessor interface you can create your own URL processor.

You will also need to create an HTL template file, with the same name as the processor field returned in the Result.

URLProcessor interface:

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright 2019 Adobe
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
package com.adobe.cq.wcm.core.components.services.embed;

import java.util.Map;

/**
 * Interface that defines a generic processor for a given URL.
 *
 * @since com.adobe.cq.wcm.core.components.services.embed 1.0.0
 */
public interface UrlProcessor {

        /**
         * Returns the result of processing the given URL, {@code null} if processing is not possible or failed.
         *
         * @param url The URL to process
         * @return The {@link Result} of processing, {@code null} if processing is not possible or failed.
         * @since com.adobe.cq.wcm.core.components.services.embed 1.0.0
         */
        Result process(String url);

        /**
         * @since com.adobe.cq.wcm.core.components.services.embed 1.0.0
         */
        interface Result {

              /**
               * Returns the name of the processor that was able to process the URL.
               *
               * @return Name of the processor.
               * @since com.adobe.cq.wcm.core.components.services.embed 1.0.0
               */
              String getProcessor();

              /**
               * Returns the data from the processor that was able to process the URL.
               *
               * @return Data from the processor that was able to process the URL.
               * @since com.adobe.cq.wcm.core.components.services.embed 1.0.0
               */
              Map<String, Object> getOptions();
        }
}

By adding an OSGi configuration you can embed an URL from an oEmbed provider.

YouTube Configuration:

# Copyright 2019 Adobe
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

provider="YouTube"
endpoint="https://www.youtube.com/oembed"
format="json"
scheme=["https://.*\.youtube.com/watch.*","https://.*\.youtube.com/v/.*","https://youtu\.be/.*"]
unsafeContext="true"

• By creating a hidden component in the /apps/ehi-core/aem65/components/content/external-content/v1/external-content/embeddable/ folder withcore/wcm/components/embed/v1/embed/embeddable as the sling:resourceSuperType, you can define an embeddable that also supports edit configuration options.
• To enable show/hide of the edit configuration options, the embeddable dialog snippet wrapper must have the following data attributes applied:
  •  /apps/ehi-core/aem65/components/content/external-content/v1/external-content/_cq_dialog/.content.xml
  • cmp-embed-dialog-edit-embeddableoptions="true"
    cmp-embed-dialog-edit-showhidetargetvalue="<embeddableResourceType>"/>
• The JCR properties for the edit configuration options of an embeddable must be namespaced to prevent clashes. 
• The following JCR properties are used for the provided YouTube embeddable:
  1. ./youtubeVideoId - defines the YouTube video ID.
  2. ./youtubeWidth - defines the YouTube video player width.
  3. ./youtubeHeight - defines the YouTube video player height.