Perspective - Using PropertyTree.write()

Module Development
1

Hello,

I would like to understand the PropertyTree.write() and how to use it.

I have my Component Props:

interface SchedulerProps {
    events: Array<Object>;
    writeEventData: Array<Object>;
}

And my reducer function:

getPropsReducer(tree: PropertyTree): SchedulerProps {
        return {      
            events: tree.readArray("events", []),
            writeEventData: (newEvents) => tree.write("events", newEvents)
        };
    }

And I call this in my code:

onEventEdit(updateProps) {
        // where updateProps is an array of objects to be written to the events node/prop
        this.props.props.writeEventData(updateProps);
    }

My questions:

  • Is this the correct way to write new data to a prop?
  • Could you give some examples of how to write tree.write()? Am I using the arrow function correctly in my reducer?
  • What kinds of data types can be passed to tree.write()? Passing an array is causing errors.
  • Is this.props.props.writeEventData(updateProps) the correct way to call it? I get an error saying this is not callable

Any help appreciated!

Thanks,
Kirsty

2

I’d love to see awnsers on these questions as before 8.1 we could simply write properties by calling this.props.props.write(“property”, value), which isn’t supported anymore.

3

ok I’ve figured it out.

the props interface can look like this:

export interface someProps {
    someString: string;
    writeSomeString(aString: string): void;
}

event handler like this:

    @bind 
    someEventHandler (aString: string){
        this.props.props.writeSomeString(aString);
    }

and getPropsReducer like this:

getPropsReducer(tree: PropertyTree): someProps {
        return {
            someString: tree.readString('someString'),
            writeSomeString: (aString: string) => tree.write("someString", aString)
        };
    }
2 Likes
4

I’m using the PropertyTree.write(_) method and successfully writing values to the property.

The thing is, its writing to the the property of every instance of my component…not what I was looking for. The property I’m writing to is a bound tag and each instance of my component is bound to a different tag…I need to be able to target a specific component instance.
EDIT: I was wrong…it wasn’t doing the above…it just appeared to do that.

@kirsty , I’m guessing this is the behavior you’re looking for as well? Did you solve it? Please share if you did :slight_smile:

Incidentally, I learned that writing to a property from the getPropsReducer(_) method will cause that same method to be call when you write setting up a possibility for an continuous loop if the value you’re writing changes frequently.

Regards,
Ted.

5

Hi @edward.fowler,

Not sure if my solution is helpful to tag bindings but here is how I solved it…The component I was working on was a calendar/scheduler with a drag and drop feature. I wanted the property tree to change every time an event was dropped to a new timeslot. The component was bound to SQL queries. I ended up solving it by having a “Save” button that would write changes to the database, and then the SQL query binding would refresh the property tree for me.

I couldn’t figure out how to use the tree.write() method. Also, React docs state that props should be read only and a component must never modify its own props, so I thought passing new data to the component was probably a better way of going about it regardless.

After @bas.dejong posted the solution to tree.write() I tested it out and it worked. But I didn’t use it with bindings and I still prefer to pass new props to the component.

:slight_smile:

6

Thank you Kirsty. I created a post of this subject...maybe its helpful in the future...if I get it figured out :slight_smile: