cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Codebug
New Member

PCF - getOutput is not updating field in the form

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.

bound field.png

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?

1 ACCEPTED SOLUTION

Accepted Solutions
DianaBirkelbach
Super User
Super User

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!

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

3 REPLIES 3
DianaBirkelbach
Super User
Super User

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!

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."
Codebug
New Member

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
New Member

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.

 

 

Helpful resources

Announcements
Power Apps News & Annoucements carousel

Power Apps News & Announcements

Keep up to date with current events and community announcements in the Power Apps community.

Power Apps Community Blog Carousel

Power Apps Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Users online (4,840)