Issue: Unable to Save Client Script on Existing Page in UI Builder

[Sujithra Govind]

I am encountering an issue while trying to integrate a new API call logic into an existing page in my application. Here's the situation:

1. New Page Implementation:
   I added a new button and used the following client script logic to make an API request. This works perfectly, and I am able to make the request successfully.

Working Code:

async function handler({ api, event, helpers, imports }) {

    // Validate and log the helpers.snHttp object

    console.log("snHttp object:", helpers.snHttp);

    if (!helpers.snHttp || typeof helpers.snHttp !== "function") {

        console.error("Error: helpers.snHttp is not properly initialized or is not callable.");

        return;

    }

    const properties = api.data.sam_properties_1.output.properties; // Retrieve the properties

    console.log("Properties to update:", properties);

    for (const property of properties) {

        const requestData = {

            sysparm_property: property.property, // Property name

            sysparm_suggested_value: property.suggested_value // Suggested value

        };

        console.log("Request payload being sent:", JSON.stringify(requestData, null, 2));

        try {

            // Use snHttp to send the API request

            const response = await helpers.snHttp(

                "/api/985627/property_update", // API endpoint

                {

                    method: "POST", // HTTP method

                    headers: {

                        "Content-Type": "application/json"

                    },

                    body: JSON.stringify(requestData) // Pass the request payload

                }

            );

            // Log the response for verification

            console.log("Response status:", response.status);

            console.log("Response body:", response);

            // Process the API response

            if (response.status === 200) {

                console.log(

                    `Success: Property ${property.property} updated successfully.`,

                    response.result

                );

            } else {

                console.error(

                    `Error: Failed to update property ${property.property}.`,

                    response

                );

            }

        } catch (error) {

            // Handle any errors in the API call

            console.error(`Error updating property ${property.property}:`, error);

            if (error.response) {

                console.error("Error response:", error.response);

            } else if (error.data) {

                console.error("Error data:", error.data);

            }

        }

    }

}

1. Issue on Existing Page:
   When I try to apply the same logic on an existing page by adding a new button, I face the following challenges:
• Client Script save Error: Internal Server Error (500) Conversion Error: The undefined value has no properties.
• Behavior: The button and the script fail to initialize properly. The console logs indicate nothing, suggesting the script isn't even executed.

I appreciate any insights or suggestions to resolve this issue. Thanks in advance for your help