Using The Comparison Utility

Overview

The Compare Utility allows users to compare the current version of an entity with any of its previous versions. This feature provides both a visual and a textual representation of the differences, helping users identify what has changed over time — whether it’s a configuration update, logic adjustment, or design modification.

Accessing the Compare Utility

Users can access the Compare Utility in two ways:

1. Right-click on an entity > Advanced > Compare [Entity] Versions.
2. Open the Designer Entity and click the Compare icon in the top action bar.

Graphical Compare

Once opened, the Compare Utility displays two side-by-side panels:

• The left panel displays the most recently saved version.

• The right panel shows the current saved version of the entity.

The default view is the Graphical compare. From this screen, users are provided the option to select each of the two desired versions for comparison via the two drop-down menus on the top Action bar. Selecting two different versions visually represents the differences and similarities between each Flow's steps and their respective connections.

These steps and paths are color-coded as follows:

Disable Sync Zooming and Panning

By default, zooming, panning, and scrolling are synchronized across both comparison screens. Users can disable this behavior by unchecking the Sync Zoom/Pan option in the header, allowing each screen to be zoomed and panned independently.

Drill down into Steps

Selecting any step or connector opens a textual comparison dialog that displays detailed information specific to that step, allowing users to closely review changes at a granular level.

Textual Compare

In addition to the visual comparison, users can also switch to a Textual Comparison view by selecting the TEXTUAL toggle. This view provides a structured, text-based breakdown of differences between versions, making it easier to analyze detailed changes in configurations and logic. The table below highlights the evolution and expansion of the Textual Comparison feature across various releases.

Changes are categorized by type — Missing, Modified, Added, or Removed — and are visually distinguished using color codes. The legend has been relocated to the bottom of the screen for improved accessibility and consistency across designers. 

The textual comparison displays two primary nodes — Info and Data. The Info node captures overall Flow details, while the Data node highlights all configuration and logic changes made within the designer. By expanding the drop-down arrows, users can drill down to view detailed modifications. In the example below, the Flow name, Description, and multiple changes have been made to the Steps and connections, which are currently being reviewed.

To make reviewing changes faster and more efficient, the Compare Screen now opens by default with the last saved version compared to the current version, and both the Show Changes Only and Expand All toggles enabled.

• Show Changes Only filters the view to display only modified content, hiding all unchanged sections for a cleaner review experience.
• Expand All automatically expands every node, allowing users to see the full scope of changes without manually opening each section.

Ability to Navigate to Child Designer Entities from the Compare Screen

Users can open any referenced Designer Entity directly from the Compare Screen. For example, if a Flow references a Form and the user is viewing the Flow’s Compare Screen, the referenced Form’s ID will appear as a clickable link. Selecting this link takes the user directly to the referenced Form, making it easier to explore and understand all related sub-entities in context.

Form Designer Textual Comparison

The Compare action in the Form Designer allows users to review changes between form versions without opening or manually inspecting each saved version. The comparison opens in a Textual Comparison dialog and displays form changes in a structured JSON format.

The Compare action helps reviewers identify what was added, removed, modified, or missing between selected form versions.

Use Textual Comparison Options

The Textual Comparison dialog includes the following options:

• Show Changes Only: Displays only the form elements and properties that changed between the selected versions.
• Expand All: Expands all available sections in the comparison tree.
• Show Changes Only + Expand All: Displays only changed items and expands those changed sections so users can review all differences without opening each section manually.

JSON Comparison Structure

The Textual Comparison dialog displays form changes in JSON format. The comparison includes form data and configuration details from the Form Designer.

The JSON comparison captures changes for:

• Form surface
• Root containers
• Containers
• Controls added to the form
• Form control configuration

The comparison also includes property groups such as:

• Common
• Flex Size
• Data
• Label Properties

Change Color Coding

The comparison uses color coding to identify the type of change:

• Grey: Unchanged
• Purple: Modified
• Green: Added
• Red: Removed

These visual indicators help users quickly understand what changed between the compared versions.

Active Form Flow Details

When the form includes Active Form Flow information, the Compare view displays related details in the JSON structure. This may include metadata such as the Active Form Flow ID, name, and related configuration details.

This allows users to understand how Active Form Flow references changed as part of the form version comparison.