🔹 Step 1: Column HTML Expression
তোমার ATTACHMENT_URL (অথবা যেখানে image URL আছে) column এ এই HTML Expression বসাও 👇
<a href="javascript:void(0);"
class="multi-view"
data-img="#ATTACHMENT_URL#"
title="View All Images">
<img src="#APP_IMAGES#view.png" width="20" alt="View">
</a>
এটা “eye” icon দেখাবে, আর ক্লিক করলে JavaScript trigger হবে।
🔹 Step 2: Modal Dialog Region তৈরি করো
Page Designer → Create Region → Type: Inline Dialog (বা “Modal Dialog”)
Static ID: imgDialog
Template: Inline Dialog
ভিতরে একটা HTML region যোগ করো:
Static ID: imgContainer
Content (default): (খালি রাখো সব image দেখা যাবে)
🔹 Step 3: Dynamic Action যোগ করো
Event: Click
Selection Type: jQuery Selector
jQuery Selector: .multi-view
Action: Execute JavaScript Code
var urls = $(this.triggeringElement).data('img');
if (!urls || urls.trim() === '') {
alert("No URL found!");
return;
}
// split comma separated URLs
var imgArray = urls.split(',').map(u => u.trim()).filter(u => u !== '');
// Build HTML dynamically
var html = '<div style="display:flex; flex-wrap:wrap; gap:10px; justify-content:center;">';
imgArray.forEach(function(url) {
html += '<div style="border:1px solid #ddd; padding:5px;">' +
'<img src="' + url + '" style="width:200px; border-radius:6px; cursor:pointer;" ' +
'onclick="window.open(\'' + url + '\', \'_blank\');">' +
'</div>';
});
html += '</div>';
// inject HTML into modal container
$('#imgContainer').html(html);
// open dialog
apex.theme.openRegion('imgDialog');
🔹 Step 4: Run Page
এখন যখন তুমি report এর icon এ ক্লিক করবে 👉
🟢 popup খুলবে
🟢 সব image দেখা যাবে side by side
🟢 image এ ক্লিক করলে নতুন tab এ বড় করে খুলবে