enable conditions for custom components?

  • 1
  • Question
  • Updated 10 months ago
  • In Progress
Has anyone sucessfully added enable conditions to a custom component? [Looking at you, Barry]

I can add rendering conditions like so: https://community.skuid.com/skuid/topics/custom-component-conditional-rendering

But I haven't dug through the code to find the enable conditions. 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
This get's the enable conditions settings into the builder side. but it looks like I need to do something on the runtime side to actually disable the component. Anyone accomplished that?

skuid.builder.core.getRenderingCategory({
    component: component,
    model: null,
    propViewer: propertiesObj,
    showOnHideDataBehaviorProp: true,
    showEnableDisableConditions: true,
    showMessageWhenDisabledProp: true
})
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Matt, the logic for actually performing "Enabling" / "Disabling" at runtime is entirely dependent on the nature of the custom component that you are building, so there is not a straightforward, simple way to answer this question. Hence the reason why Conditional Enabling / Disabling is only available on certain Skuid components, e.g. Buttons and Fields, and not generically on all components. Conditional Rendering, on the other hand, is available on all custom Components by default at runtime, it's simply a matter of adding the property category in the page composer using skuid.builder.core.getRenderingCategory() as you have already deduced.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Ok. I understand that this is complex.

Is there something I can do in the runtime code to make an entire component look and act disabled (regardless of the contents of the component)? I want to overlay the whole thing with a little bit of grey and make it not respond at all to clicks or inputs.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Anyone have any ideas here?

I can probably figure out the javascript function enable/disable my component, but how do I get skuid to check the enable conditions set up in the builder when the component renders to decide if it should be enabled or not?
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
+1 this idea, but not just for custom components. I've had many occasions where it would be really useful for the UX to have an entire component (field editor, table, etc.) greyed out until the condition is met. I want the users to know that the greyed out data will need to be filled out, but only after filling out some other fields first.

Rendering conditions work just fine, but I think it helps the user gain an initial sense of how much data needs to be entered on each page, rather than having components suddenly appear as they move through the page...good UX is the name of the game after all, right?