How to add image next to the field
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-10-2024 09:58 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-10-2024 10:05 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-10-2024 10:11 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-10-2024 10:25 AM - edited 06-10-2024 10:31 AM
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
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-10-2024 10:58 AM