Resetting a code component bound property

[Anonymous]

Hello, I created a custom control which is imported in a canvas app. The control has a bound property whose value is processed whenever UpdateView is called. I want to process the incoming value only when a PowerApps variable bound to the control property is updated(when I'm getting new user input). 

The issue is that UpdateView gets called multiple times between user inputs(between variable updates). This means I'm reading repeated, outdated values for the parameter.

User Input	Control property	Action in UpdateView
"First input"	"First input"	Process this
no input	"First input"	Need to ignore this
no input	"First input"	Need to ignore this
"Second Input"	"Second input"	Process this
no input	"Second input"	Need to ignore this

My intent is to set the control property to empty string after processing user input, and ignore input values equal to empty strings. Comparing the current value with the previous one is not an option, since the user might provide the same value twice.

Is there a way to achieve this, either inside the control or with PowerApps code?

[DianaBirkelbach]

Hi @Anonymous , 

Having the updateView called multiple times is by design.
I'm not so sure if I understand your use case  (seems a little tricky), but inside the PCF updateView you can examine the context.updatedProperties. That way you will know what was changed last (what's the reason of calling the updateView).
In case you change the value of your properties inside your PCF too, be aware that this will trigger another updateView for your own PCF. Seems that you need to ignore the cases when the value is empty, since that's what you reseted lastly.

If this doesn't help, maybe you can explain a little more about your use case. Would be happy to brainstorm with you.

[Anonymous]

Hi Diana,

It would be useful to know the reason UpdateView is called. If a property of interest has changed, I could process its value. I examined context.updatedProperties, however it did not contain any of the bound properties after updating values in the harness. The only thing that showed up was a property called "layout".

I'll try to provide more context on my use case.

I have a Canvas app containing my custom control, a variable ‘varInputValue’ bound to the control’s ‘inputValue’ property, a textbox ‘inputValueBox’ and a button with an action Set(varInputValue, inputValueBox.text).

Whenever the user clicks the button, the string in the textbox is passed as input to my custom control. I process the user input with a 3rd party library inside the control:

public updateView(context: ComponentFramework.Context<IInputs>): void {
    
    let inputValue = context.parameters.inputValue.raw; // the value of the parameter is persisted between UpdateViews. I do not want to process the same value every time UpdateView is called, unless a new input comes from the user(the new input can be the same string as the old input), obtained through a Set Action.
    
    if (!this.isNOUOE(inputValue) && inputValue !== 'val'){
        this._inputValue = inputValue;
        
        // Process inputValue with a 3rd party library    
        
        this._notifyOutputChanged();
    }
}

public getOutputs(): IOutputs {
    return {
        inputValue: this._inputValue
    };
}

If I could reset the 'inputValue' property to empty string after running UpdateView , I can be sure that input values that are not empty strings are new user inputs.

Maybe there is a way to do this using Power Apps code. I tried resetting the property in the same formula, using consecutive actions:

Set(varInputValue,"Testing this input");
Set(varInputValue,"");

The framework executes only the last action.

Thanks for your help.

[DianaBirkelbach · Accepted solution]

Hi @Anonymous , 

I think I've got your use-case now: you want to use the PCF only for processing the text using a 3rd party library.

You won't have control over when updateView is called, so we will have to find a way to take the control.

Also triggering notifyOutputChanged in updateView could lead to a loop of async calls, since every time you change the value the updateView will be called again (kind of self-triggering).

Solution idea 0

A clasical solution to this would be implementing both the input and the button inside your PCF. Then you would notify tha platform only for the values you've processed with 3rd party library.

But I guess that's not what you are looking for, since it's easier to use the CanvasApp controls. So I would propose this PCF design

Solution idea 

Define 3 properties for your PCF: an input for the input text, a trigger property and an output property.

1. inputValue property, the same as you did. Maybe the variable is not needed, if you set the property directly
   1. youtPCF.inputValue = inputValueBox.text
2. triggerProperty. This one will be set each time the user clicks on the button. This way it doesn't matter that the value in the text box is not changed. In updateView you process the inputValue only when the value of the triggerProperty changes.
   1. As trigger property you could use a timestamp (datetime). This way you don't need to reset
   2. Anothe approach is to use an integer, which you increment each time the button is clicked
   3. You don't need to reset, but if you want to, you can reset the value of the triggerProperty from inside the PCF (using a small delay (window.setTimeout)). But then you need to ignore the null/reseted values inside updateView
3. outputProperty: This property is of type "output" and here you can put the processed values using the 3rs Party library (and of course call notifyOutputChanged). Since it's separate from the inputProperty, you won't have issues with self-triggering.

1.  

Hope this helps!

[Anonymous]

Hi Diana, 

Yes, this approach works. The triggerProperty allows me to determine if a new user input has been received. Thank you for your help.

Regards,

Dan