Code

This section provides comprehensive documentation for the Code component, which is used to input multi-line code snippets in various configurations. The component supports multiple properties such as fullscreen, language, size, and showSuggestions, among others, which enhance usability and functionality according to different requirements.

Configuration Schema

The JSON schema defines the structure for the Code component, outlining the options for customization:

[
    {
        "name": "codeSnippet",
        "meta": {
            "displayName": "Code Snippet",
            "displayType": "code",
            "placeholder": "Enter your code here",
            "description": "Please provide your code snippet.",
            "validation": {
                "required": true
            },
            "readOnly": true,
            "htmlProps": {
                "fullscreen": true,
                "language": "javascript",
                "size": "md"
            }
        }
    }
]

Example Configurations

Basic Configuration

{
    "name": "integrationName",
    "meta": {
        "displayName": "Integration Name",
        "displayType": "code",
        "placeholder": "Enter integration name",
        "description": "Add description here",
        "validation": {
            "required": true,
            "requiredDetail": {
                "errorMsg": "Integration name is required"
            },
            "infoDetail": {
                "infoMsg": "testing"
            }
        },
        "htmlProps": {
            "language": "plaintext",
            "size": "md",
            "showCopyToClipboard": true,
            "rightLabel": "right label",
            "showInfoIcon": true
        }
    }
}

Integration Name

right label

Enter integration name

Add description here

---

---

Form Data:

{}

Advanced Configuration with Fullscreen and Suggestions

{
    "name": "advancedCodeSnippet",
    "meta": {
        "displayName": "Advanced Code Snippet",
        "displayType": "code",
        "placeholder": "Enter advanced code here",
        "description": "Code snippet with suggestions and fullscreen view.",
        "validation": {
            "required": true
        },
        "htmlProps": {
            "fullscreen": true,
            "language": "javascript",
            "size": "md",
            "showSuggestions": true,
            "showCustomSuggestions": true,
            "showCopyToClipboard": true,
            "showInfoIcon": false,
            "rightLabel": "right item"
        }
    }
}

Advanced Code Snippet

right item

Enter advanced code here

Code snippet with suggestions and fullscreen view.

---

---

Form Data:

{}

Customizable Size and Language

{
    "name": "customSizeLanguageCodeSnippet",
    "meta": {
        "displayName": "Custom Code Snippet",
        "displayType": "code",
        "placeholder": "Customize your code",
        "description": "Customize the size and language of your code snippet.",
        "validation": {
            "required": true,
            "infoDetail": {
                "infoMsg": "this is information"
            }
        },
        "htmlProps": {
            "showCopyToClipboard": true,
            "language": "python",
            "size": "lg",
            "height": "500px",
            "showSuggestions": false
        }
    }
}

Custom Code Snippet

Customize your code

Customize the size and language of your code snippet.

---

---

Form Data:

{}

Developer-Friendly Code Snippet

{
    "name": "devFriendlyCodeSnippet",
    "meta": {
        "displayName": "Developer Friendly Code Snippet",
        "displayType": "code",
        "placeholder": "Write your script...",
        "description": "Ideal for developers with inline copy and code preview.",
        "validation": {
            "required": true,
            "infoDetail": {
                "infoMsg": "this is information"
            }
        },
        "htmlProps": {
            "fullscreen": true,
            "language": "html",
            "size": "md",
            "showCopyToClipboard": true,
            "showHtmlPreview": true,
            "height": "300px"
        }
    }
}

Developer Friendly Code Snippet

Write your script...

Ideal for developers with inline copy and code preview.

---

---

Form Data:

{}

Code Snippet with Custom Suggestions in a Textfield

{
    "name": "devFriendlyCodeSnippet",
    "meta": {
        "displayName": "Developer Friendly Code Snippet",
        "displayType": "code",
        "placeholder": "Write your script...",
        "description": "Ideal for developers with inline copy and code preview.",
        "validation": { "required": true, "infoDetail": { "infoMsg": "this is information" } },
        "htmlProps": {
            "language": "plaintext",
            "size": "xs",
            "showCopyToClipboard": true,
            "showSuggestions": true,
            "allowDynamic": true
        }
    }
}

