Navigate to Model Driven App record using Fluent UI 'Link Component on PCF

(0) Share

Report

Posted on by TomPhillips

Afternoon,

I'm hoping someone can point me in the right direction.

I have a PCF in a Model Driven app that displays fields from an unrelated record. The fields display correctly but i'm trying to recreate the experience of a lookup field. So far I have been able render the below using the 'Link' component in the Fluent UI, which looks correct but the link itself currently doesn't lead anywhere :).

Below is the snipping of the typescript being used to display this.

I'd like to get this URL to lead directly to the record that is selected in the lookup. In the index.ts I am getting the EntityName, Name & ID that can be used. I'd like to make it dynamic to the environment its present in so i'm not hardcoding the org and app id.

I'm thinking I could call 'Xrm.Navigation.openForm' using these values in the '<Link' but have been unable to add anything but a string value.

Any help or pointers would be much appreciated.

Thanks!!!

All responses (4)

Answers (1)

ShishirG 7 on at

Like (0)

Report

Re: Navigate to Model Driven App record using Fluent UI 'Link Component on PCF

@TomPhillips , I am new to PCF, and I want to create the same PCF that you created, so could you please provide me the solution file and the PCF code?
It will really helpful for me.
Thanks in advance
TomPhillips 17 on at

Like (0)

Report

Re: Navigate to Model Driven App record using Fluent UI 'Link Component on PCF

@v-xida-msft Thank you very much, that is excellent information and worked correctly!
Verified answer

v-xida-msft on at

Like (1)

Report
Re: Navigate to Model Driven App record using Fluent UI 'Link Component on PCF

Hi @TomPhillips ,

Do you want to open a selected record from the LookUp directly when you press the Link control?

If you want to open a selected record from the LookUp directly, I agree with @OOlashyn 's thought almost. I think the

context.navigation.openForm(options, parameters)

method could achieve your needs.

Based on the needs that you mentioned, I think the URL inside your <Link> control could not achieve your needs. Please take a try with the following workaround:

1. Define a function in your TypeScript code:

private _onColumnClickView(event) { context.navigation.openForm( { entityName: "xxx", entityId: "xxx guid value xxxx", openInNewWindow: false, windowPosition: 1 } ) }

Note: Replace the 'xxxx' with actual value required for the attributes within the context.navigation.openForm() function.

2. Add a onClick event to your <Link> control, modify your Link control as below:

<Link onClick={this._onColumnClickView.bind(this)}> {this.grabValueFromFieldDefinition(this.state.fieldDefinition)} </Link>

Please consider take a try with above solution, then check if the issue is solved.

More details about launching a form using Client API in PCF project, please check the following article:

https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/navigation/openform

Best regards,
OOlashyn 3,496 Most Valuable Professional on at

Like (2)

Report

Re: Navigate to Model Driven App record using Fluent UI 'Link Component on PCF

Hi @TomPhillips ,

You need to call context.navigation.openForm to open a form for the specified record in PCF. You can find documentation here.