topic Re: Include Activiti Modeler from Activiti Explorer in my angular web application in Alfresco Archive

Include Activiti Modeler from Activiti Explorer in my angular web application

bhakti — Tue, 18 Aug 2015 10:41:53 GMT

Hi AllI 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 applicationCan you please share the

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

bhakti — Wed, 19 Aug 2015 05:36:16 GMT

Any help would be great please help, need this urgently

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

vasile_dirla — Wed, 19 Aug 2015 08:38:34 GMT

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

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

bhakti — Wed, 19 Aug 2015 08:51:11 GMT

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…

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

bhakti — Wed, 26 Aug 2015 12:55:09 GMT

Any Help

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

vasile_dirla — Wed, 26 Aug 2015 14:13:02 GMT

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.

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

bhakti — Wed, 26 Aug 2015 15:17:51 GMT

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

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

bhakti — Wed, 26 Aug 2015 15:19:33 GMT

Any Help With this info

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

bhakti — Wed, 26 Aug 2015 15:28:01 GMT

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>

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

vasile_dirla — Wed, 26 Aug 2015 21:58:27 GMT

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

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

bhakti — Thu, 27 Aug 2015 06:34:01 GMT

Hi Vaslie,

I got it !!!!! Hippy !!! It works - i just started the tomcat this mrg and refresh browser cache

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

vasile_dirla — Thu, 27 Aug 2015 07:24:14 GMT

Hi,
So you managed to extract the modeller application and now it's working as expected.
good job !

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

tappan-lau — Tue, 22 Sep 2015 10:30:42 GMT

hi Bhakti,
I have encountered the same problem?how to do it?

Re: Include Activiti Modeler from Activiti Explorer in my angular web application

anandaraaj_part — Wed, 30 Sep 2015 12:57:11 GMT

Guys, I have the same requirement. Can someone post the steps.

I want to extract the activiti-modeller and want to use in my web application