Skip to content

Commit 0b8bf72

Browse files
committed
Add more plugin api docs
1 parent 2546531 commit 0b8bf72

File tree

24 files changed

+634
-146
lines changed

24 files changed

+634
-146
lines changed

_includes/toc-api-library.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<ul class="toc">
2+
<li class="toc-expander">V</li>
3+
<li class="tocheader">
4+
<ul>
5+
<li class="{% if page.url == "/docs/api/library/" %} active{% endif %}"><a href="/docs/api/library/">Library Store API</a>
6+
</ul>
7+
</li>
8+
</ul>
9+
<script>
10+
$(function() {
11+
var pageToc = $("<ul></ul>").appendTo(".toc li.active:not(.toctitle)");
12+
$(".docs-content h3,.docs-content h4").each(function() {
13+
$('<li id="toc-item-'+$(this).attr('id')+'"><a style="font-size: 0.9em; padding-left: 60px;" href="#'+$(this).attr('id')+'">'+$(this).text()+'</a></li>').appendTo(pageToc)
14+
})
15+
})
16+
</script>

_includes/toc-api-ui.html

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,8 @@
1313
<li {% if page.url contains "/docs/api/ui/searchBox" %}class="active"{% endif %}><a href="/docs/api/ui/searchBox">SearchBox</a></li>
1414
<li {% if page.url contains "/docs/api/ui/treeList" %}class="active"{% endif %}><a href="/docs/api/ui/treeList">TreeList</a></li>
1515
<li {% if page.url contains "/docs/api/ui/typedInput" %}class="active"{% endif %}><a href="/docs/api/ui/typedInput">TypedInput</a></li>
16+
<li><a style="text-decoration: none !important; font-weight: bold">Themes</a></li>
17+
<li {% if page.url contains "/docs/api/ui/themes" %}class="active"{% endif %}><a href="/docs/api/ui/themes">Theme Plugins</a></li>
1618
</ul>
1719
</li>
1820
</ul>
19-
<script>
20-
<!-- $(function() {
21-
var pageToc = $("<ul></ul>").appendTo(".toc li.active:not(.toctitle)");
22-
$(".docs-content h3,.docs-content h4").each(function() {
23-
$('<li id="toc-item-'+$(this).attr('id')+'"><a style="font-size: 0.9em; padding-left: 60px;" href="#'+$(this).attr('id')+'">'+$(this).text()+'</a></li>').appendTo(pageToc)
24-
})
25-
}) -->
26-
</script>

docs/api/index.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ data.
2222

2323
This API provides a pluggable way to store context data outside of the runtime.
2424

25+
#### [Library Store API](library)
26+
27+
This API provides a pluggable way to add additional libraries to the Node-RED
28+
Import/Export dialog.
29+
2530
#### [Editor APIs](ui)
2631

2732
The APIs available in the editor for nodes and plugins to use. This includes a set

