H5 scritps : Adding custom column with field fetched by API

Hi,

I need to add a custom column in PDS110 to add the item status (STAT field) next to the last default column.

I didn't have any issue doing this in old UI and it was working fine, but since new UI will become mandatory, I need to reproduce the same thing on the new UI v2.

My question is, does anybody already figured out on how to make this happend with the new UI ? Everytime I try to add the STAT field, it gets really slow (and even crashes my web browser), because for each ITNO, I need to call the API to get the STAT field value.

The H5 example documentation is adding a custom column, but there are no API calls within, just some dummy data. As long as the call is not asynchronous, it works fine, but when I add an API call, everything become crazy slow. If you had already encouter this problem, I would really know how did you fix this.

Thank you,

Nagib.

Find more posts tagged with

M3 Development

Accepted answers

Rene Bottern

Use MI Request instead of ION API Call for performance as per below:

[View:/cfs-file/__key/communityserver-discussions-components-files/111/MIRequest_5F00_sample.txt:320:240]

All comments

Rene Bottern

I have not noticed any performance degradation adding column(s) using NEW code base in H5 Scripts.
There are of course coding differences that you have to address, but other than that it should behave similar to before.

If you need some assistance, you might consider posting the code you are having trouble with here so you can get some pointers.

nmessaoudi

Hi Rene,

Thank you for the reply. Here is my code (function PopulateData is running inside my run function and also when the user scrolls down) :

private appendColumn(list: IActiveGrid, columnNum: number) {

const columnId = "C" + columnNum;

let columns = list.getColumns();

let newColumn = {

id: columnId,

field: columnId,

name: "Statut article",

width: 100

}

if (columns.length < columnNum) {

columns.push(newColumn);

}

list.setColumns(columns);

}

private populateData(list: IActiveGrid, columnNum: number) {

const columnId = "C" + columnNum;

if (ScriptUtil.version >= 2.0) {

const dataset: any[] = list.getData();

let aData: any[];

for (let i = 0; i < dataset.length; i++) {

const data = dataset[i];

let nItno = data["S1PRNO"];

const request: IonApiRequest = {

url: `/${this.m3EndpointV2}/MMS200MI/Get/`,

method: "GET",

record: {

ITNO: nItno,

}

// Fetching STAT field for all items

this.ionApiService.execute(request).then((response: IonApiResponse) => {

const responseData = this.miService.parseResponse({}, response.data);

if (responseData.errorMessage) {

this.controller.ShowMessage(responseData.errorMessage);

}

aData[i] = responseData.items[0]["STAT"];

}).catch((response: IonApiResponse) => {

this.log.Error(response.message);

this.log.Error(response.statusText);

});

}

list.setColumns(aData);

}

Rene Bottern

Use MI Request instead of ION API Call for performance as per below:

[View:/cfs-file/__key/communityserver-discussions-components-files/111/MIRequest_5F00_sample.txt:320:240]

nmessaoudi

Hi Rene,

I've modified a bit the code you have sent, and now it's working fine !

No performance issue detected !

Thank you

Regards

Copyright © 2025 Infor. All rights reserved.