Changing or appending content of a OOB component.

pp_01 It is technically possible to manipulate OOB components, if it is performant and a good idea in general is the other question, but I know, sometimes there is just no other way...so here you go:

<#-- create a variable that holds the original component's markup -->
<#assing markup>
    <@delegate />
</#assign>

<#-- as $markup basically contains a string of HTML, you can do
        whatever you can with a string and manipulate it... -->
<#-- replace stuff -->
<#assign markup = markup?replace("<RegEx>", "<Replace>", "rmis") />
<#-- regex pattern matching -->
<#assign matches = markup?matches("<RegEx>", "rmis") />
<#if matches>
    <#-- if you have capture groups you can get them with ?groups -->
    <#list matches?groups as match>
        <#-- do something with your match, which will contain all the capture groups as a sequence -->
    </#list>
</#if>

<#-- whenever you are done, just save stuff back to $markup (or any other variable, the name doesn't matter) and output the modded version -->
${markup}

Hey luk , I tried this solution and I get this error:

For "?replace" left-hand operand: Expected a string or something automatically convertible to string (number, date or boolean), but this has evaluated to a markup_output

I also get an error if I try to convert markup to a string before doing this. How were you able to do this?

Lindsey hard to say from the distance, maybe share the relevant parts of your code?

I noticed that I have a typo in my post above:

<#-- create a variable that holds the original component's markup -->
<#assing markup>
    <@delegate />
</#assign>

should be

<#-- create a variable that holds the original component's markup -->
<#assign markup>
    <@delegate />
</#assign>

of course, but most likely you got that, right?

and you say you get an error even if you directly output the contents of the markup variable, e.g:

<#-- create a variable that holds the original component's markup -->
<#assign markup>
    <@delegate />
</#assign>

<#-- add a regular HTML comment for debugging purposes -->
<!-- START @override -->
${markup}
<!-- END @override -->

<#-- if you check the HTML markup of a page where your OOB
     component is displayed, you should find these comments
     when inspecting the component with the browser -->

?

This approach ONLY works for OOB components that are overwritten with @override, that means you create a NEW custom component with the EXACT name of the OOB one and postfix it with @override... e.g., <oob.component.name>@override will be the name of the component you put above code in... I assume you did that?

I was doing it for the profile hover card because I was trying to add the "send message" button to it. I'm not sure if this is an OOB component, but I called the file 
theme-lib.ui-script.profile-card@override, and as a test I just tried to replace the arrow element with a paragraph saying TEST. Here is my code: 

<#assign markup>
    <@delegate />
</#assign>

<#assign markup = markup?replace('<i class="lia-fa lia-fa-angle-right"></i>', '<p>TEST</p>') />

${markup}

This resulted in the error: 

For "?replace" left-hand operand: Expected a string or something automatically convertible to string (number, date or boolean), but this has evaluated to a markup_output

Lindsey where/how did you find theme-lib.ui-script.profile-card =)? I could be wrong, but doesn't sound like an OOB component to me, which would mean you can't use @override on that, which means you will not have the <@delegate /> directive available which will give you that error (probably)...

As far as I have seen it, the profile-hovercard (you mean that "tooltip" that pops up when hovering over a user-name, right?) is usually implemented by professional services as an endpoint (find these under /t5/bizapps/page/tab/community%3Astudio%3Aendpoints in your Studio), look for one called "profilehovercard" or something alike...in there will be some freemarker/HTML markup where you should be able to find your target HTML, e.g. your 

<i class="lia-fa lia-fa-angle-right">

that you want to replace.

In other words: The profile-hovercard is NOT an out-of-the box component, it's (afaik) a customization commonly done by PS. The hover card is also not implemented as a custom component (at least in my experience) which is why you can't override it as regular OOB components with @override.

let me know if that helped!

If you point me to your production community, I can tell you the exact name of the endpoint.

Okay I wasn't sure, I came onto this project after it had been worked on for a while so I wasn't sure where that component came from. Thank you!

Most of us do =)...and these were just assumptions, were they right?