docs/api/library/index.md

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
---
2+
layout: docs-api
3+
toc: toc-api-library.html
4+
title: Library Store API
5+
slug: library
6+
---
7+
8+
**Since 1.3.0**
9+
10+
The Import/Export dialog within the Node-RED editor provides a way to save flows
11+
and nodes to a local library.
12+
13+
This local library is managed by the [Storage API](../storage). The default being
14+
to store in under `~/.node-red/lib`.
15+
16+
The Library Store API is a plugin mechanism that can be used to provide libraries
17+
that store their contents in other locations - not just in local files.
18+
19+
Node-RED provides a [File Store plugin](https://github.com/node-red/node-red-library-file-store)
20+
that can be used to add libraries stored on the local file-system. This could be used,
21+
for example, to create a library on a shared file-system via a tool like Dropbox, to make
22+
it easier to share flows with other developers you are working with.
23+
24+
### Adding a File Store library
25+
26+
1. Edit your Node-RED settings file - typically `~/.node-red/settings.js`
27+
2. Find the `editorTheme` section and add a `library` section if one does not
28+
already exist.
29+
3. Under that section add a `sources` array. Within that array you can add
30+
as many new file store sources as you want.
31+
32+
```javascript
33+
editorTheme: {
34+
library: {
35+
sources: [
36+
{
37+
id: "team-collaboration-library",
38+
type: "node-red-library-file-store",
39+
path: "/Users/tom/work/team-library/",
40+
label: "Team collaboration",
41+
icon: "font-awesome/fa-users"
42+
}
43+
]
44+
},
45+
}
46+
```
47+
48+
The configuration object can have the following properties:
49+
50+
51+
Property | Description
52+
---------|--------------
53+
`id` | **Required** <br> A unique, url-safe, identifier for the library. Should contain only letters, numbers and the symbols `- _`.
54+
`type` | **Required** <br> Must be set to `node-red-library-file-store`
55+
`path` | **Required** <br> The absolute path to the where the library should be stored
56+
`label` | An optional label to use in the editor, otherwise the `id` will be used.
57+
`icon` | An optional icon from [FontAwesome 4.7](https://fontawesome.com/v4.7.0/icons/).
58+
`types` | By default the library will be used to store all types of object. It can be restricted to certain types by setting this property to an array of the acceptable types. <br> For example, to restrict it to just flows, set this property to `["flows"]`.
59+
`readOnly` | To make this a read-only library so it can only be used to import from, set this property to `true`.
60+
61+
62+
### Creating a new Store plugin
63+
64+
To create a store backed by a different type of storage, you will need to create a new plugin.
65+
66+
The plugin is packaged as an npm module, with a `package.json` file.
67+
68+
The following code can be used as the starting point for the plugin. You should also
69+
refer to the [File Store plugin](https://github.com/node-red/node-red-library-file-store).
70+
71+
#### package.json
72+
73+
```json
74+
{
75+
"name": "your-custom-library-store",
76+
"version": "1.0.0",
77+
"description": "A Custom Library plugin for Node-RED",
78+
"keywords": [
79+
"node-red"
80+
],
81+
"node-red": {
82+
"plugins": {
83+
"customstore": "store.js"
84+
}
85+
}
86+
}
87+
```
88+
89+
#### store.js
90+
91+
```javascript
92+
module.exports = function(RED) {
93+
94+
// This must be a unique identifier for the library store type
95+
const PLUGIN_TYPE_ID = "node-red-library-custom-store";
96+
97+
class CustomStorePlugin {
98+
99+
/**
100+
* @param {object} config an object containing the configuration for an
101+
* instance of the store
102+
*/
103+
constructor(config) {
104+
// Required properties
105+
this.type = PLUGIN_TYPE_ID;
106+
this.id = config.id;
107+
this.label = config.label;
108+
}
109+
110+
/**
111+
* Initialise the store.
112+
*/
113+
async init() {
114+
}
115+
116+
/**
117+
* Get an entry from the store
118+
* @param {string} type The type of entry, for example, "flow"
119+
* @param {string} path The path to the library entry
120+
* @return if 'path' resolves to a single entry, it returns the contents
121+
* of that entry.
122+
* if 'path' resolves to a 'directory', it returns a listing of
123+
* the contents of the directory
124+
* if 'path' is not valid, it should throw a suitable error
125+
*/
126+
async getEntry(type,path) {
127+
throw new Error("Not implemented")
128+
}
129+
130+
/**
131+
* Save an entry to the library
132+
* @param {string} type The type of entry, for example, "flow"
133+
* @param {string} path The path to the library entry
134+
* @param {object} meta An object of key/value meta data about the entry
135+
* @param {string} body The entry contents
136+
*/
137+
async saveEntry(type,path,meta,body) {
138+
throw new Error("Not implemented")
139+
}
140+
}
141+
142+
// Register the plugin.
143+
RED.plugins.registerPlugin(PLUGIN_TYPE_ID, {
144+
// This tells Node-RED the plugin is a library source plugin
145+
type: "node-red-library-source",
146+
class: CustomStorePlugin
147+
})
148+
}
149+
```

docs/api/ui/editableList/index.md

Lines changed: 40 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -13,45 +13,47 @@ A replacement for a `<ol>` element where the items can be complex elements in th
1313
own right. Used by the core `Switch` and `Change` nodes.
1414

1515
<div class="widget">
16-
<div class="col-4-12">
17-
<h3>Options</h3>
18-
<table>
19-
<tr><td><a href="#options-addButton">addButton</a></td></tr>
20-
<tr><td><a href="#options-addItem">addItem</a></td></tr>
21-
<tr><td><a href="#options-buttons">buttons</a></td></tr>
22-
<tr><td><a href="#options-connectWith">connectWith</a></td></tr>
23-
<tr><td><a href="#options-header">header</a></td></tr>
24-
<tr><td><a href="#options-height">height</a></td></tr>
25-
<tr><td><a href="#options-filter">filter</a></td></tr>
26-
<tr><td><a href="#options-resize">resize</a></td></tr>
27-
<tr><td><a href="#options-resizeItem">resizeItem</a></td></tr>
28-
<tr><td><a href="#options-scrollOnAdd">scrollOnAdd</a></td></tr>
29-
<tr><td><a href="#options-sort">sort</a></td></tr>
30-
<tr><td><a href="#options-sortable">sortable</a></td></tr>
31-
<tr><td><a href="#options-sortItems">sortItems</a></td></tr>
32-
<tr><td><a href="#options-removable">removable</a></td></tr>
33-
<tr><td><a href="#options-removeItem">removeItem</a></td></tr>
34-
</table>
16+
<div style="clear:both">
17+
<div class="col-1-2">
18+
<h3>Options</h3>
19+
<table>
20+
<tr><td><a href="#options-addButton">addButton</a></td></tr>
21+
<tr><td><a href="#options-addItem">addItem</a></td></tr>
22+
<tr><td><a href="#options-buttons">buttons</a></td></tr>
23+
<tr><td><a href="#options-connectWith">connectWith</a></td></tr>
24+
<tr><td><a href="#options-header">header</a></td></tr>
25+
<tr><td><a href="#options-height">height</a></td></tr>
26+
<tr><td><a href="#options-filter">filter</a></td></tr>
27+
<tr><td><a href="#options-resize">resize</a></td></tr>
28+
<tr><td><a href="#options-resizeItem">resizeItem</a></td></tr>
29+
<tr><td><a href="#options-scrollOnAdd">scrollOnAdd</a></td></tr>
30+
<tr><td><a href="#options-sort">sort</a></td></tr>
31+
<tr><td><a href="#options-sortable">sortable</a></td></tr>
32+
<tr><td><a href="#options-sortItems">sortItems</a></td></tr>
33+
<tr><td><a href="#options-removable">removable</a></td></tr>
34+
<tr><td><a href="#options-removeItem">removeItem</a></td></tr>
35+
</table>
36+
</div>
37+
<div class="col-1-2">
38+
<h3>Methods</h3>
39+
<table>
40+
<tr><td><a href="#methods-addItem">addItem</a></td></tr>
41+
<tr><td><a href="#methods-addItems">addItems</a></td></tr>
42+
<tr><td><a href="#methods-removeItem">removeItem</a></td></tr>
43+
<tr><td><a href="#methods-width">width</a></td></tr>
44+
<tr><td><a href="#methods-height">height</a></td></tr>
45+
<tr><td><a href="#methods-items">items</a></td></tr>
46+
<tr><td><a href="#methods-empty">empty</a></td></tr>
47+
<tr><td><a href="#methods-filter">filter</a></td></tr>
48+
<tr><td><a href="#methods-show">show</a></td></tr>
49+
<tr><td><a href="#methods-sort">sort</a></td></tr>
50+
<tr><td><a href="#methods-length">length</a></td></tr>
51+
</table>
52+
</div>
3553
</div>
36-
<div class="col-4-12">
37-
<h3>Methods</h3>
38-
<table>
39-
<tr><td><a href="#methods-addItem">addItem</a></td></tr>
40-
<tr><td><a href="#methods-addItems">addItems</a></td></tr>
41-
<tr><td><a href="#methods-removeItem">removeItem</a></td></tr>
42-
<tr><td><a href="#methods-width">width</a></td></tr>
43-
<tr><td><a href="#methods-height">height</a></td></tr>
44-
<tr><td><a href="#methods-items">items</a></td></tr>
45-
<tr><td><a href="#methods-empty">empty</a></td></tr>
46-
<tr><td><a href="#methods-filter">filter</a></td></tr>
47-
<tr><td><a href="#methods-show">show</a></td></tr>
48-
<tr><td><a href="#methods-sort">sort</a></td></tr>
49-
<tr><td><a href="#methods-length">length</a></td></tr>
50-
</table>
51-
</div>
52-
<div class="col-4-12">
53-
<h3>Events</h3>
54-
<h3>Types</h3>
54+
<div style="clear:both">
55+
<div class="col-1-2"><h3>Events</h3></div>
56+
<div class="col-1-2"><h3>Types</h3></div>
5557
</div>
5658
</div>
5759

docs/api/ui/index.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,3 +23,13 @@ A set of jQuery widgets are available that can be used within a node's edit temp
2323
forms in their own right. Used by the core `Switch` and `Change` nodes.
2424
- [`SearchBox`](searchBox) - an enhanced `<input>` for common usage around Search UX.
2525
- [`TreeList`](treeList) - a list to display tree-structured data.
26+
27+
### Theme Plugins
28+
29+
*Since 2.0*
30+
31+
The appearance of the editor can be customised using themes. Themes are packaged
32+
and installed as Node-RED plugins, and then selected via the `editorTheme.theme`
33+
property in the settings file.
34+
35+
- [Creating Theme Plugins](themes)

docs/api/ui/searchBox/index.md

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,26 @@ slug:
1111
An enhanced `<input>` element that provides common features for a search input.
1212

1313
<div class="widget">
14-
<div class="col-4-12">
15-
<h3>Options</h3>
16-
<table>
17-
<tr><td><a href="#options-delay">delay</a></td></tr>
18-
<tr><td><a href="#options-minimumLength">minimumLength</a></td></tr>
19-
</table>
14+
<div style="clear:both">
15+
<div class="col-1-2">
16+
<h3>Options</h3>
17+
<table>
18+
<tr><td><a href="#options-delay">delay</a></td></tr>
19+
<tr><td><a href="#options-minimumLength">minimumLength</a></td></tr>
20+
</table>
21+
</div>
22+
<div class="col-1-2">
23+
<h3>Methods</h3>
24+
<table>
25+
<tr><td><a href="#methods-change">change</a></td></tr>
26+
<tr><td><a href="#methods-count">count</a></td></tr>
27+
<tr><td><a href="#methods-value">value</a></td></tr>
28+
</table>
29+
</div>
2030
</div>
21-
<div class="col-4-12">
22-
<h3>Methods</h3>
23-
<table>
24-
<tr><td><a href="#methods-change">change</a></td></tr>
25-
<tr><td><a href="#methods-count">count</a></td></tr>
26-
<tr><td><a href="#methods-value">value</a></td></tr>
27-
</table>
28-
</div>
29-
<div class="col-4-12">
30-
<h3>Events</h3>
31-
<h3>Types</h3>
31+
<div style="clear:both">
32+
<div class="col-1-2"><h3>Events</h3></div>
33+
<div class="col-1-2"><h3>Types</h3></div>
3234
</div>
3335
</div>
3436

0 commit comments

Comments
 (0)