How advanced 'transform script' is working in Edit List Controller?

[Barbara_Kis]

How 'transform script' is working in Edit List Controller in UI Builder?

In older version of the UI Builder I could modify the 'rowDefinitions', but on newer version it's not possible to modify it from the presentational list component.

I found this 'transform script', according to its info bubble

"If you would like to edit how the data is displayed, you can provide a reference to a script that will be run after the default transform script. In your custom script, you can toggle feature flags, edit column or row ordering, add custom data, et cetera.'"

I'm wondering what does it except as input and output for row definition modifying.

[Kevin83]

I think in a future release there will be demo scripts available for you to choose from, but here is one such example that might help "List Demo: Add Columns Transform Script". What release are you on and what are you trying to achieve?

(function transform(transformBuilder, transformScriptArgs) {
    try {
        if (!transformBuilder) return;

        var emojiArr = [":)", ":(", ":D", ":|"];
        var colorsArr = [
            "critical",
            "high",
            "warning",
            "moderate",
            "positive",
            "info",
            "low",
            "magenta",
            "pink",
            "orange",
            "yellow",
            "brown",
            "green",
            "green-yellow",
            "blue",
            "gray",
            "teal",
            "purple",
        ];
        var newColumns = [{
                index: 5,
                column: {
                    key: "emoji",
                    type: "string",
                    label: "Emoji",
                },
                columnData: [],
            },
            {
                column: {
                    key: "url",
                    type: "url",
                    label: "Url",
                },
                columnData: [],
            },
            {
                index: 2,
                column: {
                    key: "highlightedvalue",
                    type: "string",
                    label: "Highlighted Value",
                },
                columnData: [],
            },
            {
                index: 1,
                column: {
                    key: "badge",
                    type: "custom",
                    label: "Badge",
                    componentTag: "now-badge",
                },
                columnData: [],
            },
            {
                column: {
                    key: "grouped",
                    label: "Grouped Col",
                    type: "grouped",
                    children: [{
                            key: "grouped_sub1",
                            label: "Grouped Child 1",
                            type: "string",
                            columnData: [],
                        },
                        {
                            key: "grouped_sub2",
                            label: "Grouped Child 2",
                            type: "string",
                            columnData: [],
                        },
                    ],
                },
                columnData: [],
            },
        ];
        transformBuilder.rowDefinitions.rows.forEach(function(row, index) {
            newColumns[0].columnData.push({
                rowKey: row.key,
                cellValue: {
                    value: emojiArr[Math.floor(Math.random() * emojiArr.length)],
                },
            });
            newColumns[1].columnData.push({
                rowKey: row.key,
                cellValue: {
                    value: "https://www.google.com",
                },
            });
            newColumns[2].columnData.push({
                rowKey: row.key,
                cellValue: {
                    highlightedValue: {
                        color: colorsArr[Math.floor(Math.random() * colorsArr.length)],
                        value: "abc123",
                    },
                },
            });
            newColumns[3].columnData.push({
                rowKey: row.key,
                cellValue: {
                    componentProps: {
                        color: colorsArr[Math.floor(Math.random() * colorsArr.length)],
                        value: Math.floor(Math.random() * 25),
                    },
                },
            });
            // TODO: add grouped column data once defect is fixed
            newColumns[4].column.children[0].columnData.push({
                rowKey: row.key,
                cellValue: {
                    value: Math.floor(Math.random() * 25),
                },
            });
            newColumns[4].column.children[1].columnData.push({
                rowKey: row.key,
                cellValue: {
                    value: Math.floor(Math.random() * 25),
                },
            });
        });

        var listModel = transformBuilder

            /**
             * Adds new columns and their corresponding body data at a provided index.
             *
             * @Param {Object[]} newColumns Array representing all the columns to be added, index and their respective column data
             * @Param {Object} newColumns[].column An object containing the definiton of a single column. Full column docs  - <public url>/now-list/typeSchemas/columnDefinitions/columnsDocs.md
             * @Param {number} newColumns[].index The 0-based index at which the column needs to be added. If empty or falsy, the columns is added at the end of the table.
             * @Param {Object[]} newColumns[].columnData Array representing all of the columns' cell data to be added and their respective row keys
             * @Param {string} newColumns[].columnData.rowKey The key of a row to update
             * @Param {Object} newColumns[].columnData.cellValue An object containing the data for a single cell. Full cells docs  - <public url>/now-list/typeSchemas/rowDefinitions/cellsDocs.md
             * TODO: add public urls for docs for columnsDocs and cellDocs
             */
            .addColumns(newColumns)

            // do not remove
            .transform();

        return listModel;
    } catch (error) {
        // do not remove
        return {
            failed: true,
            error: error.message,
        };
    }
})(transformBuilder, transformScriptArgs);

[Barbara_Kis]

We are on the washingtondc release and the installed version of UI Builder is 25.2.5.

I have a "URL" type field with urls that will either create a new instruction or open an existing instruction if there is one. And in this transform script I want to change 2 things:

•  add additional parameters to the URL
•  modifying the labels so that instead of the full long URL, only a shorter text is displayed, e.g. "Create instruction" or "Open XY instruction"

I tried this demo script. It looks good, but I have a problem, "transformBuilder" is an empty object and "transformScriptArgs" is undefined.