Explorer Page and Module Finder for your browser

Hi all!

I've created a simple new bookmarklet that allows you to get the module and page name of the explorer and display it in your browser. This will allow you to easily find the same page you're looking at in the browser, in your Mendix explorer.

Back in the day we used to have one that worked perfectly, however, with the new React modeler, the older version didn't work. This new version supports both the new React and Dojo versions :)!

History:

v1.1: Initial release

v1.2: Added browser support, included Dojo compatibility

v1.3: Popup support

v1.4: Fixed Dojo Popup Bug / Added Styled Version

v1.5: Update with a new clean Toast version that autocloses after 5 seconds

v1.6: Added Mendix Version Number and added New Mendix Inspector Version

Example of the returned toast message:

Example of the Mendix Inspector version.

How it works:

1. Go to your favourite browser and press add a new bookmark.

2. Set the name as Mendix Page Finder (or something similar)

3. Inside the URL section; paste one of the javascripts I added underneath (Minimal or Styled)

4. Open both a Dojo (Mx 9) and or React (Mx 11) modeler project and see your page name (you can even try it on the community pages here ;) )

5. The page name is automatically pasted to your clipboard

6. Go to your Mendix Modeler, paste the name inside the explorer search field and that's the page you were looking at in the browser (if a page is not a Mendix based page, the javascript returns Unknown.

7. If it works, feel free to like this post. If it doesn't, please let me know which browser you are using and what is happening. I will look into it for you!

v1.6 (Toast Version - Autoclose after 5 seconds, Auto-copy to clipboard, Mendix Version Number)

javascript:(function(){var v='?%27,p=%27%27,m=%27Unknown%27,n=%27Unknown%27,popup=false;try{if(window.mx&&mx.version)v=mx.version;var modal=document.querySelector(%27.modal-dialog%27);if(modal){popup=true;var ids=modal.querySelectorAll(%27[id]%27);for(var i=0;i<ids.length;i++){var parts=ids[i].id.split(%27.%27);if(parts.length>=3){m=parts[1];n=parts[2].split(%27$%27)[0];break;}}}else{if(window.mx&&mx.ui&&mx.ui.getContentForm){var form=mx.ui.getContentForm();if(form&&form.path)p=form.path;}if(!p&&window.history&&history.state&&history.state.pageName)p=history.state.pageName;if(p){p=p.replace(%27.page.xml%27,%27%27).replace(/\//g,%27.%27);var dot=p.indexOf(%27.%27);if(dot>-1){m=p.substring(0,dot);n=p.substring(dot+1);}else{n=p;}}}}catch(e){n=e.message||%27Error%27;}var copied=%27%27;if(n!==%27Unknown%27){try{navigator.clipboard.writeText(n);copied=%27Copied!%27;}catch(e){copied=%27Copy failed%27;}}var t=document.createElement(%27div%27);t.id=%27mx-toast%27;var old=document.getElementById(%27mx-toast%27);if(old)old.remove();t.innerHTML=%27<div style="display:flex;align-items:center;gap:12px"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" fill="#22c55e"/><path d="M6 10l3 3 5-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><span style="font-size:14px"><span style="color:#6b7280">'+m+'</span><span style="color:#9ca3af">.</span><b style="color:#111">'+n+'</b>'+(popup?' <span style="color:#6b7280">[POPUP]</span>':'')+'</span></div><div style="display:flex;align-items:center;gap:8px;margin-left:12px"><span style="background:#f3f4f6;color:#6b7280;font-size:11px;padding:2px 6px;border-radius:4px;font-family:monospace">'+v+'</span><span style="font-size:12px;color:#22c55e">'+copied+'</span><button onclick="this.closest(\'#mx-toast\').remove()" style="background:none;border:none;color:#9ca3af;cursor:pointer;font-size:20px;padding:4px">&times;</button></div>';t.style.cssText='position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#fff;border-radius:8px;padding:12px 16px;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:999999;font-family:system-ui;display:flex;align-items:center;gap:16px';document.body.appendChild(t);setTimeout(function(){t.style.transition='opacity .3s';t.style.opacity='0';setTimeout(function(){t.remove()},300)},5000)})();

