How can I change a component property inside of a component?

Ask us anything
1

Hi there,

I am currently building a task component. It includes a property called “Done” that allows you to mark a task as complete or incomplete. This property is linked to various style properties within the component. Everything works correctly when I modify the “Done” property externally. However, I am facing an issue when attempting to alter the “Done” property internally within the component. It seems that I do not have access to the property in the workflow builder or I’m just unable to find it. :man_shrugging:

What can I do to modify the component property within the component itself?

Thanks in advance,
Andy

2

The property is managed exclusively by the instances, so you cannot really. What you can do is:

  • Create a variable
  • You can manipulate and bind to this variable
  • Make a workflow ‘On prop change’ and then update the variable when the property changes
3

Hi @luka, thank you so much for your fast response. Maybe I missunderstand something, but I don’t want to wait for the “On prop change” event, I want to trigger that event inside the instance!?!

4

Trigger event = done. Do this inside the component and provide whatever event schema

Then …

Head to the instance and go to workflows then select your “done” trigger and continue your workflow from there.

But if this isn’t it then follow Luka’s advice. I do components all the time.

5

Hm… thank you so much for your help guys… After some try and error I’ve done it this way:

  • I’ve created a boolean component variable for the checked/unchecked state
  • I’ve created a new state with a condition using this variable
  • I’ve created a workflow where I change this variable on click to true or false
  • I’ve created a boolean property and when I set it to true or false this will update the variable with the “On property change” event.

Now I can change the state of the component from outsite (by using the property) and from inside (by clicking on an element). BUUUUUT :crazy_face: How can I also update the property, when I’m clicking on an element and change the variable. In other words: When I change the check status by changing the component variable I want also change the component property automatically so that this keeps consistent.

I’ve searched for Trigger event and event schema, but I couldn’t find anything how to use it :man_shrugging:

Thanks in Advance,
Andy

1 Like
6

I’m having a similar challenge with keeping text up to date after it’s been edited.

My use case:

  • component with a property named Title
  • Title is shown as read-only text by default
  • User can click an Edit button, and then the UI displays a textfield for the Title field
  • User can edit the Title
  • User clicks Save, textfield changes back to readonly text, but the read-only text is still the old text from the property

I need to be able to update the property because the read-only text is bound to it!

7

Any luck? I’m still scratching my head on this one.

8

Same applies as my first comment here, use a component variable to manipulate and change text and only use the prop for the initial value