├── assets
├── logo.png
├── logo-small.png
├── modal.html
├── iframe.html
├── logo.svg
├── icon_nav_bar.svg
├── icon_top_bar.svg
├── icon_ticket_editor.svg
└── main.js
├── .github
└── CODEOWNERS
├── translations
└── en.json
├── manifest.json
├── README.md
└── .gitignore
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zendesk/activation_events_demo_zaf_app/main/assets/logo.png
--------------------------------------------------------------------------------
/assets/logo-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zendesk/activation_events_demo_zaf_app/main/assets/logo-small.png
--------------------------------------------------------------------------------
/.github/CODEOWNERS:
--------------------------------------------------------------------------------
1 | # CODEOWNERS file
2 | # This file defines who should review code changes in this repository.
3 |
4 | * @zendesk/developer-support
5 |
--------------------------------------------------------------------------------
/translations/en.json:
--------------------------------------------------------------------------------
1 | {
2 | "app": {
3 | "name": "Test Activate Events",
4 | "short_description": "Display registered/activated/deactivated events in console.",
5 | "long_description": "Display app.registered, pane.activated, pane.deactivated events in console across all app locations.",
6 | "installation_instructions": "Click Install."
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/assets/modal.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Test App Activated Events
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/assets/iframe.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Test App Activated Events
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
11 |
--------------------------------------------------------------------------------
/assets/icon_nav_bar.svg:
--------------------------------------------------------------------------------
1 |
2 |
11 |
--------------------------------------------------------------------------------
/assets/icon_top_bar.svg:
--------------------------------------------------------------------------------
1 |
2 |
11 |
--------------------------------------------------------------------------------
/assets/icon_ticket_editor.svg:
--------------------------------------------------------------------------------
1 |
2 |
11 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Test Activate Events",
3 | "author": {
4 | "name": "Developer Advocacy at Zendesk",
5 | "email": "developer-support@zendesk.com",
6 | "url": "https://developer.zendesk.com/documentation/"
7 | },
8 | "defaultLocale": "en",
9 | "private": true,
10 | "location": {
11 | "support": {
12 | "ticket_sidebar": {
13 | "url": "assets/iframe.html",
14 | "flexible": true
15 | },
16 | "new_ticket_sidebar": {
17 | "url": "assets/iframe.html",
18 | "flexible": true
19 | },
20 | "nav_bar": "assets/iframe.html",
21 | "top_bar": "assets/iframe.html",
22 | "user_sidebar": "assets/iframe.html",
23 | "organization_sidebar": "assets/iframe.html",
24 | "ticket_editor": "assets/iframe.html",
25 | "background": "assets/iframe.html"
26 | }
27 | },
28 | "version": "1.0",
29 | "frameworkVersion": "2.0"
30 | }
31 |
--------------------------------------------------------------------------------
/assets/main.js:
--------------------------------------------------------------------------------
1 | const client = ZAFClient.init();
2 |
3 | // Runs on app.registered event
4 | client.on("app.registered", (data) => {
5 | client.invoke("notify", `${client._context["location"]} app.activated`);
6 | console.log(`DEBUG ${client._context["location"]} app.registered`, data);
7 | });
8 |
9 | // Runs on app.activated event
10 | client.on("app.activated", (data) => {
11 | console.log(`DEBUG ${client._context["location"]} app.activated`, data);
12 | });
13 |
14 | // Runs on app.deactivated event
15 | client.on("app.deactivated", (data) => {
16 | console.log(`DEBUG ${client._context["location"]} app.deactiviated`, data);
17 | });
18 |
19 | // Runs on pane.activated event
20 | client.on("pane.activated", (data) => {
21 | client.invoke("notify", `${client._context["location"]} app.activated`);
22 | console.log(`DEBUG ${client._context["location"]} pane.activated`, data);
23 | });
24 |
25 | // Runs on pane.deactivated event
26 | client.on("pane.deactivated", (data) => {
27 | console.log(`DEBUG ${client._context["location"]} pane.deactivated`, data);
28 | });
29 |
30 | // Creates the modal instance
31 | async function createModal() {
32 | return client.invoke("instances.create", {
33 | location: "modal",
34 | url: "assets/modal.html",
35 | });
36 | }
37 |
38 | // Access the modal instance and logs to the console when modal is closed
39 | function accessModal(instanceData) {
40 | const instanceGuid = instanceData["instances.create"][0].instanceGuid;
41 | const modalClient = client.instance(instanceGuid);
42 | modalClient.on("modal.close", (data) => {
43 | console.log(`DEBUG modal.close`, data);
44 | });
45 | }
46 |
47 | // Runs when user clicks button in app UI
48 | async function displayModal() {
49 | const instanceData = await createModal();
50 |
51 | return accessModal(instanceData);
52 | }
53 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Test Activation Events
2 |
3 | This app is installed in every [location](https://developer.zendesk.com/api-reference/apps/apps-support-api/introduction/) and outputs a notification to the Zendesk UI and to the browser's Console window when an event is detected.
4 |
5 | Filter with 'DEBUG' in the Console window to reduce noise level and better see events as they occur.
6 |
7 | All locations should have an app.activated event appear in the Console window when the app is initiated/begins running.
8 |
9 | top_bar, nav_bar, and ticket_editor locations should have pane.activated and pane.deactivated events appear.
10 |
11 | ## Getting started
12 |
13 | Follow these steps to get a local copy up and running.
14 |
15 | ### Prerequisites
16 |
17 | - Zendesk Command Line (ZCLI)
18 |
19 | [Using Zendesk Command Line](https://developer.zendesk.com/documentation/apps/app-developer-guide/zcli/#installing-and-updating-zcli)
20 |
21 | ### Installation
22 |
23 | 1. Clone the repo
24 |
25 | ```
26 | git clone https://github.com/zendesk/activation_events_demo_zaf_app.git
27 | ```
28 |
29 | 2. Run the app.
30 |
31 | ```
32 | zcli apps:server
33 | ```
34 |
35 | [Testing your Zendesk app locally](https://developer.zendesk.com/documentation/apps/app-developer-guide/zcli/#testing-your-zendesk-app-locally)
36 |
37 |
38 |
39 | ## Additional Resources
40 |
41 | - [Zendesk Apps Guide](https://developer.zendesk.com/documentation/apps/)
42 | - [Apps Support API documentation](https://developer.zendesk.com/api-reference/apps/apps-support-api/introduction/)
43 | - [Apps Modal Documentation](https://developer.zendesk.com/api-reference/apps/apps-support-api/modal/)
44 |
45 |
46 |
47 | ## Issues
48 |
49 | You can [create an issue on Github](https://github.com/zendesk/activation_events_demo_zaf_app/issues/new),
50 | reach out in our [Developer Community](https://support.zendesk.com/hc/en-us/community/topics),
51 | or report the issue in the [Zendesk Developers Slack group](https://docs.google.com/forms/d/e/1FAIpQLScm_rDLWwzWnq6PpYWFOR_PwMaSBcaFft-1pYornQtBGAaiJA/viewform).
52 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 | .pnpm-debug.log*
9 |
10 | # Diagnostic reports (https://nodejs.org/api/report.html)
11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12 |
13 | # Runtime data
14 | pids
15 | *.pid
16 | *.seed
17 | *.pid.lock
18 |
19 | # Directory for instrumented libs generated by jscoverage/JSCover
20 | lib-cov
21 |
22 | # Coverage directory used by tools like istanbul
23 | coverage
24 | *.lcov
25 |
26 | # nyc test coverage
27 | .nyc_output
28 |
29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30 | .grunt
31 |
32 | # Bower dependency directory (https://bower.io/)
33 | bower_components
34 |
35 | # node-waf configuration
36 | .lock-wscript
37 |
38 | # Compiled binary addons (https://nodejs.org/api/addons.html)
39 | build/Release
40 |
41 | # Dependency directories
42 | node_modules/
43 | jspm_packages/
44 |
45 | # Snowpack dependency directory (https://snowpack.dev/)
46 | web_modules/
47 |
48 | # TypeScript cache
49 | *.tsbuildinfo
50 |
51 | # Optional npm cache directory
52 | .npm
53 |
54 | # Optional eslint cache
55 | .eslintcache
56 |
57 | # Optional stylelint cache
58 | .stylelintcache
59 |
60 | # Microbundle cache
61 | .rpt2_cache/
62 | .rts2_cache_cjs/
63 | .rts2_cache_es/
64 | .rts2_cache_umd/
65 |
66 | # Optional REPL history
67 | .node_repl_history
68 |
69 | # Output of 'npm pack'
70 | *.tgz
71 |
72 | # Yarn Integrity file
73 | .yarn-integrity
74 |
75 | # dotenv environment variable files
76 | .env
77 | .env.development.local
78 | .env.test.local
79 | .env.production.local
80 | .env.local
81 |
82 | # parcel-bundler cache (https://parceljs.org/)
83 | .cache
84 | .parcel-cache
85 |
86 | # Next.js build output
87 | .next
88 | out
89 |
90 | # Nuxt.js build / generate output
91 | .nuxt
92 | dist
93 |
94 | # Gatsby files
95 | .cache/
96 | # Comment in the public line in if your project uses Gatsby and not Next.js
97 | # https://nextjs.org/blog/next-9-1#public-directory-support
98 | # public
99 |
100 | # vuepress build output
101 | .vuepress/dist
102 |
103 | # vuepress v2.x temp and cache directory
104 | .temp
105 | .cache
106 |
107 | # Docusaurus cache and generated files
108 | .docusaurus
109 |
110 | # Serverless directories
111 | .serverless/
112 |
113 | # FuseBox cache
114 | .fusebox/
115 |
116 | # DynamoDB Local files
117 | .dynamodb/
118 |
119 | # TernJS port file
120 | .tern-port
121 |
122 | # VSCode/IDEs
123 | .vscode/*
124 |
125 | # yarn v2
126 | .yarn/cache
127 | .yarn/unplugged
128 | .yarn/build-state.yml
129 | .yarn/install-state.gz
130 | .pnp.*
131 |
132 | # MacOS
133 | .DS_STORE
--------------------------------------------------------------------------------