Answered

Hyperlink in PCF field value using Fabric UI in Model Driven App

(0) Share

Report

Posted on by TomPhillips

Hey All,

I'm hoping someone can point me in the right direction. I have a PCF on a form displaying fields from an unrelated record in a Model Driven App. This is working as expected but i'd like to enhance it by adding a Hyperlink for lookup fields.

I'm using the Fabric UI, and currently have Lookup field values rendering as a TextField, I'd like to change these so they're Hyperlinks so that the user can click them to access the record.

So far I've tried:

- Adding a href to the 'value =' component of a text field. Unable to add as only sting values accepted

- Using the Link control, this displays a hyperlink but not as a field i.e. with a label and value

Any pointers would be much appreciated.

All responses (2)

Answers (1)

Verified answer

Ben Thompson 1,400 on at

Like (1)

Report

Re: Hyperlink in PCF field value using Fabric UI in Model Driven App

The other comment I would make is that you don't want to create a hyperlink with a URL. You really should bind an onClick event to the text and use the Xrm.Navigation.NavigateTo javascript to generate the url and take users to the appropriate page as that ensures the navigated page

1) remains within the current user's current app (amongst other benefits)
2) would allow you to use a modal pop-up if it was more appropriate.
cchannon 4,702 Super User 2025 Season 1 on at

Like (0)

Report
Re: Hyperlink in PCF field value using Fabric UI in Model Driven App

Instead of Text Field, you want to use the Fluent UI React element, "Link"

...From the FluentUI documentation:
import * as React from 'react'; import { Link } from 'office-ui-fabric-react/lib/Link'; export const LinkBasicExample: React.FunctionComponent = () => { return ( <div> <p> When a link has an href,{' '} <Link href="https://developer.microsoft.com/en-us/fluentui#/controls/web/link"> it renders as an anchor tag. </Link>{' '} Without an href, <Link>the link is rendered as a button</Link>. You can also use the disabled attribute to create a{' '} <Link disabled={true} href="https://developer.microsoft.com/en-us/fluentui#/controls/web/link"> disabled link. </Link> </p> <p> It's not recommended to use Links with imgs because Links are meant to render textual inline content. Buttons are inline-block or in the case of imgs, block. However, it is possible to create a linked image button by making a button with an unstyled variant and adding the img content and href source to that. </p> </div> ); };