CODEWITHSUNDEEP
javascriptjqueryangularjsframeworksworkflow
ElHaix
ElHaix

Reputation: 13006

What is a good JavaScript or AngularJS workflow framework for drag/drop, grouping and drill-down?

I have been looking at several other suggested frameworks (and others) to fulfil our needs, but the examples in some seem to be too basic, or don't really show what I'm looking for.

I would like to create a flow-based programming type client-side editor.

Here is a basic wire-frame I created to assist (Something similar to the soon-to-be discontinued Yahoo! Pipes editor, but with different features...):

Workflow Editor

Using the AngularJS Drag and Drop library gives me some of the features (containers, items), but I can't see this working the way I'm hoping.

NoFlowJS is not what I am looking for, although this is pretty cool.

I would like the user to make their selections from the LHS, where if a group like Cats is dragged over to the right, a new "Selected Groups" section would contain all subsequent. Similarly with Cities, below. Basically being able to define a grouping type container.

In this case, Cats is a grouping of cat types, Dogs, the same, etc.

The user can then link the Selected Groups to the Selected Cities - so be able to link grouping containers on the RHS.

This last requirement isn't difficult to implement with regular JS, however, some frameworks I have seen are GL type and may not be as simple to implement: if double-clicking on any of the individual groups, I would have a modal window pop up with the group's properties, ie. Cats {tabby, calico, etc.} (or do anything else).

The lists on the LHS are scrollable.

The current technology stack is AngularJS, KendoUI .Net MVC5, C#.

I see this as all being client-side until the user wishes to save the current status.

I would appreciate some suggestions - maybe some are a combination of different technologies, but all the same, would like some direction on this.

Thank you.

Upvotes: 0

Views: 2903

Answers (2)

ElHaix
ElHaix

Reputation: 13006

I believe I found what I was looking for with ng-sortable.

Great demo here.

enter image description here

Upvotes: 1

Kevin Seifert
Kevin Seifert

Reputation: 3582

I would just use a side by side select list. For example, like:

http://www.jqueryscript.net/form/jQuery-Plugin-For-Side-By-Side-Multi-Items-Pick-List.html

Drag and drop won't work on a mobile/tablet device and is tedious to do with a mouse. :-)

Upvotes: 0

Related Questions