Camunda Embedded Forms - Using web components developed using Polymer / lit-html

I am trying to use custom web components developed using lit-html inside camunda embedded forms , I saw examples of embedded forms using the reactjs and angularjs libraries , where it can be loaded by making the necessary changes in the config.js file present in the location \app\tasklist\scripts of the webapp created by us within the spring boot application or by importing the library directly in the form from cdn respectively.

With lit-html / polymer components , the scripts are located as packages in the node-modules folder created and not a single js file which can be referred at a single place , Could someone please guide on how to load the node-modules and access the web components from those.

Hey @preeja,

in that case, you will have to bundle your scripts (e.g. with webpack) into a single file and reference that.

Let me know if you need further assistance

Thank you @martin.stamm , I shall give it a try and get back.

Hey @martin.stamm

I have tried the following.

  1. Created a sample web component using lit-html which used some of the standard web components already present.
  2. Used webpack to bundle this project. I got many chunks as a result of the bundling even though i hadn’t explicitly mention any such config. One of the js file was said to be the entry point.
  3. I used this js file into the camunda tasklist scripts folder , loaded it using the window.camTasklistConf.customScripts.

On execution ,while trying to load the dependent js files (chunks) , there were errors related to 404 Not found , and location where it was trying to access was tasklist/default/.js , when i created a folder “default” inside tasklist and placed all the chunks (js ) files there , i was able to see my component loaded in the camunda embedded form by just placing the selector in html file . i.e.

My Question here is .

  1. I was unable to bundle all the dependency into a single js file as mentioned in your earlier comment , as i have not much exposure to the webpack related area , I am assuming since there are multiple modules within the dependencies of the webcomponent i am trying to create , each is being created as a separate chunk , is there any other way to get all the chunks together in 1 file.

  2. In case i have to refer to different chunks (and there are about 100’s of js files in my dist folder) , why was camunda trying to access it at a location “tasklist/default” instead of within “tasklist/scripts” , do i need to do any configuration changes to get this rightly referred.?

Thank you.

I don’t have much experience with web components and the answer might depend on your specific project. Do you have a github repo where I could take a look at?

How does your config.js look like?

Thank you @martin.stamm for your response.

I haven’t uploaded the project in github , since it has some components specific to the company i am working with.

Also the config.js file looks like this in my camunda webapp.

window.camTasklistConf = {
// // custom libraries and scripts loading and initialization,
// // see:
// http://docs.camunda.org/guides/user-guide/#tasklist-customizing-custom-scripts
customScripts : {
ngDeps : [],
// RequireJS configuration for a complete configuration documentation
// see:
// http://requirejs.org/docs/api.html#config
deps : [ ‘testComponent’],
paths : {
‘testComponent’ : ‘scripts/custom/7d210290216ac36844e6’
}
}
};

7d210290216ac36844e6 refers to the Entrypoint chunk file which was created as part of bundling using webpack