Developer Friendly Code Snippet

Write your script...

Ideal for developers with inline copy and code preview.

---

---

Form Data:

{}

Code Snippet for MuiForms

<MuiForms
    schema={schema}
    onChange={handleChange}
    onSubmit={handleSubmit}
    name="advancedSchemaTextField"
    suggestions={{
        name: "code",
        suggestionsProps: {
            color: "red",
        },
    }}
/>

Field Properties

Detailed descriptions of each field property are essential for understanding how to configure and utilize the Code component effectively.

Name	Description	type
displayName	Label shown above the code field	string
displayType	Type of the field to be displayed	string
placeholder	Hint shown in the code field	string
required	Indicates if the field is mandatory	boolean
description	Additional description below the code field	string
fullscreen	Toggle for enabling fullscreen mode	boolean
language	Programming language of the code snippet	string
size	Size of the code field (xs, sm, md, lg)	enum
showSuggestions	Toggle to show or hide suggestions	boolean
showCopyToClipboard	Option to enable copy to clipboard functionality	boolean
showInfoIcon	Toggle to show or hide an informational icon	boolean
allowDynamic	Enable static and dynamic code snippets for custom suggestions	boolean
showHtmlPreview	Toggle to display a preview of HTML rendering the code snippet	boolean
height	Set the height of the code field (note: you need to pass size property along with height)	string
readOnly	A readonly field is not editable and value cannot be changed	boolean

---

Field Properties - Validation Details

The validation settings within the Code component are crucial for ensuring that user input meets specific requirements. Here’s a breakdown of the available validation properties:

Property	Description
required	Boolean value that specifies whether entering data into the field is mandatory.
infoDetail	Provides additional information related to the field. Can be used to display messages like hints or guidelines to users.
requiredDetail	Contains the specific properties related to required validation, such as custom error messages.
minLength	Specifies the minimum number of characters allowed in the input.
maxLength	Specifies the maximum number of characters allowed in the input.
min	Specifies the minimum value allowed for number inputs, with support for dynamic values.
max	Specifies the maximum value allowed for number inputs, also supporting dynamic conditions.
pattern	A regex pattern that the input must match to be considered valid.
validate	A function for custom validation logic, which can return a boolean or an error message.

Example Usage of Validation Properties

required

This property is straightforward; if set to true, the field must be filled out. This is critical for ensuring data completeness.

"validation": {
    "required": true
}

infoDetail

Use this to provide a message that can assist or guide the user in filling out the field correctly.

"validation": {
    "infoDetail": {
        "infoMsg": "Enter a valid code snippet following JavaScript ES6 standards."
    }
}

requiredDetail

Allows for a custom error message that will be displayed when the required condition is not met. This helps in providing a more context-specific feedback to the user, enhancing user experience.

"validation": {
    "required": true,
    "requiredDetail": {
        "errorMsg": "Integration name cannot be empty. Please provide a valid name."
    }
}

Practical Application

These validation properties ensure that the form input adheres to specified rules, enhancing the data integrity and usability of the application. Here's how they might be used in a real-world JSON schema for your Code component:

{
    "name": "codeSnippet",
    "meta": {
        "displayName": "Code Snippet",
        "displayType": "code",
        "placeholder": "Enter your code here",
        "description": "Ensure your code snippet is valid and well-formatted.",
        "validation": {
            "required": true,
            "requiredDetail": {
                "errorMsg": "Please provide a code snippet."
            },
            "infoDetail": {
                "infoMsg": "Use JavaScript ES6 syntax for best compatibility."
            },
            "minLength": 50,
            "maxLength": 200,
            "min": 1,
            "max": 100,
            "pattern": "/^[\\w\\s]+$/"
        },
        "htmlProps": {
            "fullscreen": true,
            "language": "javascript",
            "size": "md"
        }
    }
}

This structured approach to validation provides clear, actionable messages to users, enhancing both functionality and user interaction with the component.