{"id":25089,"date":"2020-10-12T11:04:53","date_gmt":"2020-10-12T11:04:53","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=25089"},"modified":"2020-10-12T12:50:36","modified_gmt":"2020-10-12T12:50:36","slug":"add-hyperlink-programmatically-in-the-note-body","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/10\/add-hyperlink-programmatically-in-the-note-body\/","title":{"rendered":"Add Hyperlink Programmatically in the Note body within Dynamics 365"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p style=\"text-align: justify;\">We know that Notes description is now <strong>Rich Text<\/strong> type, so it can support a wide range of formatting.<\/p>\n<p>Recently we had a requirement to add a hyperlink in the note body. But, while doing this we faced one issue -by just wrapping the link in an anchor tag we were not able to make the text clickable.<\/p>\n<p>We had to make the below link clickable.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-1.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-25090 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-1.png\" alt=\"Add hyperlink programmatically in the Note body\" width=\"412\" height=\"240\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-1.png 412w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-1-300x175.png 300w\" sizes=\"(max-width: 412px) 100vw, 412px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Initially, we just wrapped the link in an Anchor text and thought this should make it clickable. However, we saw that instead of making it clickable, the entire content is getting added in plain text as shown in the below screenshot.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-2.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-25091 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-2.png\" alt=\"Add hyperlink programmatically in the Note body\" width=\"486\" height=\"340\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-2.png 486w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-2-300x210.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-2-200x140.png 200w\" sizes=\"(max-width: 486px) 100vw, 486px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">In order to resolve this issue, we figured out that we need to wrap our HTML content within a div tag and then add it in the Note body.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-3.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-25092 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-3.png\" alt=\"Add hyperlink programmatically in the Note body\" width=\"486\" height=\"340\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-3.png 486w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-3-300x210.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-3-200x140.png 200w\" sizes=\"(max-width: 486px) 100vw, 486px\" \/><\/a><\/p>\n<p>So to solve this we needed to add an anchor tag with div as follows:<\/p>\n<blockquote><p>note[&#8220;notetext&#8221;] = &#8220;&lt;div data-wrapper=&#8217;true&#8217; style=&#8217;font-size:14px;font-family:&#8217;Segoe UI&#8217;,&#8217;Helvetica Neue&#8217;,&#8217;sans-serif&#8217;;&#8217;&gt;&lt;div&gt;&lt;a href='&#8221; + link + &#8220;&#8216;\u00a0 target=&#8217;_blank&#8217;&gt;'&#8221; + name + &#8220;&#8216;&lt;\/a&gt;&lt;\/div&gt;&lt;\/div&gt;&#8221;;<\/p><\/blockquote>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-4.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-25093 size-full\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-4.png\" alt=\"Add hyperlink programmatically in the Note body\" width=\"439\" height=\"309\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-4.png 439w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-4-300x211.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/10\/Add-hyperlink-programmatically-in-the-Note-body-4-200x140.png 200w\" sizes=\"(max-width: 439px) 100vw, 439px\" \/><\/a><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p style=\"text-align: justify;\">By using the workaround of wrapping HTML content within a div tag and then adding it in the Note body, hyperlinks can be added programmatically in the Note body<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction We know that Notes description is now Rich Text type, so it can support a wide range of formatting. Recently we had a requirement to add a hyperlink in the note body. But, while doing this we faced one issue -by just wrapping the link in an anchor tag we were not able to\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2020\/10\/add-hyperlink-programmatically-in-the-note-body\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,18,19],"tags":[545,588,592,1258],"class_list":["post-25089","post","type-post","status-publish","format-standard","hentry","category-dynamics-365","category-dynamics-365-v9-2","category-dynamics-crm","tag-dynamics-365-crm","tag-dynamics-365-v9","tag-dynamics-crm","tag-notes"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/25089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=25089"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/25089\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=25089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=25089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=25089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}