Saving Custom Tab Data in TaskEditor

Ask for help related to our 2.x versions.
Post Reply
User avatar
jessica.bailey
Posts: 13
Joined: Fri May 24, 2013 6:15 pm

Saving Custom Tab Data in TaskEditor

Post by jessica.bailey » Fri May 24, 2013 6:26 pm

Hello,

I added a new tab in my TaskEditor, with 5 fields (two combobox, two checkboxfield, and a textfield) for custom task data. I have two questions:

1. How do I get them to populate from data saved in my task?
2. How do I get them to save data to my task?

When I click save, and have edited those fields, it just closes the window, without any save. I saw on one of the forum posts that I should use loadtask and afterupdatetask, but the documentation for these is a bit sparse so I am not sure how to use them.

Any info would be appreciated!

Thank you!

User avatar
arcady
Core Developer
Core Developer
Posts: 2209
Joined: Wed Mar 20, 2013 6:57 am

Re: Saving Custom Tab Data in TaskEditor

Post by arcady » Sat May 25, 2013 10:44 pm

It pretty much depends on how you've implemented that new tab.

To populate fields 'loadtask' event can be used. It receives task being loaded as an argument.
So idea is to get values from task data and put them to fields that you have created. Something like this:

Code: Select all

        ...
        loadtask : function (taskeditor, task) {
            field1.setValue(task.get('foo'));
            field2.setValue(task.get('bar'));
            ...
        }
And in 'beforeupdatetask' or 'afterupdatetask' listener you can implement saving. Something like this:

Code: Select all

        ...
        afterupdatetask : function (taskeditor, task) {
            task.set('foo', field1.getValue());
            task.set('bar', field2.getValue());
            ...
        }
I made a short example of how it could be implemented using our TaskForm class. But as I already noted your implementation may differ. I also added listener to support validation by the new tab:

Code: Select all

// custom form, with custom fields. it will be used as a new tab
var customForm = new Gnt.widget.taskeditor.TaskForm({
    title : 'Custom form panel',
    xtype : 'taskform',
    items : [
        {
            fieldLabel  : 'Foo field',
            name        : 'foo',
            allowBlank  : false
        }
    ],
    taskStore   : taskStore
});

var taskEditor = Ext.create('Gnt.plugin.TaskEditor', {
    tabsConfig: {
        // register our custom form as a new tab
        items: customForm
    },
    listeners   : {
        loadtask : function (taskeditor, task) {
            //load task to our custom form
            customForm.loadRecord(task);
        },
        afterupdatetask : function (taskeditor) {
            //save form field data to the task
            customForm.updateRecord();
        },
        validate : function (taskeditor, tabToFocus) {
            if (!customForm.isValid()) {
                // if no other tabs with some invalid control
                if (!tabToFocus) {
                    var activeTab = taskeditor.getActiveTab();
                    // if our field is not placed at currently active tab
                    if (customForm !== activeTab) {
                        // then we'll switch to tab where our field resides
                        taskeditor.setActiveTab(customForm);
                    }
                }
                // return false since validation failed
                return false;
            }
        }
    }
});

User avatar
jessica.bailey
Posts: 13
Joined: Fri May 24, 2013 6:15 pm

Re: Saving Custom Tab Data in TaskEditor

Post by jessica.bailey » Mon May 27, 2013 7:03 pm

Thank you! Your example was really helpful. It works great for my textfield but is having some trouble with the checkbox and the combobox. It will load the checkbox but regardless or checked or not it gets saved as null. The combo box just saves 0 and doesn't load the selected value. Any help would be greatly appreciated!

Here is my custom form and task editor:

Code: Select all

