Costumize the webapp (with HTML, CSS, JS, ...)

Camunda 8 Topics Discussion & Questions
1

Hello everyone :slight_smile: ,

I’m looking to customize the WebApp by modifying the HTML, CSS and JS files that define the appearance of the online application.

I’m starting with HTML, CSS and JS.

My question 1: where are the different files located? How do I access them? What is their scope?

Because :

  • Accessing the HTML file would allow me to retrieve the information needed for CSS customization.

  • Accessing the CSS file would allow me to customize the Design of the application.

  • Knowing where Camunda programs the JS events would allow me to customize and create them.

My question 2 : is it possible to customize the application without creating a Maven project next to it and without having to create a Grunt file? Is it possible to customize the application simply by modifying html and CSS files?
If yes how?

For example, I just installed Camunda, and there is no project created using the Camunda examples.

I would like to modify the logo in the webapp right away. So I modify the file …camunda-bpm-tomcat-7.13.0\server\apache-tomcat-9.0.33\webapps\camunda-app\tasklist\styles\user-styles.css as specified in the documentation.

I launch the server. But nothing, no logo change.

I guess, reading the documentation, I have to do a build with Grunt. So I install NodeJS and Grunt.

Then I run the build from …camunda-bpm-tomcat-7.13.0\server\apache-tomcat-9.0.33\webapps\camunda\camunda\app but Grunt tells me “Fatal error: Unable to find local grunt”. And indeed, there is no GruntFile.

I stopped there, lost in this maze ^^. Can you please help me ?

Thank you in advance for your help !

Have a nice day :wink:

2

Hi @LittleDeveloper,

Question 1: The war file is a zip file. You can inspect it with any unzip tool, either on the command line listing the content or with a graphical tool like 7Zip.

I would only exchange images here, as everything else went through the javascript build process.

On the long run, you are more successful using the developer cycle mentioned in the readme: https://github.com/camunda/camunda-bpm-webapp#development

Question 2: As the Cockpit is a Java application, containing some Java Script code for the interactive user interface, using the java tools (here maven) is the most easy way to customize it.

But it should be possible to change the cockpit also with a nice unzip/zip tool. You only have to replace files in the zipped file.

My favorite tool for this kind of work is Total commander. Here you can insert or replace single files in the zip file.

Hope this helps, Ingo

3

1- I found, after multiple tests, that the files were in the folder “C:\Users\Desktop\Camunda_Folder\CommunityPlateform\camunda-bpm-tomcat-7.13.0\server\apache-tomcat-9.0.33\webapps\camunda” and in the child folders of “.\app” from this same path.

2- Then, the process engine automatically builds/compile the WebApp Camunda (default applet of the process engine) when it is launched.

This means that by modifying the files located at the above mentioned location, I was able to customize my forms with Telerik Kendo UI for a better embedded form design. And all this without using grunt or maven.
Unfortunately, I tried to modify the logo via the css file “user-styles.css”. But it doesn’t produce any result. Here is the code used :

image
image1173×357 12.9 KB

If someone ever manages to solve this last little problem, it will close the problem of this topic !!! :smiley:

Thanks in advance for your help ! :slight_smile:

4

Hello Mr. @Ingo_Richtsmeier ,

First of all thank you for your answer :slight_smile: !

Unfortunately I don’t understand, for point 1, why you refer me to the internal WAR file modification? And I ask myself the same question for the next point. I don’t understand why you are sending me back to the internal modification of the Cockpit-oriented WAR file?

My questions were :
1 - Where are the HTML/CSS/JS files?
2 - How to modify the base application without redoing a Maven project or without using Grunt?

These points are solved now but thanks for your intervention :slight_smile: ! Any help is welcome !

The only persistent problem is that modifications to “user-styles.css” are without result in the tasklist web page once the process engine is restarted. What’s the problem ? what’s wrong ?

You can find the code used in this topic :slight_smile:

Thanks in advance for your help.

5

Hi @LittleDeveloper,

sorry for the confusion, I mixed the tomcat- with the wildfly setup. In wildfly, the war didn’t get extracted as it is in tomcat.

I will have a look at the open question in a public topic.

Cheers, Ingo

6

Hello Mr. @Ingo_Richtsmeier , the issue has been resolved in this topic. Here it is:

Yours sincerely and good continuation! :slight_smile:

1 Like
7