Upgrade to 13.1 or 14.1

[b2bidev]

We want to upgrade smartclient to 13.1 or 14.1 version. We are currently on version SmartClient_v121p_2024-10-20_Enterprise. just by changing the versions and corresponding webapp/jars, our application is not working. Smartclient 13.1 and 14.1 is using react js.
13.1 is using react js
14.1 is using jakarta servlet and react js

in 13.1, our button clicks are not working. So is there a migration guide we should follow to change the code/js call for migrating from 12.1 to 13.1 or 14.1?
please share the necessary documentation. It does not come with the product download looks like.
It is said to be backward compatible but it does not look like.

[Isomorphic]

It is indeed backwards compatible, so there is no migration guide necessary. You might check the release notes for the (very few) backcompat flags, but it's basically a certainty that they have nothing to do with what you're seeing here.

As with the vast majority of claims of backwards compatibility issues:

1. you didn't do an install as the docs tell you to, you just copied in some files that you thought might work. Follow the documented installation procedure

2. you're likely relying on undocumented / unsupported behaviors, for which, of course, there is no backcompat. In particular, we're not sure what you're talking about with react.js, and it seems possible you've hacked the framework in some way (perhaps relying on the rendered DOM, never allowed)

Once you've done the installation properly, if you encounter issues, the next step is to file a bug which identifies which supported API is not behaving as documented.

[b2bidev]

Ok. Perhaps I was not clear in my previous post in terms of react. In SmartClient_v121p_2024-10-20_Enterprise/smartclientRuntime/isomorphic folder, We see following folders/files.
"locales login skins system version.tx"
In SmartClient_v131p_2025-10-18_Enterprise/smartclientRuntime/isomorphic folder, We see following folders/files.
locales login react skins system version.txt

In the react folder, I see all js scripts are present. We package these smartclientRuntime/isomorphic folder and WEB-INF/lib jars with our application. This react folder was not present in 12.1 release.
Some of the button click are not working, so some javascript function call is failing. It might be internally re-located to some other folder or changed?
All previous upgrade were smooth just by copying these folders.
is the javascript location/name changed from previous release?

[Isomorphic]

Please look at the Installation instructions in the SmartClient Reference.

[b2bidev]

On further investigation, it looks like the smarclient code uses 2 features which are blocked on the browser
Synchronous XMLHttpRequest on the main thread is deprecated
Unload event listeners deprecated.

So is 13.1 addressing these issues?

[Isomorphic]

There are no such issues. Please realize, this software is running right on our website, and at thousands of customers. If you're having basic issues like buttons can't be clicked, that's not because the software is fundamentally broken, it's because you've got a broken installation.

Please revisit the installation instructions.

[b2bidev]

It is not a broken installation. The buttons were not working due to the change in the behavior of the ListGrid and ListGridField.

We have a datasource bound ListGrid with autoFetchData=false. ListGrid has just one field (and it is editable) which has definition
editorType: ComboBoxItem,
displayField: "OrgName",
fetchMissingValues: true

There is no change to datasource definition. The ListGridField does not have any optionDataSource. The editEvent for ListGrid is click. However, the ComboBoxItem is shown programmatically by another button click calling the ListGrid.startEditing(x); The editing is ended on "changed" function of the field (ComboBoxItem). There is not optionDataSource mentioned for the ListGridField (ComboBoxItem), datasource is declared at the ListGrid level.
In 12.1, the data for the field was fetched automatically when the button was clicked [not sure whether it was because of fetchMissingValues=true property], there is no explicit call to fetchData on ListGrid. But with 13.1, it no longer fetches data. Setting the autoFetchData=true for grid or explicitly calling the grid.fetchData(), fetches the data but it shows the data in grid/field. This will change the behaviour for our product.
The data to the grid should be added only after the item is selected from the comboboxItem. Datasource for grid should be used as options to ComboBoxItem and once the option is selected should be shown in ListGrid.

This functionality was working with 12.1, so what is the change in 13.1? In 12.1 this fetchData() call was not required and in 13.1 it does not fetch the options without explicit call. Also, if I set optionDataSource to comboBoxItem, it still does not fetch data with fetchMissingValues: true.


Here's the relevant script.

autoFetchData:false,
autoDraw:false,
editEvent:"click",
selectionType:"single"
dataSource:"partnerGroups_DS",
data:[],
fields:[
{
name:"OrgName",
displayField:"OrgName",
editorType: "ComboBoxItem",
fetchMissingValues: true,
editorProperties: {canHover:true, showHover:true, hoverWidth:300},
pickListFields:[
{name:"OrgName"
}
],
changed: function(form, item, value) {
if (this.getSelectedRecord()) {
permGrid.checkForDuplicate(value);
item.grid.getSelectedRecord().orgKey = this.getSelectedRecord().orgKey;
item.grid.getSelectedRecord().orgName = this.getSelectedRecord().orgName;
item.grid.endEditing();
}
}
}
],
addNewRecord(record) {
record = record || {};
this.data.add(record);
this.selectRecord(this.data.getLength() - 1);
this.startEditing(this.data.getLength() - 1);

}
} //listGrid end


