cancel
Showing results for 
Search instead for 
Did you mean: 

Include Activiti Modeler from Activiti Explorer in my angular web application

bhakti
Champ in-the-making
Champ in-the-making
Hi All

I am working on a project where we are using activiti to define the workflow/userjourney of any application. We are defining an admin screen to define the workflow. To define that we want to Include Activiti Modeler from Activiti Explorer in my angular  web application

Can you please share the steps to do the same

Thanks in Advance
13 REPLIES 13

bhakti
Champ in-the-making
Champ in-the-making
Any help would be great please help, need this urgently

vasile_dirla
Star Contributor
Star Contributor
So you want to use only the BPMN editor into a new application (an AngularJS app) ?

bhakti
Champ in-the-making
Champ in-the-making
Yes, admin app is an AngularJS app - i have extracted modeler.html, editor-app folder, stencilset.json and included activiti-modeler dependency in pom, what more to do. Looking for exact steps to be followed…

bhakti
Champ in-the-making
Champ in-the-making
Any Help

vasile_dirla
Star Contributor
Star Contributor
Hi,
When I do something like that I usually extract the main script + html and put it my application and then step by step I just add the requirements one by one until the application is working.

during this process you could use the browser's console (because it will show you what's missing).

I don't think there is a step by step tutorial for this because it depends on what are you trying to do how your code looks like…
it's like someone will ask you how you are developing a web application for a company. (it depends on what this web application is supposed to do)

if you'll have any specific issues maybe the community could help you.

bhakti
Champ in-the-making
Champ in-the-making
Hi Vasile,

I have included couple of files like
1) webapp/modeler.html
2) webapp/diagram-viewer
3) webapp/editor-app
4) META-INF - changed context.xml <Context antiJARLocking="true" path="/app-store"/> app_store is my web app
5) WEB-INF/web.xml - Vaadin contents removed
6) resources/activiti-custom-context.xml – with it's contents commented
7) resources/db.properties – changed to mysql and added mysql dependency in the pom.xml
😎 resources/engine.properties – demo user false
9) resources/stencilset.json
10) src/……./conf/* and src/……/servlet/*

Now when i launch http://localhost:8080/app_store/modeler.html?modelId=13320

and i inspect the element to see the console as i get blank page – i see the call to get the model json is failing

http://localhost:8080/app_store/service/model/13320/json – This is giving 403 forbidden error

http://localhost:8080/app_store/service/model/13320/json Failed to load resource: the server responded with a status of 403 (Forbidden)
app.js:107 Error loading model with id 13320 <!DOCTYPE html><html><head><title>Apache Tomcat/8.0.23 - Error report</title><style type="text/css">H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}.line {height: 1px; background-color: #525D76; border: none;}</style> </head><body><h1>HTTP Status 403 - </h1><div class="line"></div><p><b>type</b> Status report</p><p><b>message</b> <u></u></p><p><b>description</b> <u>Access to the specified resource has been forbidden.</u></p><hr class="line"><h3>Apache Tomcat/8.0.23</h3></body></html>

Thanks
Bhakti

bhakti
Champ in-the-making
Champ in-the-making
Any Help With this info

bhakti
Champ in-the-making
Champ in-the-making
web.xml has this –>
<code>
<!– To load the Spring context –>
<listener>
  <listener-class>org.activiti.explorer.servlet.WebConfigurer</listener-class>
</listener>

<!– To allow session-scoped beans in Spring –>
<listener>
  <listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
</listener>
 
    <filter>
        <filter-name>JSONPFilter</filter-name>
        <filter-class>org.activiti.explorer.servlet.JsonpCallbackFilter</filter-class>
    </filter>
 
    <filter-mapping>
        <filter-name>JSONPFilter</filter-name>
        <url-pattern>/service/*</url-pattern>
    </filter-mapping>
</code>

vasile_dirla
Star Contributor
Star Contributor
Hi,
it seems your javascript application is trying to load the JSON of the model you want to edit but the url you provided is not working.

so, if I'll be you I'll try to use a set of mock services which will work for sure. (this way you could focus on the client application and someone else could work for the server-side area)

When the javascript application is working as expected with some mock data, you can go to the next step (the server side, if it's not already done by someone else).

if you don't know where you should change in order to load data from another path just search for this text in your js files.
<code>
/service/model/
</code>

Happy coding Smiley Happy