You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Simple integration that includes different UI extensions:
4
+
4
5
1. Project context menu UI extension to add lorem ipsum tasks to the current Todoist project
5
6
2. Composer extension that injects lorem ipsum text into the composer
6
7
3. Settings extension that displays a message in the integration settings
@@ -11,12 +12,21 @@ Simple integration that includes different UI extensions:
11
12
12
13
To tailor your dev environment, create a `.env` file and put in the relevant settings:
13
14
14
-
-`PORT`: The port the backend will run on
15
-
-`VERIFICATION_TOKENS`: This is a comma-separated list of valid tokens from https://todoist.com/app_console that will be used to verify the token has come from Todoist.
16
-
-`BASE_URL`: This is the domain for accessing static files (like images)
15
+
-`PORT`: The port the backend will run on
16
+
-`VERIFICATION_TOKENS`: This is a comma-separated list of valid tokens from https://todoist.com/app_console that will be used to verify the token has come from Todoist.
17
+
-`BASE_URL`: This is the domain for accessing static files (like images)
17
18
18
19
## Run your integration service
19
20
21
+
Make sure you're using the right Node.js version:
22
+
23
+
```shell
24
+
nvm install
25
+
nvm use
26
+
```
27
+
28
+
Install dependencies and run the integration:
29
+
20
30
```shell
21
31
npm install
22
32
npm run dev
@@ -46,31 +56,31 @@ Take note of the URL exposed by your tool of choice, as you'll need it in the ne
46
56
2. Click "Create a new app" and insert a name in the "App name" field (i.e. "Lorem Ipsum")
47
57
3. Create three different UI Extensions:
48
58
1. In the `UI Extensions` section, click "Add a new UI extension":
49
-
* Give it a name (i.e. "Add lorem ipsum tasks")
50
-
* Select "Context menu" as the "Extension type" (and "Project" as the "Context type")
51
-
* Point "Data exchange endpoint URL" to your service URL followed by `/process` (or the endpoint name you chose). This value in this field might look something like `https://my-extension-service/process`
59
+
- Give it a name (i.e. "Add lorem ipsum tasks")
60
+
- Select "Context menu" as the "Extension type" (and "Project" as the "Context type")
61
+
- Point "Data exchange endpoint URL" to your service URL followed by `/process` (or the endpoint name you chose). This value in this field might look something like `https://my-extension-service/process`
52
62
2. In the `UI Extensions` section, click "Add a new UI extension":
53
-
* Give it a name (i.e. "Add lorem ipsum content")
54
-
* Select "Composer" as the "Extension type"
55
-
* Point "Data exchange endpoint URL" to your service URL followed by `/process` (or the endpoint name you chose). This value in this field might look something like `https://my-extension-service/process`
63
+
- Give it a name (i.e. "Add lorem ipsum content")
64
+
- Select "Composer" as the "Extension type"
65
+
- Point "Data exchange endpoint URL" to your service URL followed by `/process` (or the endpoint name you chose). This value in this field might look something like `https://my-extension-service/process`
56
66
3. In the `UI Extensions` section, click "Add a new settings extension":
57
-
* Give it a name (i.e. "Lorem ipsum settings")
58
-
* Point "Data exchange endpoint URL" to your service URL followed by `/process` (or the endpoint name you chose). This value in this field might look something like `https://my-extension-service/process`
59
-
6. Select the `task:add` scope
60
-
7. In the `Installation` section, click on the `Install for me` button
67
+
- Give it a name (i.e. "Lorem ipsum settings")
68
+
- Point "Data exchange endpoint URL" to your service URL followed by `/process` (or the endpoint name you chose). This value in this field might look something like `https://my-extension-service/process`
69
+
4. Select the `task:add` scope
70
+
5. In the `Installation` section, click on the `Install for me` button
61
71
62
72
## Use your UI Extension
63
73
64
-
1. Visit [Todoist](https://todoist.com)
74
+
1. Visit [Todoist](https://app.todoist.com/app)
65
75
2. Test your context menu extension:
66
-
* Select any of your Todoist projects (or create a new one)
67
-
* Click on the context menu icon of that project, select "Integrations" and finally select your UI Extension from the list (i.e. "Add lorem ipsum tasks")
68
-
* You should see a few tasks being added to your current project
69
-
4. Test your composer extension:
70
-
* Select any of your Todoist tasks (or create a new one)
71
-
* Click inside the comment composer, select "Add lorem ipsum content" in the composer extensions menu
72
-
* You should see content being injected into the composer
73
-
5. Test your settings extension:
74
-
* Click on the profile picture menu > "Settings" > "Integrations"
75
-
* Click on the name of your app (i.e. "Lorem Ipsum"), then "Settings"
76
-
* You should see some custom text
76
+
- Select any of your Todoist projects (or create a new one)
77
+
- Click on the context menu icon of that project, select "Integrations" and finally select your UI Extension from the list (i.e. "Add lorem ipsum tasks")
78
+
- You should see a few tasks being added to your current project
79
+
3. Test your composer extension:
80
+
- Select any of your Todoist tasks (or create a new one)
81
+
- Click inside the comment composer, select "Add lorem ipsum content" in the composer extensions menu
82
+
- You should see content being injected into the composer
83
+
4. Test your settings extension:
84
+
- Click on the profile picture menu > "Settings" > "Integrations"
85
+
- Click on the name of your app (i.e. "Lorem Ipsum"), then "Settings"
0 commit comments