Return all property tree changes

Module Development
1

I know that you can return a singe property tree value like this based on the sample :

 url: tree.readString("url", "")

Is there a way I can simply return all the changes at once?

2

If you’re on 8.1 or higher, there’s a PropertyTree.subscribe method.

3

Thanks! I’m probably overthinking it is there an example of this usage in the sdk or api where it returns the whole tree?

4

Actually, I’m probably a terrible person to offer Perspective advice. Maybe @ynejati or @PerryAJ :slight_smile:

5

Happy to help –

Joe, I’m assuming your snippet above was in your reducer function?

The main thing to realize is that the reducer function returns whatever you want from it. So you could (if you wanted) return the whole property tree.

Depending on the complexity, my suggestion for best testability would be to avoid returning the whole raw PropertyTree instance from the reducer. If you need the full tree, it’s probably best to convert it to a plain javascript object using read() or toPlainObject() first. I’d even recommend passing in any mutation (write) functions as ‘plain props’ rather than property tree elements, as it will help avoid unnecessary tight coupling to the implementation of PropertyTree.

getPropsReducer(tree: PropertyTree): MyPropType {
    return {
        // will give the property tree as a plain js object, instead of an instance of PropertyTree
        // this would let you read the value of the tree via `this.props.props.json`.  Same result occurs if
        // calling tree.read(), without passing a path parameter.
       json: tree.toPlainObject()
      
       
       // If you had to write to the tree's 'data' node, passing in a callback function instead of the actual
       // PropertyTree will simplify unit testability of your component outside of perspective's environment.
       // You would call this via this.props.props.writeData(someNewData)
       writeData: (newJson) -> tree.write("data", newJson)
    }
}

That all said, for performance reasons, be careful returning the whole tree even as a plain object. Depending on the nature/implementation of the properties + component, it’s easy to imagine introducing poor performance due to re-rendering when you don’t need to. It’s best to be selective if you can.

2 Likes
6

Thanks for your help!
from the sdk example,

const { props: { url }, emit } = this.props;

is how I have been getting the data in. Should I use the tree.read function instead?

what usage would you recommend for a json prop tree like below?


{
	"$schema": "http://json-schema.org/draft-04/schema#",
	
	
	
	"Item1": 
		"blabla",
			"type": "object",
	"properties": {
	
		"booleanOne":{
			"default": false
		},

		"Item1":{
			"default":"Text 1"
		},
		"Item2":{
			"default":"Text 2"
		},

	 "text1": {
            "type": "string",
            "description": "text input 1.",
            "default": "blabla 1"
        },	
		
	
	 "text2": {
            "type": "string",
            "description": "text input 1",
            "default": "blabla 2"
        },	
	}
		 ,
	
	"style": {
		"$ref": "urn:ignition-schema:schemas/style-properties.schema.json"
		
	},
    "position": {
          "rotate": {
      
      }
      
    },
    "custom": {}


	}
7

Would this be the correct usage ?
Using this way, I can change a property value by a binding.
I bound a text box value to the property.
In the browser I put “Happy Friday” in the box
with a button click I print the tree value that was bound.
I can see that the property tree is updated with the value “Happy Friday”
however “Happy Friday” is not passed to the object itself.

export interface ModProps {
   json: any;

}

…

render() {
    

 
 const { props } = this.props;
 const json: string = this.props.props.json;
 
 
 use values
 
 
 
 }
 
   getPropsReducer(tree: PropertyTree): ModProps {
    return {
        json: tree.read()
        
        

		
		
    };