Forum Discussion

pp_01's avatar
pp_01
Mentor
7 years ago

Changing or appending content of a OOB component.

Hey all.

Is there any way through which an OOB Components content can be changed or appended. I know @override but I suppose that is used for changing the whole component and not just a part of it.

My requirement is basically to append the title of an OOB component and I think there is way it can be done through jQuery, I'm not sure though. But my question is can an OOB component's content be manipulated through Freeemarker as well? Or is there any API call through which I can get the content (title) of that component and then manipulate it?  If yes what will be the best way to do it. It will be great if anyone can explain through a snippet. Thanks in advance.

  • luk's avatar
    luk
    Boss
    7 years ago

    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}
    • Lindsey's avatar
      Lindsey
      Leader
      6 years ago

      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?

      • luk's avatar
        luk
        Boss
        6 years ago

        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?