Creating new FormItem component

[goldywhite]

Hello!
Could you point me (example or doc) - I need to use custom widget as FormItem.
I can make a widget - but how to bound it to SmartClient form renderer.
(It is not enough for me to make some type of "picker" - I should place my custom FormItem between regular SmartClient FormItems).

[Isomorphic]

Hi goldywhite,

The approach varies greatly according to what kind of custom appearance or functionality you are trying to build. Can you give us an idea of how the form control will appear and behave from an end user's perspective?

[goldywhite]

Hello!
I often use multiselect control in my applications. But I need to realize it as drag&drop listgrid or tree. How can I insert widget like a drag list "isomorphic/system/reference/SmartClient_Explorer.html#_Effects_Drag.%26.Drop_Drag.list.(move)"
directly in form?

[Isomorphic]

Hi Goldywhite,
The simplest solution is probably to use a VLayout to embed a ListGrid widget in between a couple of DynamicForm instances, and then use a ValuesManager to retrieve the form values as a single object.
You can add a method to the ValuesManager to explicitly determine an appropriate field value based on the selection in the ListGrid, using the Selection APIs

So an example might look something like this (I have not included any drag/drop functionality in this example, but it should be enough to get you started):

isc.VLayout.create({
    members:[

    isc.DynamicForm.create({
        autoDraw:false,
        ID:"topForm",
        items:[
                {name:"field0"},
                {name:"field1"}
        ]
    }),
    isc.ListGrid.create({
        autoDraw:false,
        layoutAlign:"center",
        ID:"valuesGrid",
        height:100,
        fields:[{name:"name"}],
        data:[{name:"item1"}, {name:"item2"}, {name:"item3"}]
    }),
    isc.DynamicForm.create({
        autoDraw:false,
        ID:"bottomForm",
        items:[
                {name:"field3"}
        ]
    }),

    ]
})

// Values management:
isc.ValuesManager.create({
    ID:"manager",
    members:[topForm, bottomForm],

    // Method to integrate ListGrid values into the forms' values:
    getAllValues : function () {
        // valuesManager.getValues() will give us an object 
        // containing the values of the member forms.
        var formValues = this.getValues();

        // Set the 'field2' value to an array of the name
        // properties of the selected records
        var selection = valuesGrid.selection.getSelection(),
            selectedNames = selection.getProperty("name");
        formValues.field2 = selectedNames;

        return formValues;
    }
})

// testing values:
isc.IButton.create({
    title:"values?",
    click:"isc.warn(isc.Log.echoAll(manager.getAllValues()))",
    left:300
})

Let us know how you get on
Thanks
Isomorphic Software

[goldywhite]

Hello!
Thank you for this answer! But I need to create FormItem, because I want have autogenerated DynamicForm-based component.
I want to develop FormItem once, and then simply create DynamicForm many times in different places.

isc.DynamicForm.create({
        ID: "myForm",
        fields: getFields()
    })

[Isomorphic]

Hi Goldywhite,
Ok - we do have a mechanism for this. It's not documented in the 5.6 release, but we will be exposing this fully in the future.

There is an undocumented subclass of FormItem called CanvasItem.
The attribute "this.canvas" on the CanvasItem class should be set to a canvas, which will then be rendered out inline in a form.

You can create a CanvasItem subclass which sets up this.canvas to be a ListGrid on init.
You will need to set recordClick() [or other] handlers on the list grid to ensure that when the user selects a record from the Grid, the form item value is updated, and similarly when a programmatic setValue() is called on the item, the ListGrid's selection is updated.

You can then include items in your forms with the type set to the CanvasItem subclass name.

Here's an example of this you can take as a starting point.
Given your specific request about drag selection, I've made this a ListGrid that can accept dropped records (which will be added to the list of options). Your desired behavior may differ but this should illustrate the approach. This code can be dropped directly into the source tab of the Drag Move grid example to get you going.

isc.ClassFactory.defineClass("ListGridItem", "CanvasItem");

