How to get core component Freemarker code to edit / override

dfeasey 

While you will be unable to access and change the actual behavior of any of the core components, there is a way to incorporate your custom content into the component's display or replace it entirely.

To do this use the @override directive when creating a custom component:

1. Sign in as a user with access to Studio on stage
2. Go to Studio
3. Click on the Components tab
4. Click 'New Component' to create a new component
5. Give the component the same name as the core component you are working with + @override. For example, if you wanted to work the Admin Links component you would give your new component the following name:
   
   community.widget.admin-links@override
   
   Note that you must use the actual name of the component as opposed to the display name. In the example above, the display name of the component is Admin Links (based on a text key), but its actual name is community.widget.admin-links. To find the component ID, open the quilt where the component appears and click Switch to XML View. You can find more information about working with quilts here.
6. Click Create

For customizations such as "Contact | Log in | Sign up” instead of "Register | Sign in | Help”, use the REST API if possible, then you will have control over the markup.

And that's it! You have now made a custom component that can be used to update the content for a core component. From here, you can add content that will be displayed on any quilt this core component has been added to. You will not need to edit the quilt that the core component lives on as the @override component will take precedence and be displayed in place of the core component.

It's also important to note that the @override component will not display the actual content that is in the core component unless you use the @delegate directive inside the content of the component. The @delegate directive is the reference used to include the actual core component itself in addition to your custom content. The delegate is not required. If you do not include @delegate, then the core component is not used at all.

You might use this option if you wanted to group some custom text and a custom component under a common div class for CSS styling or if you wanted to add content to a quilt that you normally wouldn't be able to edit. As this is akin to a custom component, you can add additional code you might need, including FreeMarker references to other custom components, HTML, and javascript.

Let's look at an example

In Studio add the following as the content for the community.widget.admin-links@override component:

<div class="testclass">
<p>This is a test</p>
<@delegate />
<p>The test continues</p>
</div>