HTML Text Comparator

Thiago Pereira
Tera Contributor

‎04-27-2023 01:12 PM

Hi!

I have a complicated issue with my client.
I need to develop a tool to compare HTML text fields.
In contact with ServiceNow, we were instructed to use the existing comparator in Design Builder. Unfortunately when using this solution we come across errors. In addition to not working for all types of customizations that the text can have, the comparator does not load sometimes (intermittent error).
Given this problem, we decided to create our own solution using the "Diff Match Patch" library. After some tests we verified that some errors continue to occur, here are some:
- Does not show when images are inserted or removed;
- Does not show difference between text styles;
- Does not identify tables.

I would like to know if anyone has already developed a similar solution or if you have any idea how I can proceed?

Preview file
922 KB
0 Helpfuls
  • 1,635 Views
1 REPLY 1

Punit S
Giga Guru

‎04-27-2023 04:38 PM

To create an HTML compare tool in ServiceNow that shows images, text styles, and tables, you can use the following steps:

  1. Create a custom UI page or widget in ServiceNow to display the HTML comparison tool.

  2. Use JavaScript to extract the HTML elements from the text fields you want to compare. You can use the DOM methods in JavaScript to parse the HTML and extract the elements you want to compare.

  3. Create a function in JavaScript to compare the HTML elements from each text field. This function should compare each element and identify any differences in formatting, style, or content. For example, you can use regular expressions to compare the style attributes of the HTML elements or compare the content of the elements.

  4. Generate a report of the differences between the HTML text fields. You can create a custom UI element in your UI page or widget to display the differences in a user-friendly way. For example, you can use color coding or other visual cues to highlight the differences between the HTML text fields.

  5. Include support for images and tables in your comparison tool. To compare images, you can extract the source URLs of the images from the HTML and compare them. To compare tables, you can extract the HTML code for each table and compare them using the same comparison function used for other HTML elements.

  6. Test your HTML comparison tool thoroughly to ensure it works as expected. You may need to refine your comparison function to handle specific edge cases or custom HTML formatting.

 

A content management company - one of my customer from the past - wanted to provide a better experience for their users when managing website content using ServiceNow as enabling tool . They had a team of content editors responsible for updating web pages, and they needed a way to quickly identify changes made to a web page's HTML code, which could be hundreds or thousands of lines long.

To address this need, the company developed an HTML comparison tool that could compare two versions of a web page's HTML code and highlight any differences. This in house product we created on top on NOW  was integrated into the company's content management system, allowing content editors to easily compare the current version of a web page with a previous version.

Using the HTML comparison tool on NOW , content editors could quickly identify changes made to the HTML code, such as the addition or removal of images, changes to text styles, or modifications to tables. This enabled them to easily identify errors or inconsistencies in the HTML code, which could be corrected before the changes were published to the live website.

Overall, the HTML comparison tool helped the content management company to improve the efficiency and accuracy of their content editing processes, resulting in a better experience for their users and a more streamlined content management system.

 

Overall, creating an HTML comparison tool in ServiceNow can be a complex task that requires a strong understanding of JavaScript and HTML. It may be helpful to work with a ServiceNow partner or consultant who has experience developing custom solutions in HTML comparisons  for ServiceNow.

 

Please mark my answer as a solution/helpful in case it adds value and moves you a step closer to your desired ServiceNow solution goal.

Thanks,
Punit

0 Helpfuls