[Proposal] Develop VS Code Extension/Tool for Handling Ballerina EDI Schema

[RDPerera]

Summary

As Ballerina gains traction in the integration space, there's a growing need for developers to efficiently work with Electronic Data Interchange (EDI) schemas and files within Ballerina projects. Currently, managing EDI schemas and files in Ballerina projects can be cumbersome, requiring manual handling and no visual tooling support.

To address this need, I propose the development of a Visual Studio Code (VS Code) extension specifically designed to streamline the management and manipulation of Ballerina EDI schemas.

1. Graphical Schema Editing: Incorporate a graphical interface within VS Code for easy and intuitive editing of Ballerina EDI schemas. This feature will enable developers to visually manipulate EDI segments, field definitions, components, subcomponents, and additional configuration options., simplifying the schema design process.

2. Syntax Highlighting: Implement syntax highlighting support for Ballerina EDI schemas (.json files) ], making it easier for developers to distinguish between different EDI elements and structures.

3. Validation and Error Highlighting: Implement validation checks to identify syntax errors and inconsistencies in Ballerina EDI schemas in real-time. Highlight errors and provide actionable suggestions to help developers resolve issues efficiently.

Implementation Plan:

1. Conduct research to identify existing VS Code extensions/Tools and libraries that can serve as a foundation for developing the proposed features.
2. Define the architecture and design of the VS Code extension/Tool, considering factors such as modularity, extensibility, and compatibility with future Ballerina releases.
3. Implement core features such as graphical schema editing, syntax highlighting, and validation support for Ballerina EDI schemas and files.
4. Publish the extension to the VS Code Marketplace and promote it through relevant channels to reach the target audience of Ballerina developers.

[RDPerera]

These are some schema editors I found,

Application Name	Screenshot	Code Editor	Physical Editor	Logical Editor	Split Code/Diagram View	License
Altova XMLSpy	screenshots	✅	✅	✅		proprietary
Eclipse XSD Editor (eclipse.org)	screenshots	✅	✅	Limited Editing		free software
IntelliJ "XSD / WSDL Visualizer" Plugin	Short Introductory on Youtube screenshots	✅		Limited Editing	✅	proprietary
jEdit XML Plugin	screenshot 1 screenshot 2	✅	✅		✅	free software
Liquid XML Studio	screenshots	✅	✅	✅	✅	proprietary
Oxygen xml	screenshots	✅	✅	✅	✅	proprietary
Stylus Studio	screenshots	✅	✅	✅	✅	proprietary
XML Fox - Freeware Edition	screenshots		✅			proprietary
Eclipse Data Types (XSD) Editor	Short Introductory on Youtube screenshots	✅	✅			free software
XMLSeed	screenshots	Read Only	✅	✅	✅	proprietary
CAM editor open source tool	screenshots		✅	✅		free software

[RDPerera]

The basic outline of how the graphical editor could be designed:

1. Main Interface:

   • The main interface should provide options for creating, opening, saving, and validating schema files.
   • It should have a central area where users can visually design their EDI schema.

2. Schema Structure Panel:

   • On the left or right side of the interface, there should be a panel displaying the hierarchical structure of the schema.
   • Users can navigate through segments, fields, components, and sub-components using a tree-like structure.
   • Each node in the tree represents a segment, field, component, or sub-component, and users can add, delete, or modify these elements.

     

3. Segment Editor:

   • When a segment is selected in the schema structure panel, its details should be displayed in an editor panel.
   • Users can view and modify the segment's code, tag, minimum and maximum occurrences, and the fields it contains.
   • They can add, delete, or rearrange fields within the segment.

4. Field Editor:

   • Similarly, when a field is selected, its details should be shown in the editor panel.
   • Users can edit the field's tag, data type, length constraints, and whether it's required or repeatable.
   • For composite fields, users can define the components and their properties.

5. Component/Sub-component Editor:

   • When a component or sub-component is selected, its details should be displayed in the editor panel.
   • Users can edit the component's tag, data type, and whether it's required.
   • For sub-components, users can define further sub-components if applicable.

6. Delimiter Configuration:

   • Provide a separate panel for configuring delimiters.
   • Users can specify the segment, field, component, and repetition delimiters using input fields.

7. Additional Configuration Panel:

   • Include an area where users can set additional configuration options such as ignored segments, preservation of empty fields, and inclusion of segment codes.
   • Users can toggle these options on or off and provide necessary input.

8. Validation:

   • Implement validation mechanisms to ensure that the schema adheres to the specification.
   • Highlight any errors or inconsistencies in the schema and provide feedback to the user.

9. Toolbar and Menus:

   • Include a toolbar with icons for common actions like adding segments, fields, components, etc.
   • Provide menus for accessing additional functionalities such as file operations, schema validation, and configuration settings.

10. Preview Mode:

    • Offer a preview mode where users can see how the schema will look in JSON format.
    • This mode should display the JSON representation of the schema based on the user's input and modifications.

Sketch for the proposed design

[RDPerera]

Sketch for the proposed design for editors

Segment Editor

Feild Editor

Delimeter Editor