Page Comparison

...

Create a Saved Search DataSource

Code Block

lang	xml
title	Create data source
lang	xml

<DataSource ID="savedSearch" serverType="sql" tableName="savedSearch" titleField="name">
    <fields>
        <field name="id" type="sequence" hidden="true" primaryKey="true" />
        <field name="type" type="text" length="255" hidden="true" required="true" />
        <field name="name" type="text" title="Name" length="255" required="true" />
        <field name="criteria" type="text" hidden="true" length="4000" required="true" />
    </fields>
</DataSource>

...

The ListGrid can use any DataSource.We will use the "supplyItem" DataSource.

javascript

Code Block

lang

title	Create ListGrid
lang	javascript

isc.ListGrid.create({
    dataSource: supplyItem,
    autoDraw: false,
    height: 450,
})

The saved search filter uses the "savedSearch" DataSource filtering data by type. It uses the "supplyItem" DataSource ID as the type value (ComboBoxItem form field).

javascript

Code Block

lang

title	Create filter
lang	javascript

isc.DynamicForm.create({
    width: 200,
    autoDraw: false,
    fields: [
        {
            name: "name",
            editorType: "ComboBoxItem",
            displayField: "name",
            valueField: "id",
            title: "Filter",
            emptyDisplayValue: "All Records",
            optionDataSource: savedSearch,
            fetchMissingValues: false,
            cachePickListResults: false,
            // filter data by item datasource
            optionCriteria: {
                fieldName:"type",
                operator:"equals",
                value: supplyItem.ID
            },
            changed: function (form, item, value) {
                var record = item.getSelectedRecord();
...
                if (record != null) {
                    var newCriteria = isc.JSON.decode(record.criteria);
                    _this._listGrid.fetchData(newCriteria);
                } else {
                    _this._listGrid.fetchData();
                }
            }
        }
    ]
})

...

To create/update the saved search a modal window is used. It contains a form (DynamicForm) for editing data ("savedSearch" DataSource). To dynamically create filtering rules use a FilterBuilder with the "supplyItem" DataSource.

lang

Code Block

javascript	title	Create form
lang	javascript

this._form = isc.DynamicForm.create({
	width: 700,
	margin: 5,
	useAllDataSourceFields: true,
	dataSource: this.dataSource,
	fields: [
		{
			editorType: "HeaderItem",
			defaultValue: "New search"
		},
		{
			editorType: "TextItem",
			name: "name"
		},
		{
			editorType: "CanvasItem",
			name: "criteriaFilter",
			title: "Criteria",
			createCanvas : function () {
				return _this._filter = isc.FilterBuilder.create({
					dataSource: _this.itemDataSource
				});
			}
		},
		{
			editorType: "ButtonItem",
			name: "submit",
			title: "Search",
			click: function () {
		    	var encoder = isc.JSONEncoder.create({
		    		dateFormat: "dateConstructor"
		    	});

		    	var criteriaValue = isc.JSON.encode(this._filter.getCriteria(), encoder);
		    	this._form.setValue("criteria", criteriaValue);

		    	this._form.setValue("type", this.itemDataSource.ID);

		    	var _this = this;
		    	this._form.submit(function (dsResponse, data, dsRequest) {
		    		var record = dsResponse.data[0];
                                updateSavedSearchCallback(record);
...
		        });
		    }
		}
	]
})

javascript

Code Block

lang

title	Sample updateSavedSearchCallback on main UI
lang	javascript

function (record) {
    this._nameForm.getField("name").setValue(record.id);
...
    var criteria = isc.JSON.decode(record.criteria);
    this._listGrid.fetchData(criteria);
}

...

Versions Compared

Old Version 16

New Version Current

Key

Create a Saved Search DataSource