Can u help me customizing node and relative css of AllouUI DiagramBuilder ?
After a few attempts and thanks above all to the help of the previous posts on the same tool
AlloyUI (diagram-builder) extends
Add custom node to Alloyui DiagramBuilder in JAVA
How to add custom nodes and properties to AlloyUI diagram builder
I managed to create new custom nodes but CSS doesn't work as I expect:
If I modify the NAME attribute of the node, obtaining the application of the style defined by the CSS sheet (only the color at the moment) but I lose
enabling the Settings tab.
If I extend the css class diagram-node (.diagramnode;) with the desired background, the change is ignored.
JS:
<script type="text/javascript">
YUI().use('aui-diagram-builder',
function(Y) {
//definizione del nuovo DropDown
Y.CustomDropDownCellEditor = Y.Component
.create({
NAME : 'CustomDropDownCellEditor',
EXTENDS : Y.DropDownCellEditor
});
//definizione del nuovo nodo
Y.DiagramNodeCustomWithDropDown = Y.Component
.create({
NAME : 'diagram-node',
ATTRS : {
type : {
value : 'customTaskWithDropDown'
},
currency : {
validator : Y.Lang.isValue
}
},
EXTENDS : Y.DiagramNodeTask,
prototype : {
initializer : function() {
this.SERIALIZABLE_ATTRS
.push('choseOne');
},
//configura ed inserisce la dropDown
getPropertyModel : function() {
var model = Y.DiagramNodeTask.superclass.getPropertyModel
.apply(this, arguments);
var values = new Y.CustomDropDownCellEditor(
{
options : {
dollar : 'Dollar',
euro : 'Euro',
yen : 'Yen',
gold : 'Gold'
}
});
model
.push({
name : 'Currency',
attributeName : 'currency',
editor : values
});
return model;
}
}
});
//definiziane del secondo nodo custom
Y.DiagramNodeCustomWithTwoMoreField = Y.Component
.create({
NAME : 'diagram-node',
ATTRS : {
type : {
value : 'customWithTwoMoreField'
},
price : {
validator : Y.Lang.isString,
value : 'A Custom default'
},
cost : {
validator : Y.Lang.isString,
value : 'A Custom default'
}
},
EXTENDS : Y.DiagramNodeTask,
prototype : {
getPropertyModel : function() {
var model = Y.DiagramNodeTask.superclass.getPropertyModel
.apply(this,
arguments);
model
.push({
attributeName : 'price',
name : 'Price'
});
model.push({
attributeName : 'cost',
name : 'Cost'
});
return model;
}
}
});
Y.DiagramBuilder.types['customTaskWithDropDown'] = Y.DiagramNodeCustomWithDropDown;
Y.DiagramBuilder.types['customWithTwoMoreField'] = Y.DiagramNodeCustomWithTwoMoreField;
//ORIGINALE
var availableFields = [
....., {
iconClass : 'diagram-node-task-icon',
label : 'Limited Chose',
type : 'customTaskWithDropDown'
}, {
iconClass : 'diagram-node-state-icon',
label : 'Description State',
type : 'customWithTwoMoreField'
} .....
];
new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : [ {
name : 'HellGate',
type : 'start',
xy : [ 10, 10 ]
} ],
srcNode : '#DiagramBuilderBuilder'
}).render();
});
CSS:
.customdropdowncelleditor-hidden {
display: none;
}
.diagramnodecustomwithdropdown {
background-color: #00FFFF ;
}
.diagramnodecustomwithtwomorefield {
background-color: #FF0090 ;
}
How can I define two different styles for the DiagramNodeCustomWithDropDown and DiagramNodeCustomWithTwoMoreField nodes? I need to define background and border, nothing more for now.
To proceed further I am now trying to save the diagram on my database in json format (logically passing through a form and a servlet)
the obstacle in front of me is:
how do I save the result of the JS function on an hidden input:
Y.DiagramBuilder().toJSON() ??
perhaps it is useful to know that I am working in Liferay 7.1 ...
Here is my JSP page:
<div id="DiagramBuilderContainer">
<div id="DiagramBuilderBuilder"></div>
<div>
<portlet:actionURL var="editDiagramCampaign" name="editDiagramCampaign" >
<portlet:param name="mvcPath" value="/campaign-aui-diagramBuilder.jsp" />
<portlet:param name="redirect" value="<%=currentURL%>" />
<portlet:param name="campaignId" value="<%=String.valueOf(campaignId)%>" />
</portlet:actionURL>
<aui:form action="<%=editDiagramCampaign%>" method="post" name="saveDiagramForm">
<aui:model-context bean="<%=campaign%>" model="<%= Campaign.class %>" />
<aui:button-row>
<aui:input type="hidden" id="diagramBuilderHiddenJSON" name="diagramBuilderHiddenJSON" value="" />
<aui:button type="submit" id="saveDiagram" name="saveDiagram" value="Salva Diagramma"
onClick="updateDiagramBuilderHiddenJSON();" primary="true" />
</aui:button-row>
</aui:form>
</div>
</div>
<script type="text/javascript">
YUI().use('aui-diagram-builder',
function(Y) { ( *read above if u need it*) });
</script>
UPDATE:
Here the solution:
var availableFields = [ {...}, {...}, {...}, {...}, {...} ];
/** RETRIVE SAVED JSON DIAGRAM OR CREATE NEW ONE **/
var diagramBuilderObj = null;
var _campaignDiagramJSON = JSON.parse( '<%=campaignDiagramJSON%>' ) ;
if ( _campaignDiagramJSON && _campaignDiagramJSON != "" ) {
diagramBuilderObj = new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : _campaignDiagramJSON.nodes,
srcNode : '#DiagramBuilderBuilder'
}) ;
diagramBuilderObj.render();
} else {
diagramBuilderObj = new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : [ {
name : 'Start Here',
type : 'start',
xy : [ 10, 10 ]
} ],
srcNode : '#DiagramBuilderBuilder'
});
diagramBuilderObj.render();
}
/** SAVE MODIFIED JSON DIAGRAM TROUGH FORM **/
Y.one('#<portlet:namespace/>'+'saveDiagramButton').on('click', function() {
Y.one('#<portlet:namespace/>'+'diagramBuilderHiddenJSON').set('value', JSON.stringify( diagramBuilderObj.toJSON() ) );
});
NEW UPDATE:
Damn, it's not over yet...
and here I really ran out of ideas and can't find support elsewhere:
the conversion to json and the saving on db works but the recovery from json fails with the following error
TypeError: n.get(...) is undefined[Ulteriori informazioni] combo:15:2351
prepareTransition http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:15
_setTransitions http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:16
forEach self-hosted:262
forEach jQuery
_setTransitions http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:16
jQuery 7
syncConnectionsUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-property-builder/aui-property-builder-min.js&/o/frontend-js-web/aui/matrix/matrix-min.js&/o/frontend-js-web/aui/graphics/graphics-min.js&/o/frontend-js-web/aui/graphics-svg-default/graphics-svg-default-min.js&/o/frontend-js-web/aui/graphics-svg/graphics-svg-min.js&/o/frontend-js-web/aui/aui-diagram-builder-connector/aui-diagram-builder-connector-min.js&/o/frontend-js-web/aui/aui-diagram-node-manager-base/aui-diagram-node-manager-base-min.js&/o/frontend-js-web/aui/aui-diagram-node/aui-diagram-node-min.js&/o/frontend-js-web/aui/aui-diagram-node-state/aui-diagram-node-state-min.js&/o/frontend-js-web/aui/aui-diagram-node-condition/aui-diagram-node-condition-min.js&/o/frontend-js-web/aui/aui-diagram-node-end/aui-diagram-node-end-min.js&/o/frontend-js-web/aui/aui-diagram-node-fork/aui-diagram-node-fork-min.js&/o/frontend-js-web/aui/aui-diagram-node-join/aui-diagram-node-join-min.js:15
syncConnectionsUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-diagram-node-start/aui-diagram-node-start-min.js&/o/frontend-js-web/aui/aui-diagram-node-task/aui-diagram-node-task-min.js&/o/frontend-js-web/aui/aui-diagram-builder/aui-diagram-builder-min.js:3
each jQuery
forEach self-hosted:262
jQuery 2
syncConnectionsUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-diagram-node-start/aui-diagram-node-start-min.js&/o/frontend-js-web/aui/aui-diagram-node-task/aui-diagram-node-task-min.js&/o/frontend-js-web/aui/aui-diagram-builder/aui-diagram-builder-min.js:3
syncUI http://localhost:8080/combo/?browserId=firefox&minifierType=&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/aui-diagram-node-start/aui-diagram-node-start-min.js&/o/frontend-js-web/aui/aui-diagram-node-task/aui-diagram-node-task-min.js&/o/frontend-js-web/aui/aui-diagram-builder/aui-diagram-builder-min.js:3
renderer http://localhost:8080/combo?browserId=firefox&minifierType=js&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js&/o/frontend-js-web/aui/event-outside/event-outside.js&/o/frontend-js-web/aui/event-resize/event-resize.js&/o/frontend-js-web/aui/event-simulate/event-simulate.js&/o/frontend-js-web/aui/event-synthetic/event-synthetic.js&/o/frontend-js-web/aui/intl/intl.js&/o/frontend-js-web/aui/io-base/io-base.js&/o/frontend-js-web/aui/io-form/io-form.js&/o/frontend-js-web/aui/io-queue/io-queue.js&/o/frontend-js-web/aui/io-upload-iframe/io-upload-iframe.js&/o/frontend-js-web/aui/io-xdr/io-xdr.js&/o/frontend-js-web/aui/json-parse/json-parse.js&/o/frontend-js-web/aui/json-stringify/json-stringify.js&/o/frontend-js-web/aui/node-base/node-base.js&/o/frontend-js-web/aui/node-core/node-core.js&/o/frontend-js-web/aui/node-event-delegate/node-event-delegate.js&/o/frontend-js-web/aui/node-event-simulate/node-event-simulate.js&/o/frontend-js-web/aui/node-focusmanager/node-focusmanager.js&/o/frontend-js-web/aui/node-pluginhost/node-pluginhost.js&/o/frontend-js-web/aui/node-screen/node-screen.js&/o/frontend-js-web/aui/node-style/node-style.js&/o/frontend-js-web/aui/oop/oop.js&/o/frontend-js-web/aui/plugin/plugin.js&/o/frontend-js-web/aui/pluginhost-base/pluginhost-base.js&/o/frontend-js-web/aui/pluginhost-config/pluginhost-config.js&/o/frontend-js-web/aui/querystring-stringify-simple/querystring-stringify-simple.js&/o/frontend-js-web/aui/queue-promote/queue-promote.js&/o/frontend-js-web/aui/selector-css2/selector-css2.js&/o/frontend-js-web/aui/selector-css3/selector-css3.js&/o/frontend-js-web/aui/selector-native/selector-native.js&/o/frontend-js-web/aui/selector/selector.js&/o/frontend-js-web/aui/widget-base/widget-base.js&/o/frontend-js-web/aui/widget-htmlparser/widget-htmlparser.js&/o/frontend-js-web/aui/widget-skin/widget-skin.js:11923
_defRenderFn http://localhost:8080/combo?browserId=firefox&minifierType=js&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js&/o/frontend-js-web/aui/event-outside/event-outside.js&/o/frontend-js-web/aui/event-resize/event-resize.js&/o/frontend-js-web/aui/event-simulate/event-simulate.js&/o/frontend-js-web/aui/event-synthetic/event-synthetic.js&/o/frontend-js-web/aui/intl/intl.js&/o/frontend-js-web/aui/io-base/io-base.js&/o/frontend-js-web/aui/io-form/io-form.js&/o/frontend-js-web/aui/io-queue/io-queue.js&/o/frontend-js-web/aui/io-upload-iframe/io-upload-iframe.js&/o/frontend-js-web/aui/io-xdr/io-xdr.js&/o/frontend-js-web/aui/json-parse/json-parse.js&/o/frontend-js-web/aui/json-stringify/json-stringify.js&/o/frontend-js-web/aui/node-base/node-base.js&/o/frontend-js-web/aui/node-core/node-core.js&/o/frontend-js-web/aui/node-event-delegate/node-event-delegate.js&/o/frontend-js-web/aui/node-event-simulate/node-event-simulate.js&/o/frontend-js-web/aui/node-focusmanager/node-focusmanager.js&/o/frontend-js-web/aui/node-pluginhost/node-pluginhost.js&/o/frontend-js-web/aui/node-screen/node-screen.js&/o/frontend-js-web/aui/node-style/node-style.js&/o/frontend-js-web/aui/oop/oop.js&/o/frontend-js-web/aui/plugin/plugin.js&/o/frontend-js-web/aui/pluginhost-base/pluginhost-base.js&/o/frontend-js-web/aui/pluginhost-config/pluginhost-config.js&/o/frontend-js-web/aui/querystring-stringify-simple/querystring-stringify-simple.js&/o/frontend-js-web/aui/queue-promote/queue-promote.js&/o/frontend-js-web/aui/selector-css2/selector-css2.js&/o/frontend-js-web/aui/selector-css3/selector-css3.js&/o/frontend-js-web/aui/selector-native/selector-native.js&/o/frontend-js-web/aui/selector/selector.js&/o/frontend-js-web/aui/widget-base/widget-base.js&/o/frontend-js-web/aui/widget-htmlparser/widget-htmlparser.js&/o/frontend-js-web/aui/widget-skin/widget-skin.js:11897
jQuery 3
render http://localhost:8080/combo?browserId=firefox&minifierType=js&languageId=en_US&b=7102&t=1552559958516&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js&/o/frontend-js-web/aui/event-outside/event-outside.js&/o/frontend-js-web/aui/event-resize/event-resize.js&/o/frontend-js-web/aui/event-simulate/event-simulate.js&/o/frontend-js-web/aui/event-synthetic/event-synthetic.js&/o/frontend-js-web/aui/intl/intl.js&/o/frontend-js-web/aui/io-base/io-base.js&/o/frontend-js-web/aui/io-form/io-form.js&/o/frontend-js-web/aui/io-queue/io-queue.js&/o/frontend-js-web/aui/io-upload-iframe/io-upload-iframe.js&/o/frontend-js-web/aui/io-xdr/io-xdr.js&/o/frontend-js-web/aui/json-parse/json-parse.js&/o/frontend-js-web/aui/json-stringify/json-stringify.js&/o/frontend-js-web/aui/node-base/node-base.js&/o/frontend-js-web/aui/node-core/node-core.js&/o/frontend-js-web/aui/node-event-delegate/node-event-delegate.js&/o/frontend-js-web/aui/node-event-simulate/node-event-simulate.js&/o/frontend-js-web/aui/node-focusmanager/node-focusmanager.js&/o/frontend-js-web/aui/node-pluginhost/node-pluginhost.js&/o/frontend-js-web/aui/node-screen/node-screen.js&/o/frontend-js-web/aui/node-style/node-style.js&/o/frontend-js-web/aui/oop/oop.js&/o/frontend-js-web/aui/plugin/plugin.js&/o/frontend-js-web/aui/pluginhost-base/pluginhost-base.js&/o/frontend-js-web/aui/pluginhost-config/pluginhost-config.js&/o/frontend-js-web/aui/querystring-stringify-simple/querystring-stringify-simple.js&/o/frontend-js-web/aui/queue-promote/queue-promote.js&/o/frontend-js-web/aui/selector-css2/selector-css2.js&/o/frontend-js-web/aui/selector-css3/selector-css3.js&/o/frontend-js-web/aui/selector-native/selector-native.js&/o/frontend-js-web/aui/selector/selector.js&/o/frontend-js-web/aui/widget-base/widget-base.js&/o/frontend-js-web/aui/widget-htmlparser/widget-htmlparser.js&/o/frontend-js-web/aui/widget-skin/widget-skin.js:11881
<anonima> http://localhost:8080/group/guest/~/control_panel/manage?p_p_id=it_treeffe_feedback_web_portlet_CampaignManagementPortlet&p_p_lifecycle=0&p_p_state=maximized&p_p_mode=view&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_redirect=http://localhost:8080/group/guest/~/control_panel/manage?p_p_id=it_treeffe_feedback_web_portlet_CampaignManagementPortlet&p_p_lifecycle=0&p_p_state=maximized&p_p_mode=view&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_mvcPath=%2Fview_campaign_crud_mngToolbar.jsp&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_cur=1&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_delta=10&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_orderByCol=modifiedDate&p_p_auth=O2ifcGJf&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_mvcPath=/campaign-aui-diagramBuilder.jsp&_it_treeffe_feedback_web_portlet_CampaignManagementPortlet_campaignId=109&p_p_auth=O2ifcGJf line 355 > scriptElement:143
jQuery 34
The script of the diagram Builder is above, and then i leave a json for a nonsense diagram used for the test.
JSON:
{"nodes":[{"transitions":[{"source":"Tutto Comincia Qui","target":"fork1259","uid":"yui_patched_v3_18_1_2_1554213706673_1417","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector1433","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[657.7999877929688,255.10000610351562],"p2":[988,344]}}],"description":"","name":"Tutto Comincia Qui","required":false,"type":"start","width":40,"height":40,"zIndex":100,"xy":[10,10]},{"transitions":[{"source":"fork1259","target":"condition1779","uid":"yui_patched_v3_18_1_2_1554213706673_1937","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector1953","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1013,369],"p2":[898,482]}},{"source":"fork1259","target":"condition2254","uid":"yui_patched_v3_18_1_2_1554213706673_2412","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector2428","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1038,344],"p2":[1220,377]}}],"description":"","name":"fork1259","required":false,"type":"fork","width":60,"height":60,"zIndex":100,"xy":[370.20001220703125,91.89999389648438]},{"transitions":[{"source":"condition1779","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_3313","sourceXY":[60,30],"targetXY":[27.199951171875,4.9000091552734375],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector3329","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[908,492],"p2":[1069.800048828125,621.0999755859375]}},{"source":"condition1779","target":"state3603","uid":"yui_patched_v3_18_1_2_1554213706673_3761","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector3777","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[883,517],"p2":[874.7999877929688,679.0999755859375]}}],"description":"","name":"condition1779","required":false,"type":"condition","width":60,"height":60,"zIndex":100,"xy":[240.20001220703125,239.89999389648438]},{"transitions":[{"source":"condition2254","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_2948","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector2964","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1245,402],"p2":[1129.800048828125,621.0999755859375]}},{"source":"condition2254","target":"state4334","uid":"yui_patched_v3_18_1_2_1554213706673_4492","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector4508","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1245,402],"p2":[1302.800048828125,667.0999755859375]}}],"description":"","name":"condition2254","required":false,"type":"condition","width":60,"height":60,"zIndex":100,"xy":[602.2000122070312,124.90000915527344]},{"transitions":[{"source":"customTaskWithDropDown2790","target":"customStateWithTwoMoreField7588","uid":"yui_patched_v3_18_1_2_1554213706673_7746","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector7762","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1129.800048828125,681.0999755859375],"p2":[1130,788]}}],"description":"","name":"customTaskWithDropDown2790","required":false,"type":"customTaskWithDropDown","width":70,"height":70,"zIndex":100,"xy":[452.20001220703125,394.90000915527344]},{"transitions":[{"source":"state3603","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_7246","sourceXY":[37.20001220703125,20.899993896484375],"targetXY":[7.199951171875,45.899993896484375],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector7262","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[887.7999877929688,692.0999755859375],"p2":[1069.800048828125,681.0999755859375]}}],"description":"","name":"state3603","required":false,"type":"state","width":40,"height":40,"zIndex":100,"xy":[240,452]},{"transitions":[{"source":"state4334","target":"customTaskWithDropDown2790","uid":"yui_patched_v3_18_1_2_1554213706673_6965","sourceXY":[1.199951171875,18.899993896484375],"targetXY":[65.199951171875,34.899993896484375],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector6981","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1289.800048828125,682.0999755859375],"p2":[1129.800048828125,681.0999755859375]}}],"description":"","name":"state4334","required":false,"type":"state","width":40,"height":40,"zIndex":100,"xy":[672.2000122070312,440.90000915527344]},{"transitions":[{"source":"customStateWithTwoMoreField7588","target":"end8225","uid":"yui_patched_v3_18_1_2_1554213706673_8383","sourceXY":[],"targetXY":[],"connector":{"color":"#27aae1","lazyDraw":false,"name":"connector8399","shapeSelected":{"stroke":{"color":"#ff6600","weight":5,"opacity":0.8}},"shapeHover":{"stroke":{"color":"#ffd700","weight":5,"opacity":0.8}},"p1":[1113,801],"p2":[942,789]}}],"description":"","name":"customStateWithTwoMoreField7588","required":false,"type":"customStateWithTwoMoreField","width":40,"height":40,"zIndex":100,"xy":[495.20001220703125,560.8999938964844]},{"transitions":[],"description":"","name":"end8225","required":false,"type":"end","width":40,"height":40,"zIndex":100,"xy":[294.20001220703125,543.9000091552734]}]}
Is there anyone who can help me?
LAST UPDATE (SOLUTION):
I have published the solution in my comment HERE
Have a nice day!
I am successfully loading JSON data into datatables. But i want to add some processing into specific row. How can I accomplsih this?
I want to add a button
Use the button to send an row ID retrieved from the JSON object into another page for database processing
Here is my JS:
<script>
$.getJSON('../vendor/process/process_vendor.php', function(response) {
var vendButton = '<button>EDIT</button>';
$('#vendorlist').DataTable({
processing: true,
data: response,
columns: [
{data: "CLIENT_ID"},
{data: "CLIENT_NAME"},
{data: "CLIENT_ADDR"},
{data: "CLIENT_LOC"},
{data: "CLIENT_PROV"},
{data: "CLIENT_CONT_PERS"},
{data: "CLIENT_CONT_PH1"},
{data: "CLIENT_CONT_PH2"},
{data: "CLIENT_CONT_FAX"},
vendButton
]
});
window.someGlobalOrWhatever = response.balance;
});
</script>
So far the problem is i cant initialize the vendButton and I couldn't retrieve the specific row ID using CLIENT_ID:
This is the data from JSON response:
[
{
"CLIENT_ID" : "CL0000001",
"CLIENT_NAME" : "ABHIRAMA KRESNA",
"CLIENT_ENT_DATE" : "12-NOV-14",
"CLIENT_ENT_SIGN" : "chrishutagalung",
"CLIENT_CONT_PERS" : null,
"CLIENT_CONT_PH1" : null,
"CLIENT_CONT_PH2" : null,
"CLIENT_CONT_FAX" : null,
"CLIENT_ADDR" : "JL AMARTA BLOK G NO 10 GROGOL",
"CLIENT_LOC" : "SOLO",
"CLIENT_PROV" : null,
"CLIENT_INIT" : "ABK",
"CLIENT_NPWP" : null
}
]
columns is an object describing columns model. You try to simply add a string to it.
Probably, you need to iterate through all objects and add this button to every object.
<script>
$.getJSON('../vendor/process/process_vendor.php', function(response) {
$.each(response, function() {
this.vendButton = "<button data-id='" + this.CLIENT_ID + "'>EDIT</button>";
});
$('#vendorlist').DataTable({
processing: true,
data: response,
columns: [
{data: "CLIENT_ID"},
{data: "CLIENT_NAME"},
{data: "CLIENT_ADDR"},
{data: "CLIENT_LOC"},
{data: "CLIENT_PROV"},
{data: "CLIENT_CONT_PERS"},
{data: "CLIENT_CONT_PH1"},
{data: "CLIENT_CONT_PH2"},
{data: "CLIENT_CONT_FAX"},
{data: "vendButton"}
]
});
window.someGlobalOrWhatever = response.balance;
});
</script>
This will generate another one column with code like this:
<button data-id='123'>EDIT</button>
where 123 is CLIENT_ID for specific row.
Then, on click, you can simply access it like
.click(function()
{
var id = $(this).data('id');
});
You can also use DataTables API to draw this column programmatically.
Refer to an official DataTables example.