FieldPicker questions about 14.0

[senordhuff]

Hi there, we are upgrading from 12.1 to 14.0 and having a few issues getting the FieldPicker configuration right.

First, sample values are not showing for us even though fieldPickerShowSampleValues is set to true. I tried this in your Showcase sample and wasn't able to get it to display there either by adding the same property to the grid: https://smartclient.com/smartclient-...id=fieldPicker

Second, in 12.1 we were able to override isc.FieldPicker.getPrototype().emptyTitleHint to display a value (ie. "[Search Fields]" in the filterEditor at the top of the Available Fields grid. It gives the user a little context on using that field to filter values but it no longer works in 14.0. How can we put a text hint in the filter editor at the top with 14.0?

Third, we have a grid with a lot of titles that are long and we insert line breaks when formatting the titles in the grid headers. But, we want remove those line breaks when displaying the field picker for cleaner formatting and making search work better. We had a patch for 12.1 overriding isc.FieldPicker.getPrototype().createDataSourceFromFields to do this in 12. 1 but we can't get it working yet with 14.0. Is there a recommended way to make this change in 14.0?

[Isomorphic]

hi Dave,

The first two issues were regressions related to new features in those areas, and both have been fixed for tomorrow's builds, dated May 16 or later. Note that it's cleaner to use isc.FieldPicker.addProperties().

For the third point, you were hacking an internal API here - you can do it with public APIs with code like we show below - if that isn't clean enough for you, we could add a more direct approach as a tiny Feature Sponsorship, if that appeals to you.

isc.FieldPicker.changeDefaults("availableFieldsGridDefaults", {
    getCellValue : function (record, recordNum, fieldNum) {
        var result = this.Super("getCellValue", arguments);
        // title field
        if (fieldNum == 0) result = result.replaceAll("<br>", " ");
        return result;
    }
});

[senordhuff]

thank you looks great!

[senordhuff]

Hi, I am seeing another issue. When we hit apply in the Field Picker, the field titles that we are formatting for display in the Field Picker are being copied back to the main grid. We only want to format the titles for the field picker. I'm including our full patch. Can you suggest how we can customize the field picker to format the titles but avoid changing the titles in the main grid?

// Patch for SmartClient 14.0 – enhance FieldPickerListGrid with filtering, labels, and widths

if (isc.version.indexOf("v14.0")>-1) {





isc.FieldPicker.addProperties({



emptyTitleHint:"[Search Fields]"



});



isc.FieldPicker.changeDefaults("availableFieldsGridDefaults", {

getCellValue : function (record, recordNum, fieldNum) {

var result = this.Super("getCellValue", arguments);

// title field

if (fieldNum == 0){



var field = this.getField(this.getFieldName(fieldNum));

var resolvedTitle = result;




if (field.fullTitleAT != null) {

resolvedTitle = field.fullTitleAT;

}




resolvedTitle = stripFieldTitle(resolvedTitle);






if (field.headerMenu != null && field.headerMenu.title != null &&

resolvedTitle != null &&

!resolvedTitle.startsWith(field.headerMenu.title)) {




var subMenuTitle = null;

if(field.headerMenu.title==LABEL_EXTERNAL_APPS && field.headerMenu.headerMenu!=null && field.headerMenu.headerMenu.title!=null){

subMenuTitle = field.headerMenu.headerMenu.title;

}



resolvedTitle = field.headerMenu.title + ": " + (subMenuTitle!=null? subMenuTitle + "- " :"") + resolvedTitle;









}

result = resolvedTitle;

}

return result;

}

});



isc.FieldPicker.changeDefaults("currentFieldsGridDefaults", {

getCellValue : function (record, recordNum, fieldNum) {

var result = this.Super("getCellValue", arguments);

// title field

if (fieldNum == 0){




var field = this.getField(this.getFieldName(fieldNum));

var resolvedTitle = result;




if (field.fullTitleAT != null) {

resolvedTitle = field.fullTitleAT;

}




resolvedTitle = stripFieldTitle(resolvedTitle);




if (field.headerMenu != null && field.headerMenu.title != null &&

resolvedTitle != null &&

!resolvedTitle.startsWith(field.headerMenu.title)) {




var subMenuTitle = null;

if(field.headerMenu.title==LABEL_EXTERNAL_APPS && field.headerMenu.headerMenu!=null && field.headerMenu.headerMenu.title!=null){

subMenuTitle = field.headerMenu.headerMenu.title;

}



resolvedTitle = field.headerMenu.title + ": " (subMenuTitle!=null? subMenuTitle + "- " :"") + resolvedTitle;

}

result = resolvedTitle;

}

return result;

}

});



isc.FieldPicker.getPrototype().addProperties({






createDataSourceFromFields: function isc_FieldPicker_createDataSourceFromFields(fields, removeFields, availableMode, keepAll) {

var processedFields = keepAll ? fields : this.duplicateAndValidateFields(fields);

if (removeFields != null) processedFields.removeList(removeFields);




// === Patch: filter fields by canHide and hideFromColumnChooser ===

if (availableMode) {

processedFields = processedFields.filter(function (f) {

return f.canHide !== false &&

f.hideFromColumnChooser !== true &&

f.hideFromColumnChooser !== "true";

});

}




var finalFields = [],

component = this.dataBoundComponent;




// === Sample Record Resolution ===

if (isc.isA.String(this.sampleRecord)) {

if (this.sampleRecord === "first") {

if (isc.isA.ListGrid(component) && component.fieldPickerShowSampleValues) {

var data = component.getOriginalData();

this.sampleRecord = (data && data.getLength() > 0) ? data.get(0) : null;

} else if (this.showSampleValues) {

this.sampleRecord = component.getRecord(0);

}

if (!isc.isAn.Object(this.sampleRecord)) this.sampleRecord = null;

} else if (this.sampleRecord === "firstOpenLeaf" && isc.isA.TreeGrid(component)) {

var treeData = component.getData();

var openLeaves = treeData.getOpenList(treeData.getRoot(), isc.Tree.LEAVES_ONLY);

this.sampleRecord = openLeaves.length ? openLeaves[0] : component.getRecord(0);

}

}




// === Patch: Title resolution using fullTitleAT + headerMenu ===

for (var i = 0; i < processedFields.length; i++) {

var field = processedFields[i];

var resolvedTitle = field.title;




if (field.fullTitleAT != null) {

resolvedTitle = field.fullTitleAT;

}




resolvedTitle = stripFieldTitle(resolvedTitle);




if (field.headerMenu != null &&

field.headerMenu.title != null &&

resolvedTitle != null &&

!resolvedTitle.startsWith(field.headerMenu.title)) {




var subMenuTitle = null;

if (field.headerMenu.title === LABEL_EXTERNAL_APPS &&

field.headerMenu.headerMenu != null &&

field.headerMenu.headerMenu.title != null) {

subMenuTitle = field.headerMenu.headerMenu.title;

}




field.$9g = field.headerMenu.title + ": " +

(subMenuTitle != null ? subMenuTitle + "- " : "") +

resolvedTitle;

} else {

field.$9g = resolvedTitle;

}

}




// === Patch: Normalize all field widths to 100% ===

for (var i = 0; i < processedFields.length; i++) {

if (processedFields[i]) {

processedFields[i].width = "100%";

}

}




// === Sample Value Injection (Fixed: visible, sortable, showTitle) ===

var hasSampleRecord = isc.isA.Object(this.sampleRecord) && this.sampleValueField != null;

if (hasSampleRecord) {

for (var i = 0; i < processedFields.length; i++) {

var f = processedFields[i];

f[this.sampleValueField] = component.getStandaloneFieldValue(this.sampleRecord, f.name);

}




var showSample = (!availableMode && this.showSampleValues) ||

(availableMode && this.showAvailableSampleValue);




if (showSample) {

finalFields.addAt({

name: this.sampleValueField,

title: this.sampleValueTitle || "Example",

canEdit: false,

canSort: false,

canFilter: this.canFilterSampleValue,

showTitle: true,

showIf: "true",

type: "any",

width: "*"

}, 1); // Insert early for visibility

}

}




// === Title / Editable Field Definitions ===

var hasSample = isc.isA.Object(this.sampleRecord),

titleField = availableMode ? this.availableTitleTitle : this.currentTitleTitle;




var nameField = {

name: "name",

title: titleField,

autoFitWidth: hasSample,

primaryKey: true

};

var titleEditField = {

name: "$9g",

title: titleField,

autoFitWidth: hasSample,

editorProperties: {

showHintInField: true,

hint: this.emptyTitleHint

},

canEdit: this.canEditTitles && !availableMode

};




if (this.useTitleField) {

nameField.hidden = true;

titleEditField.treeField = true;

} else {

titleEditField.hidden = true;

nameField.treeField = true;

}




finalFields.addListAt([nameField, titleEditField], 0);




// === Tree Mode Fields ===

if (this.shouldUseTrees()) {

var idField = this.pickerIdField,

parentIdField = this.pickerParentIdField,

rootValue = component.dataSource.fieldTreeRootValue;




finalFields.addList([

{ name: idField, hidden: true, primaryKey: true },

{ name: "_" + parentIdField, hidden: true, foreignKey: idField, rootValue: rootValue }

]);




if (this.useTitleField) {

titleEditField.canFilter = true;

} else {

nameField.canFilter = true;

}




delete nameField.primaryKey;




processedFields.map(function (f) {

f["_" + parentIdField] = f[parentIdField];

});

}




// === Register Field Metadata and Flags ===

for (var i = 0; i < processedFields.length; i++) {

var field = processedFields[i];

this.originalFields[field[this.primaryKeyField]] = field;

if (field.userSummary || field.userFormula) this.customFields = true;

}




// === Final DataSource ===

var ds = isc.DataSource.create({

fields: finalFields,

clientOnly: true,

dataProtocol: "clientCustom",

transformRequest: function (dsRequest) {

var response = this.getClientOnlyResponse(dsRequest, null);

this.processResponse(dsRequest.requestId, response);

return dsRequest.data;

}

});




ds.setCacheData(processedFields);

return ds;

}





});

}

[Isomorphic]

Without commenting on the patch per se (btw indenting was somehow lost - not sure how as you did use CODE tags correctly) - just to understand the use case - for the headers of the ListGrid you would like to use concise titles, but in the FieldPicker, you would like to use longer, more verbose titles, right?

This seems possibly right for a minor SmartClient enhancement, like having dataSourceField "title" and "fullTitle" - but first, are there other situations in built-in UI where you'd also like to see the longer titles? FilterBuilder maybe?

Note, obvious of course, but, instead of this patch, you could:

1) provide the full title as dataSourceField.title

2) override something in the headerButton autoChild on ListGrid to use a shortened title, stashed as a separate DataSourceField property (like "shortTitle")

[senordhuff]

Correct, we want to have concise titles in the ListGrid but longer and more verbose titles in the FieldPicker. We do have other overrides to apply longer titles in FilterBuilder already. And, this behavior we are trying to fix with Smartclient 14 has been working fine in Smartclient 12.1 for us for awhile. So, do you know if you changed the behavior in some way between 14 and 12.1 that is causing this to no longer work?

[Isomorphic]

Well, your code literally has "field.$9g", so that was going to break :)

Repairing your patchack might be as easy as updating the names of obfuscated variables like $9g to match the new version. There hasn't been major surgery in this area, so that may work.

The long-term supportable thing would be to add support for either longTitle or shortTitle as official properties used in specific contexts (like ListGrid headers) so you don't need the patchack.

[senordhuff]

Well, $9g is in your native 14.x code so that was necessary. Claude and I finally figured out that we just needed the expanded titles in the Available Fields grid because it wasn't working to show the expanded titles in the Current Fields grid. So, we are all good now thanks for the help.