web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Insert a hyperlink in ...
Power Pages
Answered

Insert a hyperlink in form section label

(0) ShareShare
ReportReport
Posted on by 88

Hi

 

I would like to override a form's section label with text containing hyperlinks.

I'm not sure if this would be achieved through content snippets, javascript, metadata or combination.

What are the steps to do so?

Thanks in advance.

Cris

Categories:
I have the same question (0)
  • Community Power Platform Member Profile Picture
    Microsoft Employee on at

    Hi  this should be fairly straight forward. Depending on the form, you'll be able to find the webtemplate or snippet that sets the section and then create your own. This can be dynamic and data led too. As an example from one of my pages:

    <h2><a title="Link to Report Name" href={{ reports_marker.url }}?id={{item.publishingreference.id}}>{{item.organisationid.name}} (Ref: {{item.publishingreference.name}})</a></h2>

    where the base URL is set as a sitemarker (reports_marker), the GUID is brought in dynamically from the item record, and the label too is built from different fields in the item record. Wrap the whole lot in <a/> and away you go. 

     

    Let me know if this helps

     

    Ralph

    @Cris2

  • Cris2 Profile Picture
    88 on at

    Thanks Ralph, Currently we have a single template for all web pages. The section label contains both text and a hyperlink embedded. 

    I created a html content snippet with the text and anchor (<a></a>) for the hyperlink. How do I use this in the portal mgmt app? Should I add a javascript in Advance form step -> form options tab -> custom javascript? 

    Please provide me with a sample javascript.

    Thanks

  • Community Power Platform Member Profile Picture
    Microsoft Employee on at

    Hi @Cris2 

    From what you've described (and I may be missing something) there's no need to use JS for this. You can add the snippet as a liquid reference (see below) straight into your template/html.

    {% include SNIPPETNAME %}

     

  • Cris2 Profile Picture
    88 on at

    Hi Ralph

    I inserted the below line with the snippet name in the web page template via cod editor, saved and sync configuration, but no luck. It is not showing up on the web page. Kindly advice where I have gone wrong.

    {% include SNIPPETNAME %}

     Thanks

  • Verified answer
    OOlashyn Profile Picture
    3,496 Most Valuable Professional on at

    Hi @Cris2,

    The section title is presented on the page as a legend HTML tag. Unfortunately, the tag on the page doesn't have any sort of id attribute so we will need to trick it around. For this, we can use data-name attribute of the underlying table (which is a name of the section from dataverse form) 

    OOlashyn_0-1631218293615.png

    We can get the table by data-name attribute, then it's parent and from there get a legend from the direct children list of that element. After that you can insert whatever link you need via html function:

    $( document ).ready(function() {
     $("table[data-name='tabGeneral']").parent().children("legend").html("<a href='#'>Test</a>");
    });
    

    You need to insert this code to the Custom Javascript field of Additional settings of your form.

  • Cris2 Profile Picture
    88 on at

    Hi

    I found out the data-name and inserted the below script in Advanced Form Step -> Form Options -> Customer Javascript&colon;

     

     

    $(document).ready(function() {
    $("table[data-name='tab_8_section_1']").parent().children("legend").html("<a href='#'>Test</a>");
    });

     

     

    On save gave me a script error:  

    One of the scripts for this record has caused an error. For more details, download the log file.

    Cannot read properties of null (reading 'Xrm')

    Session Id: d8d3cf0c-dd03-446d-8a72-c1b4c4d31a7c

    Correlation Id: 3e376a06-e27f-498e-b845-123f0c0ed34b

    Event Name: onsave

     

    Also, instead of '.html("<a href='#'>Test</a>")', I would want to use content snippet.

     

    Thanks

     
  • Verified answer
    Cris2 Profile Picture
    88 on at

    Hi 

     

    I had replaced some " with ' and it worked. Thanks for your help with detailed explanation. Much appreciated!

     

    Thanks 

    Cris

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Leaderboard > Power Pages

#1
Suriyanarayanan V Profile Picture

Suriyanarayanan V 45

#2
oliver.rodrigues Profile Picture

oliver.rodrigues 14 Most Valuable Professional

#3
DP_Prabh Profile Picture

DP_Prabh 13

Last 30 days Overall leaderboard