datasource
<DataSource ID="partnerGroups_DS" dropExtraFields="true" serverType="generic">
<fields>
<field name="OrgName" type="text" valueXPath="@Name" primaryKey="true"/>
<field name="orgKey" type="hidden" length="255" valueXPath="@PartnerGroupKey"/>
</fields>

</DataSource>

[Isomorphic]

We're glad to see some progress - no more odd claims about synchronous xmlHttpRequest, and even some code. Unfortunately, you still haven't put together an actual, actionable bug report yet - you should revisit the Debugging overview, which explains what a valid bug report looks like and is linked right below where you type your post.

Since you believe you've isolated a behavior difference between 12.1 and 13.1, it should be very easy for you to produce the required runnable test case. However, there is some dubious stuff in the code you've shared so far: using a data array with a DataSource and using inline editing at the same time, and also modifying the local data array, going around databinding..

You are in the realm of undocumented behavior, and that's likely to be why you're experiencing a behavior change (because of course, we can only support what's documented). The vast majority of inter-version upgrade issues are because of this.

An actual test case will clarify things.

[b2bidev]

Hi,

Here is the testcase which is broken in 13.1 or 14.1 and works fine in 12.1. I have changed the datasource from our product to one of the sample in smartclient. [ datasource "supplyItem"]
https://www-demos.smartclient.com/sm...boListComboBox

isc.ClassFactory.defineClass("permGrid", "ListGrid").addProperties({
cellPadding: 5,
autoFetchData: false,
autoDraw: false,
showEmptyMessage: true,
canSort: false,
editEvent: "click",
height: 150,
overflow: "auto",
selectionType: "single"
});

isc.permGrid.create({
ID: "permGrid",
width: 400,
height: 200,
dataSource: "supplyItem",
data: [],
fields: [{
title: "Group",
name: "itemID",
displayField: "itemID",
editorType: "ComboBoxItem",
emptyCellValue: "",
fetchMissingValues: true,
editorProperties: {
canHover: true,
showHover: true,
hoverWidth: 300,
prompt: "Select Prod group"
},
pickListFields: [{
name: "itemID"
}],
changed: function(form, item, value) {
if (this.getSelectedRecord()) {
item.grid.getSelectedRecord().itemID = this.getSelectedRecord().itemID;
item.grid.endEditing();
}
},

//callback fired when editing ends
editorExit: function(editCompletionEvent, record, newValue, rowNum, colNum, grid) {
if (record.itemID == null || record.itemID == void(0)) {
permGrid.data.remove(record);
}
}
}],

checkForDuplicate: function(value) {
for (i = 0; i < this.data.getLength(); i++) {
if (this.data[i].itemID == value) {
isc.warn("Group already exists");
permGrid.data.remove(this.data[i]);
return;
}

}
},

addNewRecord: function(record) {
record = record || {};
if ((this.data.getLength() > 0) && ((!this.getRecord(this.data.getLength() - 1).itemID) || (this.getRecord(this.data.getLength() - 1).itemID == null || this.getRecord(this.data.getLength() - 1).itemID == void(0)))) {
permGrid.data.remove(this.getRecord(this.data.getLength() - 1));
this.data.add(record);
this.selectRecord(this.data.getLength() - 1);
this.startEditing(this.data.getLength() - 1);
} else {
this.data.add(record);
this.selectRecord(this.data.getLength() - 1);
this.startEditing(this.data.getLength() - 1);
}
},

deleteRecord: function() {
if (permGrid.anySelected()) {
var record = permGrid.getSelectedRecord();
isc.confirm("Are you sure you want to delete", function(value) {
if (value) {
permGrid.data.remove(record);
}
});
} else {
isc.warn("Select a group to delete");

}
}
});

isc.HLayout.create({
membersMargin: 5,
layoutMargin: 5,
members: [
isc.VLayout.create({
width: 420,
membersMargin: 10,
members: [
permGrid,
isc.Toolbar.create({
width: 400,
membersMargin: 5,
align: "right",
buttons: [
isc.IAutoFitButton.create({
title: "ADD",
name: "Add",
click: "permGrid.addNewRecord({role:'P'})"
}),
isc.IAutoFitButton.create({
title: "Delete",
name: "Delete",
click: "permGrid.deleteRecord()"
})
]
})
]
})
]
})

I have verified this code in 12.1 link [https://www-demos.smartclient.com/sm...oListComboBox] and it works fine.
However, in latest code or in 13.1, it does not work. [https://www-demos.smartclient.com/sm...boListComboBox, https://smartclient.com/smartclient-...oListComboBox]

In the above code, if you execute, you will see a Grid and 2 buttons Add, Delete. If you click on Add, combobox is shown in grid[ options fetched automatically from datasource attached to grid. No explicit call to fetchdata]. You can select a item and that item will be added to the grid with edit gone. If you select the item from the grid, and click on delete, item will be deleted from the grid.

[Isomorphic]

As we expected, you were relying on an undocumented behavior.

The behavior you appear to want, based on what we see happening in 12.1, is that when editing ends and saving is triggered, the grid updates it's local data array without ever contacting the server about the save.

That's a supported mode in 13.1 and later, and you get it by enabling listGrid.saveLocally:

https://smartclient.com/smartclient-...id.saveLocally

In 12.1, this combination of settings wasn't even allowed per the docs, and if you tried it, you would get broken and inconsistent behavior (some codepaths would save to the server, some wouldn't, etc).

In the future, if you find something broken in your app after an upgrade to a production SmartClient release, your first move should be to figure out if you were relying on undocumented behavior. You could have very quickly isolated this problem by just reading the docs on how editing works, which would have led you quickly to listGrid.saveLocally.

The way you handled this instead was very slow and wasted a lot of time.

[b2bidev]

Thanks for your advice for future, we will keep in mind.
For the current issue, please try to understand the problem. If you are not reading the post in context, then excuse me for not re-iterating our problem. Here it is

We have a datasource bound ListGrid with autoFetchData=false. ListGrid has just one field (and it is editable)

The ListGridField does not have any optionDataSource. The editEvent for ListGrid is click.
we are programmatically making the grid field editable (editType: ComboBoxItem), by another button click ("Add" button in example) calling the ListGrid.startEditing(x); So when we call this method, field is shown editable with comboBoxItem having the options fetched from the bound datasource automatically (could be because of fetchMissingValues=true property). We are not making any call to fetchData(). This is the behaviour in 12.1. In 13.1, the field is not shown editable as the fetchData call that used to happen automatically is no more happening. Since there is no data, the comboBox does not appear.
So fetching the data in ListGridField is the problem and not saving the data.

Rest of the code is already given, how we end editing and how we manually add data to the listGrid array. To actually save those values in backend, we have explicit save RPC calls.

Neverthless, I tried your suggestion of adding saveLocally: true in the example above in https://smartclient.com/smartclient-...boListComboBox and also in our code. As expected, it does not work.
If you have already looked into the above example in 12.1 then please look into the example above in 13.1 links. You will see that on 'Add' button click the comboBox does not appear in 13.1. Also, adding saveLocally: true does not change anything in 13.1

Could you please look into the direction of what is changed in terms of fetch data.

From the list of issues mentioned in 13.1, I see this could be side effect of below issue. It is just a hunch.
"2022/09/16
Fixed an issue where a sorted pickList (SelectItem or ComboBoxItem) could issue unnecessary fetches against the
data source to get fresh data each time it was shown"

For testcase example code, refer to previous post. Not attaching the code again.

Is there a way we can discuss this in a call? Please let us know. We could not work on this since October as we had other priorities for our current release but now that we see that Smartclient 12.1 is EOS already, we have to upgrade to 13.1 on priority for our next release.

[Isomorphic]

We're sorry you've somehow been struggling since October, but please bear in mind, from the moment you submitted a valid bug report, it was 2.5 business hours before you got a response that correctly pointed out that your code relied on undocumented APIs.

As soon as you made it possible to help, we helped immediately.

Anyway, there's a second really basic problem in your test case: there is no editable field.

In the supplyItem sample DataSource, the field you chose (itemId) is a hidden=true field, therefore not editable by default.

In the Developer Console, you can see the grid logging a warning about this.

If you force on editing for that field via setting canEdit:true on it, you immediately see the expected edit interface, and save works (if you corrected the other issue - didn't set saveLocally before).

So, still no bug, still no regression.

We're not sure if you made the same mistake in your application or if there's a different mistake, but you did say something about not seeing an expected fetch, and this doc provides the best overview of the grid's behavior with respect to when it will fetch options for a listGridField that potentially needs that, and how to configure it.

https://smartclient.com/smartclient-...tionDataSource

[b2bidev]

Ok. So canEdit:true field was not mandatory in 12.1 but is required in 13.1 to show a ListGridField editable. The example is working in 13.1 link. Thank you for pointing that out.
However, our code is still not working. Looks like there are more issues with the code.
One question is our code is referring to attributes instead of methods or some interfaces which I do not see in SmartClient documentation. for e.g
editorType: "comboBox", -> instead of "ComboBoxItem
isc.IAutoFitButton -> the documentation talks about isc.AutoFitButton
data.length instead of data.getLength()

I do not see these in 12.1 documentation as well, yet the code is working. so should these be updated as per the latest documentation?

[Isomorphic]

canEdit is mandatory for certain types of fields. Nothing has changed in the behavior here, you are running in the Showcase where the sample DataSource was changed.

editorType:"comboBox" is an older format which is still supported. It's better to update here though as you will need the newer, more formal format for various future scenarios (like TypeScript, or some cases of tool use).

IAutoFitButton was evidently someone for your team digging into the framework or skin files and copying things, which you cannot do. You should use the documented API here.

data.length is correct for a JavaScript Array, as in, that's just part of the JavaScript language. data.length() is correct and required for List / ResultSet.

[b2bidev]

Thank you , will change it accordingly. On the original issue we are able to fix it. Problem was with some of the APIs and value checking.