Browse Source

fix(nc-gui): update extension create docs

pull/9914/head
Ramesh Mane 1 month ago
parent
commit
295c762711
  1. 97
      packages/noco-docs/docs/160.developer-resources/030.extensions/010.developing-extensions.md

97
packages/noco-docs/docs/160.developer-resources/030.extensions/010.developing-extensions.md

@ -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 extension’s 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): Publisher’s contact email (e.g., `"contact@nocodb.com"`).
- **`url`** (string, optional): Publisher’s 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 extension’s 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 NocoDB’s contribution guidelines, includes proper documentation, and is ready for other users to install.

Loading…
Cancel
Save