When updating existing documents or conducting repetitive tasks such as website updates, creating contracts, or reviewing code, the review process can proceed more efficiently if the changes are clear.
This article introduces a sample that uses decoration (HTML / JavaScript) on the processing form screen to display the difference between two String-type data items. Questetra Form JavaScript API is used to refer to the value of the data item.
Display Differences in String-type Data Items (diff)
This is a sample that gets the input values of two String-type data items (input 1 [q_input1], input 2 [q_input2]), calculates and displays the difference (diff). If there is a difference in the input text, the part with the difference will be highlighted as shown in the following image.
Prepare a Guide Panel-type data item and copy and paste the sample code below into the “Description” field to try it out. Note that in this example, the data items “Input 1” and “Input 2” are editable, but it will work even if one or both are display only. Also, please set the Guide Panel-type data item into which you entered the code to display only.
Sample Code
<script src="https://cdn.jsdelivr.net/npm/diff@7.0.0/dist/diff.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/diff2html@3.4.48/bundles/js/diff2html-ui.min.js"></script>
<script>
qbpms.form.on('ready', () => {
// Add style specification by link tag (forcefully) in the head tag
const addLinkTag = () => {
const linkTag = document.createElement('link');
linkTag.rel = 'stylesheet';
linkTag.href = 'https://cdn.jsdelivr.net/npm/diff2html@3.4.48/bundles/css/diff2html.min.css';
document.head.appendChild(linkTag);
};
addLinkTag();
const drawDiff = () => {
const input = qbpms.form.get('q_input1');
const target = qbpms.form.get('q_input2');
const unifiedDiff = Diff.createPatch("Input 1/Input 2", input, target);
const targetElement = document.getElementById('q_diff');
const diff2htmlUi = new Diff2HtmlUI(targetElement, unifiedDiff, {
outputFormat: 'side-by-side',
matching: 'lines',
drawFileList: false,
fileListToggle: false,
fileContentToggle: false,
});
diff2htmlUi.draw();
};
drawDiff();
qbpms.form.on('change', 'q_input1', drawDiff);
qbpms.form.on('change', 'q_input2', drawDiff);
});
</script>
<div id="q_diff"></div>Utilized Libraries
This sample uses the following two (external) libraries.
jsdiff
Calculates the difference between texts and outputs it in UnifiedDiff format.
Diff computation is complex in depth, and jsdiff is a lightweight library. It is not very good at calculating the diff for large texts.
If the output is in UnifiedDiff format, it can be processed using the following diff2html, which can be replaced by other libraries such as diff-match-patch.
diff2html
It takes the diff in UnifiedDiff format and displays it in HTML.
- diff2html: https://diff2html.xyz/
Demo Video
Appendix: What is Decoration?
Decoration is a feature that app designers can use to make forms more user-friendly for processors.
If you set a description for the data item, it will be displayed as a note at the bottom of the input form. Since you can set not only plain text but also HTML and JavaScript, you can implement various ideas to improve work efficiency, such as emphasizing business-related notes, displaying URL links to related sites, and displaying an input character counter.
In this article, we use Questetra Form JavaScript API (available in Professional Edition) to get the value (text) entered in String-type data items. This article is intended for those who can use Questetra Form JavaScript API, so if you have not used it yet, you can easily understand the sample code by studying the following documents.
Basic usage of Questetra Form JavaScript API