Rendering option for custom components?

  • 3
  • Question
  • Updated 3 years ago
  • Answered
I have a custom component that I'm using on a few of our pages, and just realized that I don't have the option to render the component like a 'native' component does. Is there something I can add to my component's javascript to make this an option? We now have a need to conditionally render it based on a field in one of the models, so having this option would be great. 

If there's no way to add it to custom components, is there a recommended workaround?
Photo of Jonathan Gillespie

Jonathan Gillespie

  • 870 Points 500 badge 2x thumb

Posted 4 years ago

  • 3
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
If you go into your Component's XML and add a <renderconditions/> node like you have with native components, you can add Render Conditions here, and Conditional Rendering will take effect at runtime. For example:

<components>
    <tabset>
          ....
    </tabset>
    <awesomemap>
           <renderconditions>
                 <rendercondition type="fieldvalue" operator="gt" enclosevalueinquotes="false" fieldmodel="Opportunity" nosourcerowbehavior="skipandnorender" field="Amount" value="1000"/>
           </renderconditions> 
     </awesomemap>
</components>

This doesn't provide you with a "Rendering" property category in the Page Composer (like you're asking for), but we're working on exposing the API for doing this!
Photo of Jonathan Gillespie

Jonathan Gillespie

  • 870 Points 500 badge 2x thumb
Thanks, Zach! This should work perfectly for another component I have. Unfortunately, I'm not sure if it'll work for the component that I originally was asking about. To give you some more details on my scenario, I have a component (it's part of the single module that we use for all of our pages, in case that matters) that is used on 3 or 4 pages (account page, opportunity, order, etc). Just on the opportunity page, I need to hide the component if the opportunity is closed - for all our other pages, the component should always be shown. Could I have a snippet on the opportunity page that adds in the renderconiditions to the component?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Jonathan, your use case sounds like a perfect fit for doing what I described about --- in the Page XML for the Opportunity Page, add the Render Conditions. Don't add anything to the other pages where the component is used. Not sure why a Snippet would be needed...
Photo of Jonathan Gillespie

Jonathan Gillespie

  • 870 Points 500 badge 2x thumb
Zach, I'm apparently not very good at reading - when I originally read your reply, I thought the rendercondition stuff was supposed to go into the builder JS for the component - I'm not sure why I thought that, guess I need to drink more coffee in the afternoons 

So yes, I think what you originally gave me should work perfectly for my use case - thanks again for the help!
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Hah, I think we're all like that in the afternoons :) 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Any word on this?
This doesn't provide you with a "Rendering" property category in the Page Composer (like you're asking for), but we're working on exposing the API for doing this!