Welcome to deBUG.to Community where you can ask questions and receive answers from Microsoft MVPs and other experts in our community.
1 like 0 dislike
in SharePoint Server by 29 37 42

In SharePoint 2019, I created a site column with Hyperlink data type and attached it to a content type, then I added the newly created URL Field to Page Layout to allow the end-user to add the link for his Twitter account URL and the value is displayed as expected!

URL Link in Page Layout SharePoint 2019

After Publishing my page I noticed that the Display Text URL and the Link is shown and working properly 

get only URL Link value in Page Layout in SharePoint

But the looking feel is not shown as desired, and I decided to use the Font Awesome icons to be shown instead of the Display Text Link. but I can't do that? I can't get value of hyperlink in Page Layout without the Display Text to set to HREF in the HTML Link tag.

URL Field in Page Layout

<SharePointWebControls:UrlField FieldName="b43af6c2-daf8-4906-b2fd-25b7ef00402e" runat="server"></SharePointWebControls:UrlField>

HTML A tag with Twitter Icon

<a href="#"><i class="fa fa-twitter"></li></a>

How can I set the Href value in the HTML tag to the hyperlink URL value in Page Layout in SharePoint Server?

1 Answer

1 like 0 dislike
by 155 174 351
selected by
Best answer

How to Get Hyperlink Value in Page Layout?

Generally, to display a SharePoint field value in SharePoint Page layout, you should use FieldValue instead of the Field Data Type as mentioned below:

Consider you have a SharePoint TEXT Field in your Page Layout, so

  • If you want to allow users to set Text Field value in your Page Layout, you just have to drag and drop it to your desired place in your page layout and the below tag will be generated automatically

      <SharePointWebControls:TextField FieldName="8b65324a-7d09-4851-88ae-5ad0b08573d5" runat="server"></SharePointWebControls:TextField>
  • However, If you want to get the Text FIeld value to be shown as Text, you have to use FieldValue as the following

      <SharePointWebControls:FieldValue FieldName="8b65324a-7d09-4851-88ae-5ad0b08573d5" runat="server"></SharePointWebControls:FieldValue>

    Just replace the TextField to FieldValue

  • The final Link element should look like

      <a href='<SharePointWebControls:FielddValue FieldName="8b65324a-7d09-4851-88ae-5ad0b08573d5" runat="server"></SharePointWebControls:FielddValue>' title="Twitter"><i class="fa fa-twitter"></li></a>

Unfortunately, this way is not worked as expected when you use the HyperLink Field Value with HREF parameter in A HTML tag!
So, in your case, if you are planning to show an icon instead of the displayed Text, so no need to use the Hyperlink field and I would suggest using TextField instead of the UrlField as above mentioned.

by 29 37 42
1 0
Yes, I tried the Hyperlink field but it's return the URL with description, and I applied your suggestion that worked like charm, Thank you!
If you don’t ask, the answer is always NO!