2. PHPRunner General questions
  3. [SOLVED] Replace "No data yet." message with a picture
This topic is locked
[SOLVED]

Replace "No data yet." message with a picture

 		4/13/2025 2:01:12 AM
PHPRunner General questions
Davor Geci authorDevClub member

Hello guys/girls,

does anyone have an idea how to replace the standard message "No data yet." with a picture?
I did see the instructions in documentation and in other form posts how to replace the message with

BeforeDisplay event:

$xt->assign("message", "my message");

But how to replace it with picture?

img alt

with something like this:

img alt

Thanks for any directions,
Davor
Davor Geci authorDevClub member 4/13/2025

Got it.

Don't forget to replace in Javascript provided code the path to your nodata image in this line:
<img src="/PATH_TO_YOUR_NODATA_IMAGE/nodata_1.svg" alt="No data" class="no-data-image">

Here are the steps:

Add 2 Custom Lables to your project and write the texts to display (for multilanguages):
NO_DATA_FOUND_TITLE
NO_DATA_FOUND_MESSAGE

Add this to Custom CSS code:

/* NO DATA to display with custom image and custom labels, replacment for "No data yet."*/
.no-data-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
padding: 20px;
text-align: center;
background-color: transparent;
border: none;
}
.no-data-content {
max-width: 500px;
margin: 0 auto;
}
.no-data-image {
max-width: 300px;
height: auto;
margin-bottom: 20px;
}
.no-data-container h3 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 24px;
}

.no-data-container p {
color: #7f8c8d;
margin-bottom: 25px;
font-size: 16px;
}

and this Javascript to your custom_functions.js

document.addEventListener('DOMContentLoaded', function() {
// 2. Enhanced no data display
enhanceNoDataDisplay();
});

// Enhanced No Data Display Function
function enhanceNoDataDisplay() {
// Check if the no-data message exists by searching for span with name containing "notfound_message"
const noDataMessage = document.querySelector('span[name*="notfound_message"]');

if (noDataMessage && noDataMessage.offsetParent !== null) { // Check if element is visible
// Get the parent container (going up to the data-grid-message div)
const container = noDataMessage.closest('div[data-grid-message]');

// Replace the classes and content
container.className = 'no-data-container';
container.innerHTML = `
<div class="no-data-content">
<img src="/PATH_TO_YOUR_NODATA_IMAGE/nodata_1.svg" alt="No data" class="no-data-image">
### ${Runner.getCustomLabel("NO_DATA_FOUND_TITLE")}
${Runner.getCustomLabel("NO_DATA_FOUND_MESSAGE")}

</div>
`;
}
}

Here is how it looks in my app (nice :-) )

img alt

D
 		druck281 4/17/2025

That's great Davor! Thank you for sharing the solution with the rest of us. Great work!