{"id":24553035,"url":"https://github.com/npdeehan/camunda-cockpit-plugin-tutorial","last_synced_at":"2025-10-26T12:04:35.333Z","repository":{"id":90222763,"uuid":"309711657","full_name":"NPDeehan/Camunda-Cockpit-Plugin-Tutorial","owner":"NPDeehan","description":"This project is used to create a plugin that lets you start a process instance from Camunda Cockpit. It does this through the Cockpit Plugin system. This examples is used as part of the Camunda Cockpit Plugin tutorial video.","archived":false,"fork":false,"pushed_at":"2022-05-18T08:08:12.000Z","size":168,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T23:16:11.574Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NPDeehan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-03T14:28:06.000Z","updated_at":"2023-09-01T20:44:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"3b35bbb0-1098-48d8-81e0-73e5a4729e53","html_url":"https://github.com/NPDeehan/Camunda-Cockpit-Plugin-Tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NPDeehan%2FCamunda-Cockpit-Plugin-Tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NPDeehan%2FCamunda-Cockpit-Plugin-Tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NPDeehan%2FCamunda-Cockpit-Plugin-Tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NPDeehan%2FCamunda-Cockpit-Plugin-Tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NPDeehan","download_url":"https://codeload.github.com/NPDeehan/Camunda-Cockpit-Plugin-Tutorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249167456,"owners_count":21223508,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-23T01:34:07.968Z","updated_at":"2025-10-26T12:04:30.286Z","avatar_url":"https://github.com/NPDeehan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Camunda Cockpit Plugin Tutorial\nThis project is used to create a plugin that lets you start a process instance from Camunda Cockpit. It does this through the Cockpit Plugin system. This examples is used as part of the Camunda Cockpit Plugin tutorial video. If you've like to expore all the posible endpoints you can [check out the docs](https://docs.camunda.org/manual/latest/webapps/cockpit/extend/plugins/)\n\n\n## Step Zero - Download the Requirements\nFor this tutoral you'll need the following:\n1. [Java Runtime installed](https://docs.oracle.com/goldengate/1212/gg-winux/GDRAD/java.htm#BGBFJHAB)\n1. [Camunda Tomcat distribution](https://camunda.com/download/)\n1. [Camunda Modeler](https://camunda.com/download/modeler/)\n1. Some kind of JavaScript editor (e.g. [Visual Studio Code](https://code.visualstudio.com/))\n\n## Step One: Build a Button\n\nMost of the action is going to happen in on specific directory.\n\n`\u003cCamunda-Distro\u003e\\server\\apache-tomcat-9.0.36\\webapps\\camunda\\app\\cockpit\\scripts`\n\nThe ``startInstance.js`` will need to be created and the ``config.js`` file will need to be edited.\n\nIn the first case the ``startInstance.js`` file will just create a visible button.\n\n```javaScript\nexport default {\n  // id for plugin\n  id: \"myDemoPlugin\",\n  // location where plugin goes\n  pluginPoint: \"cockpit.processDefinition.runtime.action\",\n  // what to render, specific objects that you can pass into render function to use\n  render: (node, { api, processDefinitionId }) =\u003e {\n    // create the actual button with an image inside + hard-wired styling\n    node.innerHTML = `\u003cbutton class=\"btn btn-default action-button\" style=\"width: 40px; margin-top: 5px;\"\u003e\u003c/button\u003e`;\n    // onclick function for our button\n   \n  },\n};\n```\nIf you're looking for more details about the various plugin points take a look at this page of [the camunda docs](https://docs.camunda.org/manual/latest/webapps/cockpit/extend/plugins/)\n\nwhile the ``config.js`` will tell cockpit where to find the file. \n\n```JavaScript\nexport default {\n   customScripts: [\n    'scripts/startInstance.js'\n  ]\n  \n ``` \n\n## Step Two: Add a Function and Corgi\n\nThis step involves adding the ``corgi.gif`` file to the ``scripts`` directory and then adding it to the button as an icon.\n\n```JavaScript\n    node.innerHTML = `\u003cbutton class=\"btn btn-default action-button\" style=\"width: 40px; margin-top: 5px;\"\u003e\u003cimg src=\"../scripts/corgi.gif\" width=\"20\"/\u003e\u003c/button\u003e`;\n\n```\n\nThe second part involves adding some functionality specifically the ability for the button to print somethign to the console. \n\n```JavaScript\n  node.onclick = function() {\n      console.log(\"Saying Hi\")\n    }\n```\n\n## Step Three: Start the process instance\n\nIn this step we remove the console loging we did before and replace it with a rest call. The rest call is detailed in the [Camunda Docs](https://docs.camunda.org/manual/latest/reference/rest/process-definition/post-start-process-instance/). \n\n```JavaScript\n      node.onclick = function() {\n      \n      fetch(api.engineApi + \"/process-definition/\" + processDefinitionId  + \"/start\", {\n        method: 'post',\n        body: '{}',\n        headers: {\n          \"Accept\": \"application/json\",\n          \"Content-Type\": \"application/json\",\n          \"X-XSRF-TOKEN\": api.CSRFToken,\n        },\n      })\n    }\n```\n\n## Step Four: Show the user the started process\nIn the final section we shall add an addional line of code that redirects the user to the started instance by using the respons from the start instance rest call. \n\n```JavaScript\nnode.onclick = function() {\n      \n      fetch(api.engineApi + \"/process-definition/\" + processDefinitionId  + \"/start\", {\n        method: 'post',\n        body: '{}',\n        headers: {\n          \"Accept\": \"application/json\",\n          \"Content-Type\": \"application/json\",\n          \"X-XSRF-TOKEN\": api.CSRFToken,\n        },\n      }).then(async (res) =\u003e {\n        var result = await res.json();\n        // Reloads Page\n        // location.reload();\n        // Go to process instance page\n        window.location.href = \"http://localhost:8080/camunda/app/cockpit/default/#/process-instance/\" + result.id + \"/runtime\";\n      });\n    }\n``` \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnpdeehan%2Fcamunda-cockpit-plugin-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnpdeehan%2Fcamunda-cockpit-plugin-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnpdeehan%2Fcamunda-cockpit-plugin-tutorial/lists"}