Insert a hyperlink in form section label

[Cris2]

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

[RalphyC]

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]

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

[RalphyC]

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]

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

[OOlashyn · Accepted solution]

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) 

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]

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

[Cris2 · Accepted solution]

Hi 

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

Thanks 

Cris