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.

[RolandM]

Hi @Codebug , hi @DianaBirkelbach 

Thank you very much for this thread. Your solutions brought me one step further.

In my case I have a component with a text field bound as input that is converted into a QR-Code and I would like to store the generated image into another output field.

If I define a  of-type "Object", I cannot find my component in Power apps. Do you have an idea on how to store a data object into a bound output Image field?

Thanks in advance

Roland

[Codebug]

Hi @RolandM, i have not tried this exact use case but just thinking out loud,

if you have already converted the string into byte array,

Option 1

may be, convert the byte array to a base64 string and output it as a string to see if you can see your control. i am saying this because if you had used backend code then you'd have done it in this way. 

Option 2

Good old patch command should do the trick. (where you update the record with the new field value). although it is an extra call and is inefficient but it should work. 

again neither of the options are tried. give them a go. see if they solve the problem 

[DianaBirkelbach]

Hi @RolandM , 

If you are on a model-driven form, you could

- just like @Codebug  says, convert it to a string, and define the property of type string and usage "bound" where you return that value. That way the form will autosave the value with the other attributes on the form.
- if you would still like to work with object , then you can declare the property of usage "output" and use form-scripting to getOutputs. I have a blog about this (in that use case I'm using it for a dataset PCF, but it could work for you too): https://dianabirkelbach.wordpress.com/2023/05/19/let-your-subgrid-dataset-pcf-communicate-with-the-f...

For canvas apps, I have another blog about output objects: https://dianabirkelbach.wordpress.com/2022/11/13/call-fetchxml-inside-custom-pages-without-flows-the...

Or have a look to the PCF samples about output object: https://github.com/microsoft/PowerApps-Samples/tree/master/component-framework/ObjectOutputControl

Hope this helps!

[RolandM]

Thank you very much @Codebug and @DianaBirkelbach 

Actually I have the image converted to base 64 string. The problem is that I am not able to select the image column in the configuration of my pcf component. If I define "SingleLine.Text" in my manifest, I can only select text columns and there is no type "Image" available. Do you know a workaround for that?

[RolandM]

@DianaBirkelbach by the way, I am using a model-driven form