How to add image next to the field

Vinod S Patil
Tera Contributor

I have requirement to add image next to the field when condition meet.

condition business service(it's reference field) when we put condition domain is yes.
it has has to show image next to the business service field.

Please suggest me on change client script  

4 REPLIES 4

Robbie
Kilo Patron
Kilo Patron

Hi @Vinod S Patil,

 

Follow the below community post where someone provides the step to do exactly that.

 

High level, create a UI macro which points to an icon/image and any functionality if someone clicks on it. Next is to then update the dictionary attribute of the field you wish it to display the icon/image (UI macro) next to. (As per your example, the number field).

 

To help others (or for me to help you more directly), please mark this response correct by clicking on Accept as Solution and/or Kudos.


Thanks, Robbie

 

https://www.servicenow.com/community/developer-articles/adding-a-ui-macro-button-to-any-field-with-f...

surajchacherkar
Mega Guru

Hi @Robbie,

If my response helped you, please click on the "Accept as Solution" and marked it as helpful. 

 

###Create onChange client script 
1. Fill in the details as follows:
    - **Name:** nameOfClientscript
    - **Table:** [Your table name]
    - **Type:** onChange
    - **Field:** [Your reference field, e.g., `business_service`]
    - **UI Type:** All

### Step 2: Add the Client Script Code
Add the following code to your client script:


function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    // Get the value of the 'domain' field
    var domainValue = g_form.getValue('domain');

    // Check if domain is 'yes'
    if (domainValue === 'yes') {
        addImage();
    } else {
        removeImage();
    }
}

function addImage() {
    var businessServiceField = g_form.getControl('business_service');
    if (!businessServiceField) {
        return;
    }

    // Check if the image already exists to avoid duplicate images
    if (document.getElementById('domainImage')) {
        return;
    }

    // Create the image element
    var img = document.createElement('img');
    img.src='YOUR_IMAGE_URL_HERE'; // Replace with the actual URL of your image
    img.alt = 'Domain Image';
    img.id = 'domainImage';
    img.style.marginLeft = '10px'; // Adjust as necessary

    // Append the image next to the business service field
    businessServiceField.parentNode.appendChild(img);
}

function removeImage() {
    var img = document.getElementById('domainImage');
    if (img) {
        img.parentNode.removeChild(img);
    }
}

### Step 3: Replace `YOUR_IMAGE_URL_HERE`

Replace `YOUR_IMAGE_URL_HERE` with the actual URL of the image you want to display. You can upload the image to ServiceNow and use the URL provided in the system.

Thanks 

Suraj 

 

Vinod S Patil
Tera Contributor

Please have look on my code and suggest me what missing here

VinodSPatil_0-1718042209444.png

@Sid_Takali 
@Robbie 
@surajchacherkar