isc.ListGridItem.addProperties({
    // default sizing / formatting properties, etc - tweak as required
    height:150, width:150, 
    rowSpan:"*", endRow:true, startRow:true,
    
    // this is going to be an editable data item
    shouldSaveValue:true,

    // Override init to create the ListGrid with the user can use to set the value.
    init:function () {
        this.canvas = isc.ListGrid.create({
            autoDraw:false,
            // pointer back to the item
            item:this,
            width:this.width, height:this.height,
            // assume formItem.dataFieldName is the field from which values need to be
            // retrieved, and formItem.listData is set to the default data for the ListGrid
            fields:[{name:this.dataFieldName}],
            data:this.listData,
            selectionType:"single", 
            // On click store the selection as the item value
            recordClick:"this.updateItem()",
            // On drop ensure the newly dropped option is the current item value
            recordDrop : function () {
                this.Super("recordDrop", arguments);
                this.updateItem();
            },
            updateItem : function () {
                // Simple mechanism to notify the item not to modify the Grid's selection
                // as part of setValue()
                this.item.userSetValue = true;
                var record = this.getSelectedRecord();
                if (record == null) this.item.clearValue();
                else this.item.setValue(record[this.item.dataFieldName]);

                delete this.item.userSetValue;
            },
            emptyMessage: "drop rows here",
            canReorderRecords: true,
            canDragRecordsOut: true,
            canAcceptDroppedRecords: true,
            dragDataAction: "move"
        });
        return this.Super("init", arguments);
    },
    
    // Override setValue to update the ListGrid selection
    setValue : function (newValue) {
        if (this.canvas != null && !this.userSetValue) {
            var record = this.canvas.data.find(this.dataFieldName, newValue);
            if (record) this.canvas.selection.selectSingle(record)
            else {
                newValue = null;
                this.canvas.selection.deselectAll();
            }
        }
        return this.Super("setValue", [newValue]);
    }
});

// ----------- Example Usage -------------

