Get URL Field Value in Page Layout SharePoint 2019

Question

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!

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

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?

Answer 1

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:

Example:
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.

Comments

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!