Can the UI components be in a separate application that is accessible through a URL as supposed to be within the tasklist ?
I know that task list can render embedded forms.
What if I wanted the forms to be running as a separate webapp with our branding and all that ?
Can you simply show (I-Frame like capability) the camunda UI that the tasklist shows
inside my angular application ?
In other words, the html page is still rendered by Camunda Engine in its springboot container. My angular app will merely show the content within my app.
This means my business user just has his/her app to login to and they simply do their task. Behind the scene, Camunda rendsrs the html. In other words, instead of the camunda tasklist rendering it, my angular app would render it.
Hi @shkrish,
you can customize the Camunda Tasklist as well: https://docs.camunda.org/manual/latest/webapps/tasklist/configuration/.
Another options to use forms is to access external forms: https://docs.camunda.org/manual/latest/user-guide/task-forms/#external-task-forms.
Hope this helps, Ingo
I gor the angular to show. I made some tweaks to get it to run in Angular 7. However, it is not calling any of the REST APIs. I am very familiar with http client and springboot as that is what we use here for all microservices.
Is there a @CrossOrigin configuration needed to access Camunda REST Api’s from Angular ?
The Camunda REST APIs are not working from angular. However, when I deploy a controller to the same springboot
Hi,
Have you included the REST API dependency in your POM file?
Also, if you use spring boot security, be careful that you dont hide the APIs behind an unauthorized path…
See here for som detail…
regards
Rob
Yes I have included the rest dependency. I don’t have springboot security
Can you let us know what error you’re seeing in your JavaScript console? I suspect you may have a CORS (cross-origin request) issue.
-Ryan
roject xmlns=“http://maven.apache.org/POM/4.0.0”
xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=“http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd”>
4.0.0
org.camunda.bpm.getstarted
loan-approval-spring-boot
0.0.1-SNAPSHOT
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-dependencies</artifactId>
<version>2.1.5.RELEASE</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<dependency>
<groupId>org.camunda.bpm.springboot</groupId>
<artifactId>camunda-bpm-spring-boot-starter-webapp</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.camunda.bpm.springboot</groupId>
<artifactId>camunda-bpm-spring-boot-starter-rest</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
</dependency>
<dependency>
<groupId>org.camunda.bpm</groupId>
<artifactId>camunda-engine-plugin-spin</artifactId>
<version>7.11.0</version>
</dependency>
<dependency>
<groupId>org.camunda.spin</groupId>
<artifactId>camunda-spin-dataformat-all</artifactId>
<version>1.6.7</version>
</dependency>
<dependency>
<groupId>org.camunda.spin</groupId>
<artifactId>camunda-spin-core</artifactId>
<version>1.6.7</version>
</dependency>
<dependency>
<groupId>org.camunda.connect</groupId>
<artifactId>camunda-connect-core</artifactId>
<version>1.1.4</version>
</dependency>
<dependency>
<groupId>org.camunda.connect</groupId>
<artifactId>camunda-connect-connectors-all</artifactId>
<version>1.1.4</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<layout>ZIP</layout>
</configuration>
<executions>
<execution>
<goals>
<goal>repackage</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
I have no doubt I probably do. How do I fix it in Camunda ?
For my rest controller, I can do an @CrossOrigin and that will do.
Per the error shown, your browser isn’t letting you complete the call from your browser (@ localhost:4200) to the other origin on your local server (@ localhost:8080). I’m sure there are many ways different developers circumvent this issue; however, in my case, I’ve circumvented this issue for any such cross-origin requests (not just those to a Camunda host) by building a couple of proxy endpoints using NodeJS that (a) set the proper response header to permit cross-origin requests and then (b) proxy the calls to the ultimate target endpoints. For example, for a call to Camunda BPM from my browser, here’s how it works:
- The browser makes a call to my proxy endpoint.
- That proxy endpoint - running using NodeJS - first sets the “Access-Control-Allow-Origin” response header to the value of the “Origin” header received from the browser. This permits the cross-origin request.
- The proxy endpoint then takes the rest of the information provided and makes the call to the Camunda BPM REST API endpoint.
- The proxy endpoint takes the response from the Camunda BPM REST API endpoint and passes it back to my browser untouched.
Another alternative would be to utilize a local proxy, i.e. a server-side component at localhost:4200 that would make those requests for you. Since there’s no actual barrier to making the call, the only issue you’re running into is the CORS security that is implemented within your browser.
-Ryan
Thank you so much for your assistance. I will give it a shot.
Happy to help! 
Here is the Fix.
Thanks to pieter from the forum.
@Bean
public FilterRegistrationBean processCorsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin(““);
config.addAllowedHeader(””);
config.addAllowedMethod(“*”);
source.registerCorsConfiguration(“/**”, config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
1 Like
