Adding a Custom Button with custom scripting on a record producer table.

[LePhucTanT]

Hi Community!

I have a question about how to add a button with custom functionality onto a record producer form. 

Setup:
There is a Service Catalogue that is a record producer, that I want to add a button in the form that users fill out. I need the button to act as a trigger for a script that checks the naming convention of attached files in the form. 
My main issue currently is I have tried to use client scripts which would dynamically create the button on load such as below : 

function onLoad() {

    // Add a button to the form

    var validateButton = document.createElement('button');

    validateButton.textContent = 'Validate File Name';

    validateButton.className = 'btn btn-primary';

    validateButton.style.marginTop = '10px';

    // Append the button to the label variable

    var labelElement = document.querySelector('[id="f.label"]');

    if (labelElement) {

        labelElement.appendChild(validateButton);

    }

    // Add click event for validation

    validateButton.onclick = function () {

        validateFileName();

    };

}

// Validation logic

function validateFileName() {

    var fileName = g_form.getValue('file_name'); // Replace 'file_name' with your file name variable's name

    var validPattern = /^[a-zA-Z0-9_\-]+\.[a-zA-Z0-9]+$/; // Validation regex

    if (!fileName) {

        g_form.showFieldMsg('file_name', 'File name is required!', 'error');

        return;

    }

    if (!validPattern.test(fileName)) {

        g_form.showFieldMsg('file_name', 'Invalid file name! Must be alphanumeric with valid extension.', 'error');

        return;

    }

    g_form.clearMessages();

    g_form.addInfoMessage('File name is valid!');

}

Using this, I created a variable in the record producer, to append the button onto this variable, but can't seem to get the button to appear in the form. Whether it is because of direct access to the DOM is disabled OR The client script is failing to append to the variable because it cannot find it. 

I think the approach I am taking to make a button on a record producer is far more complicated then needed, and was wondering if there is an easier way to make this button within serviceNow Environment. 

Your help would be very much appreciated. 

Thank you in advance. 

Regards 

Tran

[AshishKM]

Hi @LePhucTanT , 

As you alreadt tested that DOM is not supportive and there is no button type field ( like HTML <input type=button> )

You can try to use the macro type field and write a UI Page with html code and attache the page with macro. 

-Thanks,

AshishKM

[LePhucTanT · Accepted solution]

I seem to have over looked the most simplest of things. Was able to simply create a variable in the record producer, and used type : HTML and put in the default value : 
<button id="validateButton" class="btn btn-primary" style="margin-top: 10px;">Validate File Name</button>

This did the trick and now I have a custom button. 
will look into how to make a client script to associate the button with a function for file validation.
Thank you for your response.

[AshishKM]

happy to see that some reference works for you, lets see the actual requirement of writing the script.

[louis_ci_lo]

Hi I got the same issue with you.

I created a button on Service Portal record producer using "Rich Text Label" type, but no clue that how to add script on it, do you have any idea now?