Can anyone help on this How to attach file inside the detail with editable list.

Hi Team,

  i am trying to attach files inside the detail by using button. When i am trying to attach the file it was attaching but in detail it was  not showing that file. 

Here the steps i was fallowed:

I am  using OpportunityTeamDetailV2New

1. Created an object to store files. It should be inherited from object File. Also it has to have a link (lookup) to the main object. In my case, main object is OpportunityParticipant and object to store files is UsrOpportunityParticipantFile.

I was Added a text column to the main object, which would store the file name from File object.

Then i was Create a rule to disable file name column in the detail page

For Add a button to upload file and processing logic to the detail schema (Also I have a code to make detail with editable list). This code is attached as OpportunityTeamDetailV2New.txt


define("OpportunityTeamDetailV2New", ["ConfigurationGrid", "ConfigurationGridGenerator",
"ConfigurationGridUtilities"], function() {
    return {
        entitySchemaName: "OpportunityParticipant",
        methods: {
            onAddAttachmentButtonClick: function() {
                this.set("UsrActiveRow", this.get("ActiveRow"));
            openFileDialog: function() {
                var fileUploadInputEl;
                var wrapInForm = (Ext.isIE10 || Ext.isIE11);
                var htmlConfig = this.createHtmlConfig();
                var fileUploadContainer = Ext.getBody();
                if (wrapInForm) {
                    var fileUploadInputFormEl = Ext.DomHelper.append(fileUploadContainer, htmlConfig, true);
                    fileUploadInputEl = fileUploadInputFormEl.child("input[type='file']");
                } else {
                    fileUploadInputEl = Ext.DomHelper.append(fileUploadContainer, htmlConfig, true);
            createHtmlConfig: function() {
                var id = Terrasoft.utils.generateGUID();
                var inputFileHtml = {
                    tag: "input",
                    id: id + "-fileupload",
                    type: "file",
                    //style: "display: none;"
                if (Ext.isIE10 || Ext.isIE11) {
                    return {
                        tag: "form",
                        id: "form-" + id + "-fileupload",
                    //    style: "display: none",
                        children: [ inputFileHtml ]
                } else {
                    return inputFileHtml;
            initInputFileEvents: function(fileUploadInputEl) {
                var self = this;
                this.on("click", this.onInputFileClick, this);
                if (fileUploadInputEl.dom.addEventListener) {
                    fileUploadInputEl.dom.addEventListener("change", function(event) {
                        self.onInputFileChange(event, self);
                    }, false);
                } else if (fileUploadInputEl.dom.attachEvent) {
                    fileUploadInputEl.dom.attachEvent("onchange", function(event) {
                        self.onInputFileChange(event, self);
                } else {
                    fileUploadInputEl.on("change", this.onInputFileChange, this);
            onInputFileChange: function(event) {
                var files = FileAPI.getFiles(event);
                if (files.length <= 0) {
                var config = this.getUploadConfig(files);
                var value = files[0].name;
            getUploadConfig: function(files) {
                var entitySchemaName =;
                var entitySchemaRecordId = this.get("UsrActiveRow");
                var entityFileSchemaName = "Usr" + entitySchemaName + "File";
                var parentEntitySchemaColumnName = "Usr" + entitySchemaName;
                return {
                    scope: this,
                    onUpload: this.onUpload,
                    onComplete: this.onComplete,
                    onFileComplete: this.onFileComplete,
                    entitySchemaName: entityFileSchemaName,
                    columnName: "Data",
                    //columnName: "UsrOpportunityParticipantFile",
                    parentColumnName: parentEntitySchemaColumnName,
                    parentColumnValue: entitySchemaRecordId,
                    files: files,
                    isChunkedUpload: true
            uploadFile: function(config) {
                if (config) {
            onUpload: function() {
                this.set("MaskId",{timeout: 0}));
            onComplete: function() {
            onFileComplete: function(error, xhr, file) {
                if (error) {
                } else {
                //    this.loadGridDataRecord(this.getActiveRow().get("Id"), Terrasoft.emptyFn, this);
        attributes: {
            // Determines whether the editing is enabled.
            "IsEditable": {
                // Data type — logic.
                dataValueType: Terrasoft.DataValueType.BOOLEAN,
                // Attribute type — virtual column of the view model.
                type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
                // Set value.
                value: true
            "UsrFile": {
            dataValueType: this.Terrasoft.DataValueType.TEXT,
            type: this.Terrasoft.ViewModelColumnType.ENTITY_COLUMN,
            "value": ""
        mixins: {
            ConfigurationGridUtilities: "Terrasoft.ConfigurationGridUtilities"
        diff: /**SCHEMA_DIFF*/[
                // Operation type — merging.
                "operation": "merge",
                // Name of the schema element, with which the action is performed.
                "name": "DataGrid",
                // Object, whose properties will be joined with the schema element properties.
                "values": {
                    // Class name
                    "className": "Terrasoft.ConfigurationGrid",
                    // View generator must generate only part of view.
                    "generator": "ConfigurationGridGenerator.generatePartial",
                    // Binding the edit elements configuration obtaining event
                    // of the active page to handler method.
                    "generateControlsConfig": {"bindTo": "generateActiveRowControlsConfig"},
                    // Binding the active record changing event to handler method.
                    "changeRow": {"bindTo": "changeRow"},
                    // Binding the record selection cancellation event to handler method.
                    "unSelectRow": {"bindTo": "unSelectRow"},
                    // Binding of the list click event to handler method.
                    "onGridClick": {"bindTo": "onGridClick"},
                    // Actions performed with active record.
                    "activeRowActions": [
                        // [Save] action setup.
                            // Class name of the control element, with which the action is connected.
                            "className": "Terrasoft.Button",
                            // Display style — transparent button.
                            // Tag.
                            "tag": "save",
                            // Marker value.
                            "markerValue": "save",
                            // Binding button image.
                            "imageConfig": {"bindTo": "Resources.Images.SaveIcon"}
                        // [Cancel] action setup.
                            "className": "Terrasoft.Button",
                            "tag": "cancel",
                            "markerValue": "cancel",
                            "imageConfig": {"bindTo": "Resources.Images.CancelIcon"}
                        // [Delete] action setup.
                            "className": "Terrasoft.Button",
                            "tag": "remove",
                            "markerValue": "remove",
                            "imageConfig": {"bindTo": "Resources.Images.RemoveIcon"}
                    // Binding to method that initializes subscription to events
                    // of clicking buttons in the active row.
                    "initActiveRowKeyMap": {"bindTo": "initActiveRowKeyMap"},
                    // Binding the active record action completion event to handler method.
                    "activeRowAction": {"bindTo": "onActiveRowAction"},
                    // Identifies whether multiple records can be selected.
                    "multiSelect": false
                "operation": "insert",
                "name": "AddAttachmentButton",
                "parentName": "Detail",
                "propertyName": "tools",
                "values": {
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    "caption": {"bindTo": "Resources.Strings.AddAttachmentButtonCaption"},
                    "click": {"bindTo": "onAddAttachmentButtonClick"},
                    "enabled": {"bindTo": "isAnySelected"}

Like 0



It's hard to say what exactly wrong. Please investigate how the out-of-the-box "Attachment and Notes" detail works. Find the difference and debug it.

Show all comments