Custom component conditional rendering

  • 1
  • Question
  • Updated 5 months ago
  • Answered
Anyone successfully added a 'rendering conditions' tab to their custom components?

Can I steal your code from you?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Skuid?
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,260 Points 5k badge 2x thumb
Matt~

Please see Ben's response to your other post: https://community.skuid.com/skuid/topics/custom-component-action-framework. We will let you know as soon as the documentation is available. In the meantime, anyone else try this before that can help Matt out? 

Thanks for your patience!
Karen
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Hi Friends,

You can add the Rendering tab to your custom component like so:
var propCategories = [
                    {
                        name: "Basic",
                        props: basicPropsList,
                    },
                    {
                        name: "Advanced",
                        props: advancedPropsList
                    },
                    c.getRenderingCategory({
                        component: component,
                        model: null,
                        propViewer: propertiesObj
                    })
                ];

Where the bold code is relevant for conditional rendering, and c = b.core and b = skuid.builder;

As a bonus, the advancedPropsList is just the unique id and css class property fields, and can be generated like so:
var advancedPropsList = [
                    c.coreProps.uniqueIdProp({component: component}),
                    b.cssClassProp
                ]
Photo of Tim Wilson

Tim Wilson

  • 504 Points 500 badge 2x thumb
Hey Matt,

Just wanted to say thank you for posting this. I was able to add the rendering tab easily to a custom component I'm working on.