VSM JSON code editor

The code editor allows you to directly edit the value stream JSON file from the UI.

About this task

Use the online code editor to edit value stream JSON files. Starting with HCL DevOps Velocity (Velocity) version 3.0, you no longer need to download the JSON and edit a local copy. Now you can edit value stream JSON files within the product web interface. On the Value Streams page, use the VSM JSON code editor to edit and save the value stream workflow file. In code view, the editor allows you to perform the following:
  • Create new versions
  • Edit versions
  • Review versions
  • Import and download versions
  • View JSON file contents including creator, version number, and date created
Additionally, you can format, compact, repair JSON data, and save with overwrite protection for simultaneous user editing scenarios.


  1. On the Value Streams page, click the required value stream.
  2. Click value stream configure and select Edit value stream map to open the VSM JSON code editor.

    The JSON code editor is shown in the figure below.

    Figure 1. JSON code view
    JSON tree editor
    Note: The JSON code editor is the default view mode when you open the editor.
    Note: In the Version history table on the right side of the display, the current version of the JSON shown on the left side of the display is indicated by a vertical blue bar next to the Version field in the table and is the file displayed and open in the editor.
    Note: The icons on the left side of the display above the editor include the following:
    • Click Format JSON data to format the JSON data with proper identification and line feeds.
    • Click Compact JSON data to compact the JSON data by removing all whitespaces in the JSON file.
    • Click Repair JSON to repair the JSON file including fixing quotation marks and escape characters, removing comments and JSON with padding (JSONP), and converting JavaScript objects into JSON.
    • On the right of the Repair JSON icon above the code editor, you can click and select the Code or Tree view drop-down to choose between a plain text editor or a user-friendly editor respectively.
      Note: When you select Edit value stream map to open the editor, the editor is always opened in Code view by default.

  3. To import, download, view, and edit a JSON file in the editor, perform either of the following:
    • Click Import JSON, select the JSON file, and click the Open button.
      Note: The file is opened and displayed in the editor.
    • On the right side of the display above the Version history table, click Download JSON to download the latest JSON file revision shown in the Current version field above the creator.
      Note: Above the Version history table, you can view detailed information for the latest JSON file with fields including Current version, creator, and file creation day, date, year, and time.
    • In the Version history table with fields including Version, User, Date modified, and Actions, locate the required JSON file version and in the Actions field, click overflow menu and select either View code or Download according to your requirement.
      If you want to use a previous version JSON file as the current version, perform the following:
      • In the Version history table, click overflow menu for the required previous version and select Download.
      • Click Import JSON and navigate to the downloaded file.
      • Click Open.
      • Click Save.
        Note: After a JSON file is successfully saved, you cannot revert the changes that were made prior to saving the file. If you want to use a previous version JSON file as the current version, use the aforementioned procedure.
      At the bottom of the Version history table, you can perform and view the following:
      • In the items per page drop-down, you can select 10, 20, 50, or 100 as the number of items to display per page in the Version history table.
      • View number of items listed in the table versus total number of items. For example: 1-3 of 3 items.
      • View page number versus total number of pages.
      • View the page number currently displayed in the Version history table and click < or > to go to the previous or next page respectively.

  4. To create a query, click DQL Builder and then DQL Builder window appears. Type the query in search field and select the required one from the list to create query. After creating query, click Test to view results for the selected query. Click copy to copy the created query. You can use the copied query in JSON code or tree editor.
  5. On the left side of the display in the file editor, perform the required editing in the file and click Save to capture your changes.
    Note: If you make any changes before saving the file, you can click Revert to undo all your changes.
    When you click Save, a notification is displayed containing one of the following messages:
    • If all the changes you made to the JSON file are validated when saved, a Success notification with a vertical green bar is displayed upon completion.
    • If an error is associated with the file, a notification with a vertical red bar is displayed with either of the following information:
      • The source of error.
      • Selected file type is not supported.

  6. Overwrite protection provides visibility to users that attempt to simultaneously edit the same workflow. The following example details the procedure for two users simultaneously attempting changes to the same file. User 1 creates and saves version 78 by editing version 77 and User 2 edits version 77 and attempts to save the file with the result of displaying the OVERWRITE PROTECTION Confirm changes? Users have made 1 new version since loading this page. Do you want to overwrite the latest changes? modal prompting to click either the View latest changes or Confirm buttons detailed in the following table:

    View latest changes Modal closes and refreshes the Version history table with new saved version 78 and the text editor displays the changes made by User 2 for this example.
    Confirm Saves the changes to version 77 and selects the same version in the Version history table for this example.

What to do next

Documentation for the VSM JSON tree editor is found here.