How to use the value of standardFieldProps in an Odoo Owl component?

Question

I am trying to use a new owl component in an existing Odoo app, following the tutorial here:.

I want to display the contents of the field in the view but the field actually contains some JSON so I want to process it in the Javascript of the component first.

I am able to add the raw content of the field to the DOM using:

import { standardFieldProps } from "@web/views/fields/standard_field_props";

and

MyField.props = standardFieldProps;

Then in the template I can see the JSON object using:

<pre t-esc="props.value" class="bg-primary text-white p-3 rounded"/>

However if I try to add the standardFieldProps to the state:

state = useState({ props: standardFieldProps });

The value of state.props.value is true, rather than the value of the JSON object.

I have tried logging the value of the props in different Hooks (onWillStart, onMounted, onWillrender) but it is always true.

What am I missing?

Answer 1

It seems that the props are easily found at this.props. I'm not sure why the tutorial above imports @web/views/fields/standard_field_props but as far as I can see it is unnecessary. I can access this.props from the setup() method and add it to the state from there:

import { Component, useState} from "@odoo/owl";
import { registry } from "@web/core/registry";
export class MyField extends Component {
    static template = "my_app.my_field";
    setup() {
      this.state = useState({ props: this.props});
       ...