Front end theme with angular


#1

Is possible to create a theme with Angular? If yes, is there any documentation about this?


RESTful web services
#2

Yes, you can use other frontend technologies. But due to the specifics of Angular.js (it is a single-application Javascript MVC), you will need to convert the application you are interested in and hard-wire the request calls.

The reason is that with Angular.JS you load the HTML once and then subsequently partially update the screen with new asynchroneous requests. The applications can work like that, but they were built as multi-page applications. So a conversion is needed.

There is no documentation availble at this moment, but you can find similar apps on the internet (we have done projects like this in the past, too). Take a look at https://github.com/madppiper/lazyplanner for example - it uses ExtJS, which is very similar to Angular. I personally tested this component on Scipio ERP and it works out-of-the box if you just put it in your addons or hot-deploy directory.

If you have your mind set on using Angular, we can support you on your endavour…


#3

Perhaps for your interest:

The ignite themes also have a built-in switch, which allow them to work as single-page applications, too. They are not based on Angular, but Bootstrap 4, however.


#4

Updated on Dec 22nd: Simplified the component creation process

Ok, so I promised a bit more detailed response on this topic:

Basically when you use Angular.JS you work differently with the application as you normally would. Angular is meant to be used in a single-page application, which the scipio erp applications (shop included) are not. This is a crucial difference as it demands you to design an application with all its user interaction in angular and the Scipio Screen definitions. So if you want to use Angular in combination with the shop, what you ask for in reality is that you want to use the services (ie functions), database design and backend, but not the store screens or themes (or most of the templating toolkit).

Luckily, you can just do that, because you can create a copy of the shop webapp, and just tell the system to respond in json objects instead of screens. That way you can call the requests in your own Angular.JS application and work with the data there as you intended from inside Angular.

Before you attempt to do this, however, you will need to understand the following:

This will give you the basic understanding of what elements in an component you are working with. Next up: creating a new shop based on angular.js. Since Angular is so different, i would not mess with the theme structure at the moment. We are working on Javascript MVC based themes, but I have a feeling that you may want to work with Angular in a way that you are familiar with. So I will try to describe that approach instead.

  1. Create a new component in hot-deploy as described here. You can use the ant task for that:

ant create-component-shop-override

This leaves you with a new directory in /hot-deploy under the name you specified.


This will basically give you a new component (webapp) to work with. It derives from the original shop, so that you can rely on future updates, but essentially allows you to add your own changes there.

Add your angular application into the hot-deploy/your-app/webapp/your-app/ directory. You can restart the server (make sure to reseed with ant load-demo) and open https://localhost:8443/shop. You will now find your angular application there.

Next you will need to rewire the requests to your own application. The example i gave you earlier (the EXT.JS one) does the exact same thing. Take a look at the controller.xml they use. There you will see that it essentially turns controller events and turns the result into JSON objects. You can do the same thing here.

Since you included the shop controller.xml you can now take a look at component://shop/webapp/shop/WEB-INF/controller.xml. Copy over all entries you want to use in your application and change the responses to

That way it will still follow the same logic, but not do the redirects or such and instead return the resulting context as a json object. It should work for your endavour here. I gave a more detailed explanation here:


A more sophisticated way instead of using REST-like service calls would be to implement an RPC handler. We did so in other customer projects and have had positive experiences with it.

I hope that helps clarify it all a bit more. Feel free to contact us if you require any help. You can also hire us for a more detailed websession or help you on the basics here.


#5

I will probably post an update in this thread, once i can give you a more info on how our own tests develope with an angular “theme” (which would be more inline with our general theme mechanism and all).