Record Viewer and Schema Editor

Introduction

What is the Schema Editor?

The Schema Editor in Octostar is a tool that enables administrators to modify or create schemas and their UI configurations for various concepts, such as Person, Animal, Vehicle, etc. It uses react-jsonschema-form to generate forms based on JSON Schema standards, allowing customization of both data structure and user interface (UI).

Why is it Important?

• Customization: Tailor the form fields to specific requirements, including validation rules.
• Visualization: Control how the data is displayed and edited in the Record Viewer and Record Editor.
• Inheritance: Efficiently manage fields inherited from parent concepts in the ontology.

Record Viewer and Record Editor

The Record Viewer and Record Editor are the interfaces where users view and modify the information for a particular record. Fields in these interfaces are generated based on the schema and UI configuration defined for the concept. This ensures that data is presented and validated consistently.

• Record Viewer: Displays data fields in a read-only format.
• Record Editor: Allows editing of the data fields defined in the schema.

Key Features

• Dynamic Forms: Automatically generated based on the schema.
• Validation: Field values are validated according to the rules defined in the schema (e.g., minimum and maximum values for numbers).
• Customization: Fields and UI components (e.g., widgets) can be customized to match the use case.


Schema Editor

When Would You Use It?

You will use the Schema Editor when:

• Creating new schemas for a new concept.
• Modifying existing schemas to update fields or validation rules.
• Customizing the form's UI for an improved data entry experience.

The Schema Editor is particularly useful for administrators who need to control how data is displayed and validated for different types of records.

Structure of the Schema Editor

The Schema Editor has three main tabs:

1. Schema Tab: Define the data structure and validation rules for the concept.
2. Schema UI Tab: Customize how the fields are displayed, which widgets are used, and manage layouts.
3. Preview Tab: Provides a live preview of how the form will appear in the Record Viewer and Editor.


Schema Tab

• Define fields: You can add, modify, or remove fields from the concept's schema.
• Set validation: Specify validation rules such as required, minimum, maximum, and acceptable values.
• Manage inheritance: If the concept inherits fields from parent concepts (e.g., Person inherits from Actor), those fields are listed and can be modified.

Schema UI Tab

• Widgets: Customize how fields are presented by assigning widgets (e.g., date pickers, number sliders).
• Field visibility: Choose to show or hide specific fields based on your needs.
• Responsive design: Configure how fields are displayed on different screen sizes (e.g., setting column widths for large screens).

Preview Tab

• Live preview: Shows a real-time preview of how the form will look and behave in both the Record Viewer and Record Editor.
• Test functionality: Ensure validation rules and UI configurations work as expected.

Left Sidebar

The Left Sidebar provides a list of all fields associated with the concept, including fields inherited from parent concepts like Actor or Legal Person. You can easily add or remove fields, making management of complex schemas intuitive and efficient.

How to Use the Schema Editor

Step-by-Step Guide

1. Access the Schema Editor: Navigate to the Schema Editor for the concept you wish to modify.
2. Select a Concept: Choose the relevant concept, such as Person.
3. Edit the Schema:
   • Go to the Schema Tab to add or modify fields.
   • Set validation rules like required fields, minimum/maximum values, or custom validation logic.
4. Customize the UI:
   • Go to the Schema UI Tab to adjust field layout and assign widgets.
   • Customize field visibility and presentation.
5. Preview the Changes:
   • Switch to the Preview Tab to ensure your changes are reflected as expected.
6. Save the Configuration: Click "Save All" to store the updated schema and UI configurations in the config folder.


Effect of Customizing the Schema

• Improved Data Integrity: Validation ensures that only correct and valid data can be entered.
• Enhanced User Experience: Custom widgets and layouts make data entry smoother for end-users.
• Consistent Data Structure: By defining schemas, data across the system will adhere to a common structure, improving efficiency.

Inheritance in the Schema Editor

How Inheritance Works

In Octostar's Schema Editor, concepts are structured hierarchically within an ontology, allowing child concepts to inherit fields from their parent concepts. This means that when you work with a child concept like Person, it automatically includes fields from its parent concepts such as Actor and Legal Person.

• Parent Concepts: Define common fields that are shared across multiple child concepts.
• Child Concepts: Inherit these fields but can also have their own unique fields.

Customizing Inherited Fields

Even though fields are inherited, you can customize them specifically for each child concept without affecting other concepts. This allows you to:

• Set Specific Validation Rules: Define unique validation constraints for the same field in different concepts.
• Adjust Field Presentation: Change how the field appears in the UI for each concept, including widgets and visibility.
• Override Field Properties: Modify properties like default values, descriptions, or help texts.

Example Scenario

Suppose both Person and Animal are child concepts of Actor and inherit a field called age. You may want to customize this field differently for each concept:

• For Person:
  • Validation: Set age with a minimum of 0 and a maximum of 120.
  • UI Widget: Use a standard number input field.
• For Animal:
  • Validation: Set age with a minimum of 0 and a maximum of 50.
  • UI Widget: Use a slider widget for more intuitive input.

By customizing the age field in each concept's schema:

• Inheritance is Respected: The field is still recognized as part of the inherited structure.
• Concept-Specific Rules: Each concept enforces validation rules appropriate for its context.
• Independent Customization: Changes in the age field for Person do not impact the age field for Animal, and vice versa.

Additional Resources

• React JSON Schema Form Documentation
• JSON Schema Reference
• React JSON Schema Form Playground