v1.6 (Mendix Inspector Version - No Autoclose, No Auto-copy to clipboard, Mendix Version Number, and a lot more)

javascript:(function(){var v='?',p='',m='Unknown',n='Unknown',popup=false,user='',roles='',guest=false,offline=false,env='',title='',loadTime=0,widgets=0,domNodes=0,requests=0,dataviews=0,client='Unknown',envType='Unknown',ctxEntity='';try{if(window.mx){if(mx.version)v=mx.version;if(mx.session){if(mx.session.getUserName)user=mx.session.getUserName()||'';if(mx.session.getUserRoleNames)roles=mx.session.getUserRoleNames().join(', ')||'';if(mx.session.isGuest)guest=mx.session.isGuest();}if(mx.isOffline)offline=mx.isOffline();if(mx.remoteUrl)env=mx.remoteUrl;}var modal=document.querySelector('.modal-dialog');if(modal){popup=true;var ids=modal.querySelectorAll('[id]');for(var i=0;i<ids.length;i++){var parts=ids[i].id.split('.');if(parts.length>=3){m=parts[1];n=parts[2].split('$')[0];break;}}}else{if(mx.ui&&mx.ui.getContentForm){var form=mx.ui.getContentForm();if(form){if(form.path)p=form.path;if(form.title)title=form.title;}}if(!p&&window.history&&history.state&&history.state.pageName)p=history.state.pageName;if(p){p=p.replace('.page.xml','').replace(/\//g,'.');var dot=p.indexOf('.');if(dot>-1){m=p.substring(0,dot);n=p.substring(dot+1);}else{n=p;}}}if(performance&&performance.timing){var t=performance.timing;loadTime=t.loadEventEnd-t.navigationStart;}if(performance&&performance.getEntriesByType){requests=performance.getEntriesByType('resource').length;}widgets=document.querySelectorAll('[class*="mx-name-"]').length;domNodes=document.querySelectorAll('*').length;dataviews=document.querySelectorAll('.mx-dataview').length;client=document.getElementById('root')?'React':window.dijit&&window.dijit.registry?'Dojo':'Unknown';var dv=document.querySelector('.mx-dataview');if(dv){var dvId=dv.querySelector('[id]');if(dvId){var idParts=dvId.id.split('.');if(idParts.length>=2)ctxEntity=idParts[1];}}if(env){if(env.indexOf('localhost')>-1||env.indexOf(':8080')>-1)envType='🟢 Local';else if(env.indexOf('-sandbox')>-1||env.indexOf('mxapps.io')>-1)envType='🟡 Sandbox';else if(env.indexOf('-accp')>-1||env.indexOf('acceptance')>-1)envType='🟠 Acceptance';else if(env.indexOf('-test')>-1||env.indexOf('test')>-1)envType='🔵 Test';else if(env.indexOf('-dev')>-1)envType='🟣 Development';else envType='🔴 Production';}}catch(e){n=e.message||'Error';}var t=document.createElement('div');t.id='mx-toast';var old=document.getElementById('mx-toast');if(old)old.remove();t.innerHTML='<div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:12px"><div style="display:flex;align-items:center;gap:8px"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" fill="#0595DB"/><path d="M10 5v6M10 13v2" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg><span style="font-weight:600;color:#111">Mendix Inspector</span><span style="background:#f3f4f6;color:#6b7280;font-size:11px;padding:2px 6px;border-radius:4px;font-family:monospace">'+v+'</span><span style="background:'+(client==='React'?'#61dafb':'#0595DB')+';color:'+(client==='React'?'#000':'#fff')+';font-size:10px;padding:2px 6px;border-radius:4px;font-weight:500">'+client+'</span></div><button onclick="this.closest(\'#mx-toast\').remove()" style="background:none;border:none;color:#9ca3af;cursor:pointer;font-size:20px;line-height:1;padding:0">&times;</button></div><div style="background:#f0f9ff;border:1px solid #bae6fd;border-radius:6px;padding:10px;margin-bottom:12px;font-size:12px;display:flex;align-items:center;gap:8px"><span>'+envType+'</span><span style="color:#6b7280;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+(env||'-')+'</span></div><div style="background:#f9fafb;border-radius:6px;padding:12px;margin-bottom:12px"><div style="display:flex;justify-content:space-between;align-items:center;gap:12px"><div style="flex:1"><div style="font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px">Module</div><div style="font-size:13px;color:#374151">'+m+'</div></div><div style="flex:1"><div style="font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px">Page'+(popup?' <span style="color:#0595DB">[POPUP]</span>':'')+'</div><div style="font-size:13px;color:#111;font-weight:600">'+n+'</div></div><button onclick="navigator.clipboard.writeText(\''+m+'.'+n+'\');this.innerHTML=\'✓\';setTimeout(function(){this.innerHTML=\'Copy\'}.bind(this),1500)" style="background:#0595DB;border:none;color:#fff;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap">Copy</button></div>'+(title?'<div style="margin-top:8px;padding-top:8px;border-top:1px solid #e5e7eb;font-size:12px;color:#6b7280">Title: <span style="color:#111">'+title+'</span></div>':'')+'</div><div style="font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">Performance</div><div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px"><div style="background:#f9fafb;border-radius:6px;padding:8px;text-align:center"><div style="font-size:16px;font-weight:600;color:'+(loadTime>3000?'#ef4444':loadTime>1500?'#f59e0b':'#22c55e')+'">'+(loadTime/1000).toFixed(2)+'s</div><div style="font-size:10px;color:#6b7280">Load time</div></div><div style="background:#f9fafb;border-radius:6px;padding:8px;text-align:center"><div style="font-size:16px;font-weight:600;color:#374151">'+widgets+'</div><div style="font-size:10px;color:#6b7280">Widgets</div></div><div style="background:#f9fafb;border-radius:6px;padding:8px;text-align:center"><div style="font-size:16px;font-weight:600;color:#374151">'+requests+'</div><div style="font-size:10px;color:#6b7280">Requests</div></div><div style="background:#f9fafb;border-radius:6px;padding:8px;text-align:center"><div style="font-size:16px;font-weight:600;color:'+(domNodes>1500?'#ef4444':domNodes>800?'#f59e0b':'#22c55e')+'">'+domNodes+'</div><div style="font-size:10px;color:#6b7280">DOM nodes</div></div></div><div style="font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px">Session</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px"><div style="background:#f9fafb;border-radius:6px;padding:8px;font-size:12px"><div style="color:#6b7280;margin-bottom:2px">User</div><div style="color:#111;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+(guest?'👤 Anonymous':user||'-')+'</div></div><div style="background:#f9fafb;border-radius:6px;padding:8px;font-size:12px"><div style="color:#6b7280;margin-bottom:2px">Status</div><div style="color:#111;font-weight:500">'+(offline?'<span style="color:#f59e0b">● Offline</span>':'<span style="color:#22c55e">● Online</span>')+'</div></div></div><div style="background:#f9fafb;border-radius:6px;padding:8px;font-size:12px;margin-bottom:8px"><div style="color:#6b7280;margin-bottom:2px">Roles</div><div style="color:#111;font-weight:500">'+(roles||'-')+'</div></div>'+(ctxEntity||dataviews?'<div style="font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;margin-top:12px">Data</div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px"><div style="background:#f9fafb;border-radius:6px;padding:8px;font-size:12px"><div style="color:#6b7280;margin-bottom:2px">Data Views</div><div style="color:#111;font-weight:500">'+dataviews+'</div></div><div style="background:#f9fafb;border-radius:6px;padding:8px;font-size:12px"><div style="color:#6b7280;margin-bottom:2px">Context Entity</div><div style="color:#111;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+(ctxEntity||'-')+'</div></div></div>':'');t.style.cssText='position:fixed;top:20px;right:20px;background:#fff;border-radius:12px;padding:16px;box-shadow:0 10px 40px rgba(0,0,0,.15);z-index:999999;font-family:system-ui,sans-serif;width:360px;max-height:90vh;overflow-y:auto';document.body.appendChild(t)})();

Like & Share!

Cheers and have a great day!