Power Platform Community Forum Thread Details

Hi,

I'm currently facing a big issue with PCF. I wondered if any of you ever had the same issue.

Here is a simplified context. I'm building a custom control than can be bound to multiple types of attribute.

The control must behave according to the attribute type it's bound to.

ControlManifest.Input.xml :

<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <control namespace="Test" constructor="TestComponent" version="0.0.1" display-name-key="TestComponent" description-key="TestComponent description" control-type="virtual">
        <external-service-usage enabled="false" />

        <type-group name="supported-types">
            <type>Currency</type>
            <type>Lookup.Simple</type>
            <type>SingleLine.Text</type>
        </type-group>
        <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type-group="supported-types" usage="bound" required="true" />

        <resources>
            <code path="index.ts" order="1" />
            <platform-library name="React" version="16.14.0" />
            <platform-library name="Fluent" version="9.46.2" />
        </resources>
        <feature-usage>
            <uses-feature name="Utility" required="true" />
        </feature-usage>
    </control>
</manifest>

Index.ts :


import { IInputs, IOutputs } from "./generated/ManifestTypes";
import { App, IAppProps } from "./App";
import * as React from "react";

export class TestComponent implements ComponentFramework.ReactControl<IInputs, IOutputs> {

    private notifyOutputChanged: () => void;

    constructor() { 
        // Empty
    }

    public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary): void {
        this.notifyOutputChanged = notifyOutputChanged;
    }

    public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
        const props: IAppProps = { 
            type: context.parameters.sampleProperty.type 
        };
        return React.createElement(App, props);
    }

    public getOutputs(): IOutputs {
        return { };
    }

    public destroy(): void {
        // Add code to cleanup control if necessary
    }
}

App.tsx :

import * as React from 'react';

export interface IAppProps {
    type: string;
}

export const App = (props: IAppProps) => <div>{props.type}</div>;

As you can see, pretty simple. In this component, I'm just displaying the type of the bound property inside a div.

For the demo, I took an OOB form of the account entity and placed this control on three attributes :

First tab : name (SingleLine.Text)
First tab : primarycontactid (Lookup.Simple)
Second tab : creditlimit (Currency)

Here is the result :

First tab

Second tab

As you can see, on the second tab, since the custom control is loaded only once, it displays the correct type. But on the first tab, both of the controls displays Lookup.Simple, which is incorrect.

It seems that if there is more than one instances, the contexts of those controls kind of "merge" together.

So, why is this ? Have you ever witnessed this strange behaviour ? Is it a product bug, or am I missing something ?

Regards,

Anthony Ferry

Categories:

Power Apps Pro Dev & ISV