var customForm = new Gnt.widget.taskeditor.TaskForm({
            title : 'Assignments/Notifications',
            xtype : 'taskform',
            items : [{
                xtype: 'combobox',
                fieldLabel  : 'Staff',
                id: 'staff',
                name: 'NotifyUSRAdminUsers_ID',
                forceSelection: true,
                displayField: 'FullName',
                valueField: 'NotifyUSRAdminUsers_ID',
                store: staffStore
            },
            {
                xtype: 'combobox',
                fieldLabel  : 'Franchise Supplier',
                id: 'franchise-supplier',
                name: 'NotifyALRHFranchiseSuppliers_ID',
                forceSelection: true,
                displayField: 'SupplierName',
                valueField: 'NotifyALRHFranchiseSuppliers_ID',
                store: franchiseSupplierStore
            },
            {
                xtype: 'checkboxfield',
                id: 'pm',
                name: 'NotifyProjectManager',
                boxLabel  : 'Notify project manager when task is due to begin',
                boxLabelAlign: 'after',
                allowBlank: true,
                inputValue: 'NotifyProjectManager'
            },
            {
                xtype: 'checkboxfield',
                id: 'client',
                name: 'NotifyClient',
                boxLabel  : 'Notify client when task is due to begin',
                boxLabelAlign: 'after',
                allowBlank: true,
                inputValue: 'NotifyClient'
            },
            {
                xtype: 'textfield',
                id: 'other',
                name: 'NotifyOther',
                fieldLabel  : 'Notify other person when task is due to begin',
                allowBlank: true,
                vtype: 'email'
            }],
            taskStore   : taskStore
        });
        
        
        /**
         * Shows when a task is double-clicked. Includes all information regarding a task. 
         */
        var taskEditor = Ext.create("Gnt.plugin.TaskEditor", {
            // window title
            title: 'Task Editor',
            showAssignmentGrid: false,
            showAdvancedForm: false,
            tabsConfig: {
                items: customForm
            },
            listeners   : {
                loadtask : function (taskeditor, task) {
                    //load task to our custom form
                    customForm.loadRecord(task);
                },
                afterupdatetask : function (taskeditor) {
                    //save form field data to the task
                    customForm.updateRecord();
                },
                validate : function (taskeditor, tabToFocus) {
                    if (!customForm.isValid()) {
                        // if no other tabs with some invalid control
                        if (!tabToFocus) {
                            var activeTab = taskeditor.getActiveTab();
                            // if our field is not placed at currently active tab
                            if (customForm !== activeTab) {
                                // then we'll switch to tab where our field resides
                                taskeditor.setActiveTab(customForm);
                            }
                        }
                        // return false since validation failed
                        return false;
                    }
                }
            }
        });
The Franchise combobox and the Staff combobox all have their own store that populates the list. Here is the model used for it. I want to store the actual ID, not the name (but have the name displayed in the box).

Code: Select all

        
Ext.define('StaffMember', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'FirstName',  type: 'string'},
                {name: 'LastName',  type: 'string'},
                {name: 'FullName',  type: 'string'},
                {name: 'USRAdminUsers_Id',   type: 'int'}
            ]
        });
            Ext.define('FranchiseSupplier', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'SupplierName',  type: 'string'},
                {name: 'SupplierEmail',  type: 'string'},
                {name: 'ID',   type: 'int'}
            ]
        });

User avatar
arcady
Core Developer
Core Developer
Posts: 2209
Joined: Wed Mar 20, 2013 6:57 am

Re: Saving Custom Tab Data in TaskEditor

Post by arcady » Mon May 27, 2013 9:58 pm

First about the combobox:

Code: Select all

           {
                xtype: 'combobox',
                fieldLabel  : 'Staff',
                id: 'staff',
                name: 'NotifyUSRAdminUsers_ID',
                forceSelection: true,
                displayField: 'FullName',
                valueField: 'NotifyUSRAdminUsers_ID',
                store: staffStore
            },
Here is 'name' must specify your custom attribute of the task. So it defines task field where selected value will be stored.
And 'displayField' and 'valueField' must point to the attributes of the selection list record (must point to fields of StaffMember model in this case). But instead valueField points to 'NotifyUSRAdminUsers_ID'. There probably should be 'USRAdminUsers_Id' column. And the same problem with other combobox ..property points to wrong column.

And considering your checkboxes:

Code: Select all

                {
                    xtype: 'checkboxfield',
                    id: 'client',
                    name: 'NotifyClient',
                    boxLabel  : 'Notify client when task is due to begin',
                    boxLabelAlign: 'after',
                    allowBlank: true,
                    inputValue: 'NotifyClient'
                },
