Guide: Trigger CCF messages from elements in Content Spots

Score’s CCF (Component Communication Framework) allows Content Authors to use rendering parameters to easily control how components communicate with each other. For example, we can set the Button component to fire a CCF message when it is clicked.

But what if the button is inside a Content Spot? Can it still send and receive messages?

Content Spot is a component that allows Content Authors to insert a block of rich text into the page. For example, the body of a Blog Post page is a perfect use case for a Content Spot. If there are images or links within this content, it’s easier for authors to roll them into the HTML of the Content Spot rather than breaking up the Content Spot to have:

• <Content Spot with text>
• <Button component>
• <Content Spot with text>

Choosing a Global Software Development Partner to Accelerate Your Digital Strategy

To be successful and outpace the competition, you need a software development partner that excels in exactly the type of digital projects you are now faced with accelerating, and in the most cost effective and optimized way possible.

Get the Guide

Good news! It’s absolutely possible, here’s how to do it:

1. In the Content Spot HTML, make sure the parts that should trigger a message are wrapped in a distinct HTML tag. In the example below, I want to send a message when the text “Read more…” is clicked, so I have to wrap just that portion of the text with a tag. I chose to use a button tag, but the type of tag does not matter for CCF to work. The key is to ensure your tag has some kind of attribute that can be used to find this element in JavaScript. In this example I am using the “id” attribute.

1. From the “Page” tab of the Experience Editor ribbon, select “Manage Scripts” and add JavaScript code to the “Page Footer Scripts” field.

The code should do the following:

1. Find the element we want to target from the Content Spot
2. Attach an event listener to it for a “click” interaction
3. Register an event handler that will fire the CCF message “name of your ccf event” when a click is captured

That’s it! Now this event will utilize CCF’s Event Manager, so you can make other components do stuff in response to this message both, programmatically and using CCF rendering parameters.

Programmatically:

// Module definition for a custom component
define(["eventManager"], function (eventManager) {
function CustomComponent() {

// Here is the message subscription piece
eventManager.subscribe("name of your ccf event", function handler() {
// do something when content spot text is clicked
});
}

CustomComponent.init = function init(args) {
return new CustomComponent(args);
};

return CustomComponent;
});

Happy CCFing!

Tips for content authors

1. If you wrap text with <button> tags, make sure you include the type=”button” attribute,
   or the browser will treat this button as a form submit button by default.
2. If you use the “id” attribute to identify your element and you want to use this method for multiple elements on the same page, remember that DOM element ids must be unique.