fix(nc-gui): update extension create docs

This commit is contained in:
Ramesh Mane
2024-11-28 11:29:49 +00:00
parent d65d08feea
commit 295c762711

View File

@@ -27,29 +27,87 @@ In your new folder, create a `manifest.json` file that describes the extension a
```json
{
"id": "nc-json-exporter",
"title": "JSON Exporter",
"description": "This is a sample NocoDB extension that exports data in JSON format. \nIt is used to demonstrate how to create a NocoDB extension.\n\nThis extension is disabled by default. To access it you need to first change the disabled property in the manifest file to false.",
"entry": "json-exporter",
"version": "0.1",
"iconUrl": "json-exporter/icon.png",
"publisherName": "NocoDB",
"publisherEmail": "contact@nocodb.com",
"publisherUrl": "https://www.nocodb.com"
"id": "nc-data-exporter",
"title": "Data Exporter",
"subTitle": "Asynchronous CSV downloads with real-time notifications.",
"description": "data-exporter/description.md",
"entry": "data-exporter",
"version": "0.1",
"iconUrl": "data-exporter/assets/icon.svg",
"publisher": {
"name": "NocoDB",
"email": "contact@nocodb.com",
"url": "https://www.nocodb.com",
"icon": {
"src": "csv-import-ee/assets/publisher-icon.svg",
"width": 24,
"height": 24
}
},
"links": [
{
"title": "Documentation",
"href": "https://docs.nocodb.com/extensions/data-exporter"
}
],
"config": {
"modalSize": "sm",
"contentMinHeight": "310px"
}
}
```
#### Manifest File Properties
`id`: A unique identifier for the extension.
`title`: The title of the extension as it will appear in NocoDB.
`description`: A brief description of the extensions functionality.
`entry`: The entry point for the extension, typically the name of the folder you created.
`version`: The version number of the extension.
`iconUrl`: The path to the icon image for the extension.
`publisherName`: The name of the extension's publisher.
`publisherEmail`: The email address of the publisher.
`publisherUrl`: The website of the publisher.
1. **`id`** (string, required)
- A unique identifier for the extension (e.g., `"nc-data-exporter"`).
2. **`title`** (string, required)
- The name of the extension as it will appear within NocoDB (e.g., `"Data Exporter"`).
3. **`subTitle`** (string, optional)
- A brief subtitle providing additional context or details, such as functionality or usage (e.g., `"Asynchronous CSV downloads with real-time notifications."`).
4. **`description`** (string, required)
- Path to a Markdown file that provides a detailed description of the extension (e.g., `"data-exporter/description.md"`).
5. **`entry`** (string, required)
- The entry point for the extension, usually matching the folder name (e.g., `"data-exporter"`).
6. **`version`** (string, required)
- The version number of the extension. (e.g., `"0.1"`).
7. **`iconUrl`** (string, required)
- The path to the extension's main icon, typically a `.png` or `.svg` file (e.g., `"data-exporter/assets/icon.svg"`).
8. **`publisher`** (object, required)
- Contains information about the extension publisher.
- **`name`** (string, required): Publisher's name (e.g., `"NocoDB"`).
- **`email`** (string, required): Publishers contact email (e.g., `"contact@nocodb.com"`).
- **`url`** (string, optional): Publishers website (e.g., `"https://www.nocodb.com"`).
- **`icon`** (object, optional): Contains additional icon properties for the publisher:
- **`src`** (string, required): Path to the publisher icon file (e.g., `"csv-import-ee/assets/publisher-icon.svg"`).
- **`width`** and **`height`** (integer, optional): Dimensions for the icon display.
9. **`links`** (array of objects, optional)
- Array of additional links related to the extension. Each link object can include:
- **`title`** (string, required): Title of the link (e.g., `"Documentation"`).
- **`href`** (string, required): URL of the linked resource (e.g., `"https://docs.nocodb.com/extensions/data-exporter"`).
10. **`config`** (object, optional)
- Configuration settings for the extensions UI.
- **`modalSize`** (string, optional): Sets the modal size (e.g., 'xs' | 'sm' | 'md' | 'lg').
- **`contentMinHeight`** (string, optional): Specifies minimum height for content within the modal (e.g., `"310px"`).
### 3. Create the Component File
@@ -59,7 +117,7 @@ The `index.vue` file should include the standard sections for a Vue component: <
```vue
<script setup lang="ts">
const { extension } = useExtensionHelperOrThrow()
const { extension } = useExtensionHelperOrThrow();
</script>
<template>
@@ -99,4 +157,3 @@ After building your extension, test it by running NocoDB. It will automatically
## Publishing the Extension
Once your extension is built and tested, you can publish it to the NocoDB extension store. To do this, create a pull request in the NocoDB repository with your extension code. Ensure your code follows NocoDBs contribution guidelines, includes proper documentation, and is ready for other users to install.