I'm really suspicious about 'inputValue' config. Why is it set to 'NotifyClient'?
This setting means that when checkbox is selected then field value must be set to 'NotifyClient' string.
I mean it can work of course if you defined NotifyClient column type as string ..no problem.
Still it's kind of odd for me. For such type of fields values like 1, "on", true are used normally.
What's the type of NotifyClient column? ..And the same thing is for all checkboxes.
Actually after I set combobox columns as I said everything started to work for me.

User avatar
jessica.bailey
Posts: 13
Joined: Fri May 24, 2013 6:15 pm

Re: Saving Custom Tab Data in TaskEditor

Post by jessica.bailey » Mon May 27, 2013 11:57 pm

Thank you! The combobox now works perfectly.

The column NotifyClient is boolean. I tried setting inputValue: 1, but it still saved as null. I want it to get the value from the NotifyClient column (0 or 1) and set it according to whether or not it is checked. I thought inputValue was the right one but maybe not.

User avatar
arcady
Core Developer
Core Developer
Posts: 2209
Joined: Wed Mar 20, 2013 6:57 am

Re: Saving Custom Tab Data in TaskEditor

Post by arcady » Tue May 28, 2013 12:24 pm

If NotifyClient is boolean then you need to set inputValue to true.
Here is how I made it for another field:

Code: Select all

                {
                    xtype: 'checkboxfield',
                    id: 'pm',
                    name: 'NotifyProjectManager',
                    boxLabel  : 'Notify project manager when task is due to begin',
                    boxLabelAlign: 'after',
                    allowBlank: true,
                    inputValue: true
                },

User avatar
jessica.bailey
Posts: 13
Joined: Fri May 24, 2013 6:15 pm

Re: Saving Custom Tab Data in TaskEditor

Post by jessica.bailey » Tue May 28, 2013 8:04 pm

That works perfectly. Thank you for all of your help!

User avatar
FrancZ
Premium Member
Premium Member
Posts: 50
Joined: Thu Feb 21, 2019 3:27 pm

Re: Saving Custom Tab Data in TaskEditor

Post by FrancZ » Mon May 06, 2019 8:51 pm

Hello,

This is exactly what I'm looking for.
Can you tell me where you call or place taskEditor please in .ts?


Or any help with below code?
When I click to save I got "Comment" field to be save. Any idea please? I think it is form issue but don't find yet where is the problem.

Code: Select all

plugins: [
...
{ 
ptype: 'gantt_taskeditor',
taskEditorCls: 'NewTaskEditor'
}
...
]

// here NewTaskEditor definition

Ext.define('NewTaskEditor', {
      extend: 'Gnt.widget.taskeditor.TaskEditor',
      items: [
        {
          padding: 10,
          title: 'Jalon',
          items: [
            {
                xtype: 'showjalonfield',
                name: 'ShowJalon',
                labelWidth: 220,
                fieldLabel: '************',
                width       : 400
            }
          ]
        }
      ]
    });


Tahnks in advance!

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2204
Joined: Fri Apr 01, 2016 11:08 am

Re: Saving Custom Tab Data in TaskEditor

Post by pmiklashevich » Tue May 07, 2019 10:24 am

Hello,

Could you please start a new thread and describe your problem more detailed following the guide here? This one is about 2.x version which is not supported and the last message was long time ago.
Can you tell me where you call or place taskEditor please in .ts?
So, call or place? If you open our Advanced demo and run in console:

Code: Select all

gantt=Ext.first('ganttpanel')
gantt.taskEditor // "Gnt.plugin.taskeditor.TaskEditor"
gantt.taskEditor.taskEditor // "Gnt.widget.taskeditor.TaskEditor"
That's how you can get an access to the plugin or widget. But it's hard to tell you where to call or where to place it in ts without a runnable testcase.
Or any help with below code?
I'm afraid I don't know what "showjalonfield" is. Probably it's your custom component. Please provide something runnable we can look at.

For general information please checkout the docs. You can find how to load/save data at the top of the page. Also our Advanced demo has a custom field in the task editor, so you can look at the demo sources to check how it works.

Best,
Pavel
Pavel Miklashevich - Core Developer

Post Reply