Form and DataProcessor used with multiple window instances

Suite and Optimus Suite 5
#1

I have a tree and a context menu.
When a user uses the context menu there’s an option to edit the data associated with the node.
This action opens a form which is attached to a DHTMLX Window. The form uses a DataProcessor to load and save the data.

This action works fine if one item is selected for editing.
If a second item is selected for editing the data processor no longer works in the first window, however the new window has the functionality for saving and editing.
I would like to allow users to have several forms open for editing if they need to.

Is this possible? If so is there a code example to support this use case? or some guidance on how to achieve this?

Many thanks.

#2

Hi,

Just be sure that you are initializing separate instances of a data processor for each form.

There is no any limitation on a number of editable components. Each data processor works standalone, so you can have as many active forms on screen as necessary, while each one has its own data processor object.

#3

Hi Stanislav, thanks for your reply.
It’s one form that is attached to multiple window instances - so the same form with different content can be opened and edited in many windows if required, for example ‘copy and paste content’ from one form into another.

Is there a way of creating a unique dataProcessor object for each form/window instance dynamically?
Here’s a code sample that is triggered when a user clicks ‘Edit data source’ from a context menu:

[code]var app = app || {}; //namespace for editor application

app.attach_edit_template_sql_data_source_form = function (iNodeID, strTemplateName){

    //create a unique window
app.data_source_window = app.main_window.createWindow("w" + iNodeID, 10, 10, 300, 190);
app.data_source_window.setText(strTemplateName + ": ");


app.edit_template_sql_data_source_form = app.data_source_window.attachForm(
		[                                      //defines form controls
		                               	    {type: "block", list:[
		                               			{type: "fieldset",  name: "mydata", label: "Table Data Source", width:400, list:[
		                               			    {type: "combo", name:"data_connection_id", label: "Connection Name", connector: "./resources/data/dataConnectionsCombo.php", position:"label-left", labelWidth: 100, inputWidth: 240},
                                     				
		                               				{type: "input", name:"alias", label: "Alias",  position:"label-left", labelWidth: 100, inputWidth: 120},
		 
		                               				{type: "input", name:"date_added", label: "Date Added", position:"label-left", labelWidth: 125, inputWidth: 273, hidden: true},
		                               				{type: "input", name:"date_modified", label: "Date Modified", position:"label-left", labelWidth: 125, inputWidth: 273, hidden: true},
		                               				{type: "input", name:"active", label: "Active", value: "Y", position:"label-left", labelWidth: 125, inputWidth: 273, hidden: true},
		                               				{type: "input", name:"deleted", label: "Deleted", value: "N", position:"label-left", labelWidth: 125, inputWidth: 273, hidden: true},
		                               				{type: "button", name:"save_data_source", offsetTop:10,offsetLeft:100, value:"Submit"}
		                                       ]}]}
		                               	]
);

var iTemplateID  = app.template_tree.getUserData(app.template_tree.getSelectedItemId(),'template_id');
var iNodeID  = app.template_tree.getUserData(app.template_tree.getSelectedItemId(),'node_id');
var iRootNodeID  = app.template_tree.getUserData(app.template_tree.getSelectedItemId(),'root_node_id');
var iObjectID = app.template_tree.getUserData(app.template_tree.getSelectedItemId(),'object_id');

//Initialise the dataprocesser and pass through some parameters required for building the record
var dp = new dataProcessor('./resources/data/templateSQLDataSourceDataProcessor.php?id='+iObjectID+'&templateID='+iTemplateID+'&nodeID='+iNodeID);

dp.attachEvent("onAfterUpdate", function(id, action, tid, response){
    app.template_tree.smartRefreshBranch(1,'./resources/data/templateTreeView.php');
})
	
dp.init(app.edit_template_sql_data_source_form);
dp.enableDebug();

//Get the form data
var iDataSourceID  = app.template_tree.getUserData(app.template_tree.getSelectedItemId(),'object_id');
app.edit_template_sql_data_source_form.load('./resources/data/templateSQLDataSourceDataProcessor.php?id='+iDataSourceID+'&templateID='+iTemplateID+'&nodeID='+iNodeID);

//create event handler to save data on button click
  app.edit_template_sql_data_source_form.attachEvent("onButtonClick",function(buttonID){
    if(buttonID=="save_data_source"){
    	app.edit_template_sql_data_source_form.save();//no params needed.It uses url that you passed to dataprocessor
    	
    }
  })

};[/code]

I can see I am using just one instance of the data processor, but cannot work out how to create an instance dynamically so there is no duplication of the instance name… which would then allow saving in each form/window.
Also would the form need to labelled uniquely too?

Any advice, code example or a work around would be helpful.

Many thanks.

#4

Each time you create a new dhtmlxForm object you need to attach a new unique dhtmlxDataprocessor object for it.
If you have only a singe dhtmlxForm object you also should have only a single dataprocessor attached to this form.

#5

Thanks for your advice - I understand and have used JavaScript bracket notation to uniquely identify each DHTMLX form and DHTMLX dataProcessor within the application namespace. It works and solves the problem.