Mats Bryntse
7 June 2012

Implementation Spotlight: DecidoKompetensor

About DecidoKompetensor DecidoKompetensor, with their 65 employees, is one of southern Sweden’s leading ERP consultant companies. The company is focusing […]

About DecidoKompetensor

DecidoKompetensor, with their
65 employees, is one of southern
Sweden’s leading ERP consultant companies. The company is focusing mainly on Microsoft Dynamics (AX and NAV) and ERP’s based on the IBM Power platform (Bison, PRMS).
Linked to ERP, DecidoKompetensor has a group called User Productivity (UP). User Productivity was born as a concept, based on Thomas Landauer’s book – The trouble with computers: Usefulness, usability and productivity (1995). In this book, Landauer talks about a paradox: even though computers evolve very rapidly, users rarely benefit from this development in terms of increased productivity. In DecidoKompetensor, User Productivity is targeting four application areas:  Web/Mobile, Business Intelligence, SharePoint, and e-Commerce. The common denominator for all these four areas is the target of making the user more productive.

DecidoKompetensor´s main focus is to release the full potential of their customers ERP systems, using modern technology. This could in practice mean offering a B2B e-commerce system, a Rich Internet Application or even to create an order management process designed for iPads.

 

Case story (by Fredric Berling, DecidoKompetensor)

In one of our recent projects, we helped a large kitchen manufacturer to create a visual planner for their production line. The planner UI was built using Ext Scheduler and Ext JS. The customer already owned a very powerful system for handling all the process parameters but lacked a visual interface to be able to see the complete picture.

A kitchen is of course made in several steps in different product lines involving a lot of different people. Every kitchen component is ordered and manufactured on demand when a customer order is placed. To be able to keep the delivery times and maintain a normal workload in the different parts of the factory the client needed a visual planning tool. Together with the client we came up with the following prototype of how this could be visualized.

Delivery Planner

 

The system itself has a pretty good idea of how the kitchen assembly process should be planned according to order stock, delivery times and many other parameters. Based on this data, the application presents a draft of how the production plan should be. This results in a plan that sometimes takes more than 24 hours to complete, requiring a bit of manual adjustment. The visual planner helps visualize and highlight the critical spots in the production plan and the responsible operator can easily drag and reorder the deliveries in the plan to improve it. By tweaking soft parameters and adding additional human resources on some shifts, the plan can be altered to fit within the given time slot.

Why did you choose Ext Scheduler?

When our client originally addressed us with a need for an interactive scheduling component, it was easy to choose. The Bryntum components are well reputed and widely known in the Sencha community. Considering that we are already experienced with Ext JS, we quickly started prototyping the Ext Scheduler. It really is no different from working with any other components in the Ext JS framework. If you have a basic understanding of the Ext JS grid panel and the data package, you can implement the scheduler in less than an hour.

Based on the requirements of our client, we also knew that we would need to do some customization of the look and behavior. After a bit of testing there was no doubt that it could be done without changing the core code of the product. Since every bit and piece of Ext Scheduler is built with customization in mind, it is very easy to swap out a default behavior for something new. This means we don’t have to override any internal code of the component, which in its turn means very simple updates when newer versions of Ext Scheduler become available. Bryntum has always been fast on fixing bugs and we are confident that they will keep up with future versions of web browsers and framework changes.

Implementation Details

In the kitchen production factory, the final step before shipping is of course to load the kitchen parts onto a truck. This had to be indicated in the schedule as as a vertical line. Each individual assembly step prior to the loading is represented by one horizontal bar for each batch. Every assembly bar should also clearly indicate to which batch it belongs, and this was easily solved using a custom eventTemplate.

The implementation of the visual planner had one requirement that the Scheduler did not support out of the box. The planning operator has to be able to drag the delivery timelines around, together with all the connected tasks belonging to that particular batch. To solve this, a custom Ext JS DragZone was implemented, that enabled each delivery timeline to be draggable. In the onDragDrop callback, each related event record is updated according to the new batch delivery time.

DecidoKompetensor was kind enough to share the code for this implementation with us, and together we “examplified” into a simple sample that you can find in the Ext Scheduler examples folder. It is called “event-groups” and below is a screenshot of it.

The planner example

Summing it up

We hope this implementation spotlight has given you some ideas to use in your own implementation. You can find the online version of the example here. If you have any feedback or suggestions for improvements, please let your voice be heard in the comments or our forums.

Mats Bryntse

Uncategorized