// Standard ListGrid to drag options from
isc.ListGrid.create({
    ID: "countryList1",
    width:300, height:224, alternateRecordStyles:true, showAllRecords:true,
    data: countryData,
    fields:[
        {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
        {name:"countryName", title:"Country"},
        {name:"capital", title:"Capital"}
    ],
    canReorderRecords: true,
    canDragRecordsOut: true,
    canAcceptDroppedRecords: true,
    dragDataAction: "move"
})

// form containing new listGrid-based item
isc.DynamicForm.create({
    ID: "exampleForm",
    left:350,
    width: 250,
    fields: [
        {name: "username",
         title: "Username",
         type: "text",
         required: true,
         defaultValue: "bob"
        },
        // New ListGridItem 
        {name:"country",
         type:"ListGridItem",
         dataFieldName:"countryName",
         // could provide initial listData if we wanted
        },
        {name: "email",
         title: "Email",
         required: true,
         type: "text",
         defaultValue: "bob@isomorphic.com"
        }
    ]
});

// demonstrate programmatic setValue() / getValue()
isc.Button.create({
    left:300,
    top:300,
    title: "Set Value",
    click: function () {
        // Will only set the value if France is a valid option
        exampleForm.setValue("country", "France");
    }
});
isc.Button.create({
    left:300,
    top: 350, 
    title: "Get Values",
    click: function () {
        isc.warn(isc.Log.echoAll(exampleForm.getValues()));
    }
});

As with all undocumented APIs we don't officially support this usage against the 5.6 release. This means we may modify APIs in the future, but if this happens this thread will be updated to reflect the changes (and at this stage this API or an equivalent will most likely be made public in any case)

Let us know how you get on.
Thanks
Isomoprhic Software

[goldywhite]

Hello!
Thank you very much! It's very helpful for me!

[rajadurai]

Couldn't get the values submiited by valuemanager.saveData()

Hi
I am following your reply #4 for this thread.
I have used a valuemanger to collect value from a form and a list grid.
I have set a Dynamic form's field value through the list grids selection.
Here everything happens as you told. I could able to see the values in the 'getAllValues()' of valuemanager.

( Say I have a field ' Field1' in Dynamic Form
I have assigned a value for this field in this Valuemangers ' getAllValues' Method'
I can able access the updated value in the client
But if i call valuemanger.saveData().. i couldn't get this value in the server method.
Instead in the server method i can see only the values entered in the dynamic form fields)


But i couldn't get any of these values set by this method 'getAllValues()' in the server method.. What might be the issue can you help me?

[Isomorphic]

Hi rajadurai,

In the provided example, ValuesManager.saveData() is not aware of the special getAllValues() function and not aware of the value being tracked by the grid. The simplest way to save the special value being tracked by the grid is to call valuesManager.setValue() with the value from the grid right before calling saveData().

[incredi]

I have a DynamicForm and I want to have a complex formItem like your dateItem. I mean my custom item should involve some common formItem and it roles as a formItem. I found you extend containerItem class to create Date class so I used it and I could create an item but it layout form items horizantaly.
I can't find any document which explain how to use containerItem (Its methods and attributes).

if it is possible I want both canvasItem and containerItem document(methods and attributes)

my sample code is here:

isc.ClassFactory.defineClass("MyFormItem", "ContainerItem");
MyFormItem.addProperties({
width: 150,
    numCols: 4,
items: [
        {name: "name"},
        {name: "family", type:"select"}
    ]

});
isc.DynamicForm.create({
    width: 150,
    numCols: 4,
    fields: [
        {name:"test",
          _constructor:"MyFormItem"
         }
    ]
});

[Isomorphic]

Hello incredi,

ContainerItem remains undocumented because it's APIs haven't been finalized and are subject to change. However there's no need to extend ContainerItem, instead, create a subclass of DynamicForm and use the approach recommended earlier in this thread for having a CanvasItem manage the value held by the DynamicForm.

[markgoldin]

I am trying to modify this example of creating a custom FormItem.
I dont need any d&d functionality, but I need to have ListGrid with a combo box inside. Is that possible? Can you assist me with that?

Thanks

[incredi]

multiple select grid

Hi,
I have a component like http://forums.smartclient.com/showpo...48&postcount=6
My ListGridItem (new formItem) is multiple select and I don't how I can get its records as a formItem value?
I tried this :

isc.PartsListGrid.create({
          ID:"myList2",
          item1:this,
          selectionType:"multiple",
          data:exampleData,
          canDragRecordsOut: true,
          canAcceptDroppedRecords: true,
          canReorderRecords: true,
        // On click store the selection as the item value
          recordClick:"this.updateItem()",
        // On drop ensure the newly dropped option is the current item value
          recordDrop : function () {
            this.Super("recordDrop", arguments);
            this.updateItem();
          },
          updateItem : function () {
            // Simple mechanism to notify the item not to modify the Grid's selection
            // as part of setValue()
            this.item1.userSetValue = true;
            var records = this.getSelection();
            if (records == null) this.item1.clearValue();
            else this.item1.setValue(records);

            delete this.item1.userSetValue;
          }
        })

but it did not work, please help me to find the solution.
Thank

[Isomorphic]

Hi incredi,

getSelection() is returning an Array of Objects. Presumably you want to store an Array of some singular value, eg, a "partId" property found in each record shown in the ListGrid. Assuming "partId" is in fact the value you want to store, one way to retrieve the partIds as a list of singular values (eg Strings) is to call records.getProperty("partId")

[danidacila]

I have a problem with CanvasItem

I have a ButtonItem inside a DynamicForm (I have tryed with customItem that extends CanvasItem also).
ButtonItem also inherits CanvasItem.

I have the latest sources from SVN.

I cal form.saveData().
The form is binded to datasource.

It seems that on ADD operations the call to saveData() does not pickup values contained in CanvasItems.
On EDIT operations it works.

On a dummy test with a HiddenItem instead of a CanvasItem everything work well.

Do you have an idea of what is wrong?