PCF - getOutput is not updating field in the form

[Codebug]

I have a create virtual react-based pcf. It triggers from a change of a bound field and updates another output field. Currently, in the manifest, the properties look like the below,

<property name="Customer" display-name-key="Customer" description-key="Bind the customer field from which the address fields will be brought" of-type="Lookup.Customer" usage="bound" required="true" />

<property name="BoundTest" display-name-key="Bound Field" description-key="Bound Field" of-type="SingleLine.Text" usage="output" required="false" />

my part of my index.ts is below,

public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {        
        const props : IAddressComponentProps = this.ConstructProps(context);
        return React.createElement(AddressComponent, props);
    }

    private ConstructProps = (context : ComponentFramework.Context<IInputs>) =>{
        const addressFieldMaps = this.ConstructAddressMapFromContext(context)
        const entityRepository = new EntityRepository(context.webAPI, addressFieldMaps)

        const parentEntity : DynamicsEntity = {
            entityLogicalName : (<any>context).parameters.Customer.raw[0].LogicalName,
            entityId : (<any>context).parameters.Customer.raw[0].Id._formattedGuid
            //entityId : '39269c3e-a55d-4eae-ae8d-3091818562d6'
        };

        const childEntity : DynamicsEntity = {
            entityLogicalName  : (<any>context).page.entityTypeName,
            entityId : (<any>context).page.entityId
        };

        return {
            parentEntity : parentEntity,
            childEntity : childEntity,            
            showButton : (context.parameters.ShowButton.raw === 'yes'),
            entityRepository : entityRepository,  
            doSomething : this.doSomething
        }
    }

public doSomething = (bdFiled : string) :void => {
        console.log(bdFiled)
        debugger;
        this._boundField = bdFiled;
        this.notifyOutputChanged();
    }
    /**
     * It is called by the framework prior to a control receiving new data.
     * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
     */
    public getOutputs(): IOutputs {        
        return {
            BoundTest : this._boundField
         };
    }

from the react view component i can call doSomething method and there is no error. however i cannot see the bound field getting updated.

i am not sure if the getOutput is supposed to update a field in the form in this way. this post hints that it might be possible or may be i am misunderstanding the usage. I have also read through @DianaBirkelbach 's blog post for the updateview lifecycle. not sure if this would be different for virtual PCFs?

[DianaBirkelbach · Accepted solution]

Hi @Codebug , 

I suggest to define the "BoundTest" Property as usage="bound" instead of "output". 

The output property is a special usage, mostly used on Canvas Apps and CustomPages. On Model-driven forms, you can get that value using getOutputs: https://learn.microsoft.com/en-us/power-apps/developer/model-driven-apps/clientapi/reference/control...

But since you want to change the value of a bound field, you just need to declare the property as bound.

Hope this helps!

[Codebug]

hi @DianaBirkelbach ,

Thanks so much for your answer. I am checking now.

personally, i feel like the values for the target field should automatically change based on the event of the control. this will then mean i do not have to call 

formContext.getControl(arg).getOutputs();

periodically to check if the state of the field(s) have changed.

thanks again

[Codebug]

Hi @DianaBirkelbach ,

i have given your solution a go and it works like a charm. I had to set the params which I want to be wired with the form fields as bound but not required. i then have to call the notifyOutputChanged function to call the setter function. 

public doSomething = (bdFiled : string) :void => {
        console.log(bdFiled)        
        this._boundField = bdFiled;
        this.notifyOutputChanged();
    }

public getOutputs(): IOutputs {        
        return {
            BoundTest : this._boundField
         };
    }

I learned that any parameter defined in the manifest file can be considered both IInputs and IOutputs type even if i do not explicitly mention the params output.