cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Cris2
Helper II
Helper II

Insert a hyperlink in form section label

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

2 ACCEPTED SOLUTIONS

Accepted Solutions

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.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

View solution in original post

Hi 

 

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

 

Thanks 

Cris

 

 

View solution in original post

7 REPLIES 7
RalphyC
Helper I
Helper I

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

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

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 %}

 

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

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.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.

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

 

Hi 

 

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

 

Thanks 

Cris

 

 

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

Carousel News & Announcements 768460.png

What's New in the Community?

Check out the latest News & Events in the community!

MPP IDEAS updated 768x460.png

Ideas

Discover ideas and concepts from users like you for how to use Power Pages and take your work to the next level.

Users online (1,615)