PCF Binding Lookup.Simple field or workaround?

[Anonymous]

Hi,

I am currently trying to implement an Address Auto Completion Control.

As probably most users, we created our own entity "Country".

I would like to populate the Country lookup field on the front-end so the user can see the populated address.

I've started updating the account record using the WebApi with the lookup value and this works fine. But of course the user would have to refresh the page to see the change, which is not optimal.

I've seen this video of @AndrewButenko where he talks about enabling the Lookup as a bound property.

https://www.youtube.com/watch?v=NEQtbfQrAMU

I can build and upload my control, but I don't get it working - but also don't get an error.

I am using the Bing Address Completion Control from the pcf.gallery:

https://pcf.gallery/bing-address-autocomplete/ 

This is some code snippets.

I am just trying to set the lookup to to some static value, to check if in theory it could work.

Thanks for any help!

Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
	callback: () => {
                    var options = {maxResults: 5};
                    var manager = new Microsoft.Maps.AutosuggestManager(options);
                    manager.attachAutosuggest('#searchBox', '#searchBoxContainer', (suggestionResult) => {

                        _this.street = suggestionResult.address.addressLine;
                        _this.city = suggestionResult.address.locality;
                        _this.county = suggestionResult.address.district;
                        _this.state = suggestionResult.address.adminDistrict;
                        _this.country = suggestionResult.address.countryRegion;
                        _this.zipcode = suggestionResult.address.postalCode;
                        
                        _this.value = suggestionResult.formattedSuggestion || "";

                        _this.country_lookup[0].id = "{57916099-646b-e911-a828-000d3ab017db}"; 
                        _this.country_lookup[0].name = "Ireland";
                        _this.country_lookup[0].entityType = "dev_country";

                        _this.notifyOutputChanged();
                    });
                },
				errorCallback: () =>{alert("Error with loading of module Microsoft.Maps.AutoSuggest.");}
			});

}

private selectedSuggestion(suggestionResult: Microsoft.Maps.ISuggestionResult): void {
		
		alert(suggestionResult.formattedSuggestion);

		this.value = "";
		this.street = "";
		this.city = "";
		this.county = "";
		this.state = "";
		this.country = "";
		this.zipcode = "";
                this.country_lookup = [];

		this.value = suggestionResult.formattedSuggestion || "";
		this.notifyOutputChanged();
	} 


public getOutputs(): IOutputs {
        return {
            value: this.value,
            street: this.street,
            city: this.city,
            county: this.county,
            state: this.state,
            country: this.country,
            zipcode: this.zipcode,
            country_lookup: this.country_lookup
        };
    }

[ben-thompson]

Lookup fields are not supported within PCF components at the moment see the "Value elements that are not supported" section in https://docs.microsoft.com/en-us/powerapps/developer/component-framework/manifest-schema-reference/p...

[Serf1]

(different account, but still me)

I know that it is not officially supported.

But what is the workaround?

Can I bind the Lookup field somehow?
Can i get access to the formContext somehow?

IIRC it was supposed to be in the 2020 April update, do you know what the status is on this?

Thanks

[a33ik]

Hello,

First of all - thanks for watching my videos.

I did a quick research and potentially I know the reason why you have issue with lookup. Here is how lookup data structure should look like:

Try to reproduce this structure in your code.

[Serviced2000]

Hi @Anonymous / @Serf1 

I'm working on my firs PCF component too now and I think I may even be using the same how to guide as a platform and have run into the same issue, where we have Country and State as lookups and need to assign the correct returned value from the suggested address. Did you ever find a solution for this?

Thanks in advance!

[Anonymous]

Hi @Serviced2000 ,

it has been a while since then 😄

But I've just checked my code and it seems I only update the value afterwards using another JS or Workflow. But I am not doing it in my PCF JavaScript directly. The Autocompletion Object returns the ISO Code of a country which I am binding to a regular text field. As we also have this column in our Country Table, this can be used to then lookup the correct country. 

But, since when I asked this, Lookups should officially be supported in bindings, so I hope this is now easier!

I haven't dealt with PCF since then, so I cannot help you, but there are probably some other tutorials around:

https://butenko.pro/2021/03/21/pcf-lookup-attribute-lets-take-look-under-the-hood/

https://dianabirkelbach.wordpress.com/2021/06/19/lookup-pcf-lets-dive-deeper/

Cheers