Skip to main content
S
SvenR14-Alexandrite
14-Alexandrite
January 20, 2026
Solved

Thumbnail navigator: unhide the 'Related Information' button?

  • January 20, 2026
  • 3 replies
  • 299 views

Version: Windchill 12.0

 

Use Case: How to customize the Thumbnail Navigator in order to show the buttons 'navigate Thumbnails' and 'Related Information' besides each other and not as in the ootb-way where one hides the other?


Description:

2026-01-20 16_39_55-windchill thumbnail navigate.png

Since either 'Related Information' or 'Navigate Thumbnails' is constantly hidden and users (!) don't remember what they don't see, I wanted to make both buttons visible at the same time, as alternatingly pressed/unpressed buttons. Small fix, huge transparency improvement.

Well, the question is now about which file to customize...?

It seems to end up all in the huge ...netmarkets/javascript/util/ext-and-extensions.js , but I suspect that this is not the 'real' source which we would want to customize...

I also think it's not 'officially' supported for customization, but nevertheless the layout must be defined somewhere... 

Has anybody a hint or an idea?

Best Regards 👍

Best answer by SvenR

since editing the previous post seems not possible, here is the final workaround I modded the thumbnail navigator config file:

 

Spoiler
--- path\codebase\netmarkets\javascript\util\jsfrags\infopage\miniNavigator_ptc_formatted.jsfrag
+++ path\codebase\netmarkets\javascript\util\jsfrags\infopage\miniNavigator.jsfrag
@@ -122,7 +122,8 @@
 use3D: true, // setting
 getRef: "", // setting, make "&ref=1" to get reference objects
 height: 428, // Default height of the popup window height of internal +6 for spacing +26 for vispanel title header
- width: 486, // Default width of the popup window
+ // width: 486, // Default width of the popup window
+ width: 686, // Default width of the popup window
 
 getHelp: function () {
 PTC.help.openHelpWindow(WVSPopup.helpUrl);
@@ -462,11 +463,16 @@
 }
 }
 
+// DEV hide this menu per css
 PTC.miniNavigator.getTitleMenuConfig = function () {
 var actionsMenu = PTC.attributeHelper.get("ActionsMenu");
 //this has to map the same id as defined in RenderInfoPageModelTag in getDataValue for nmActions.
 var defaultText = bundleHandler.get("com.ptc.core.ui.navigationRB.MININAVTHUMBPANE");
 var menuButton = {
+ style: {
+ // hide the menu
+ display: "none",
+ },
 xtype: "dynamicMenuButton",
 cls: "miniNavTitle",
 id: PTC.miniNavigator.menuTitleID,
@@ -668,12 +674,58 @@
 
 /* Card Manager for right side pane in miniinfo*/
 var miniCardManager = {
- id: PTC.miniNavigator.cardManager,
+ // hide it via id not associated but still execute it, since it is needed
+ // id: PTC.miniNavigator.cardManager,
 layout: "card",
 region: "center", //cannot set autoscroll here (will cause double scrollbar in Chrome). its already set on whereusedPanel/relatedInfopanel
 activeItem: 0,
 portalManager: portalManager,
 items: [whereusedPanel, relatedInfoPanel],
+ };
+
+ // DEV make a combined panel, but this breaks some of the functionality in the ui
+ // important to define this _after_ var portalManager
+ var combinedPanel1 = {
+ id: PTC.miniNavigator.cardManager,
+ xtype: "panel",
+ region: "center",
+ layout: "hbox",
+ layoutConfig: {
+ align: "stretch", // stretch children vertically
+ },
+ defaults: {
+ border: false,
+ },
+ items: [
+ {
+ // LEFT COLUMN (Navigate Thumbnails)
+ id: "in_combinedPanel1_1",
+ xtype: "panel",
+ layout: "fit",
+ flex: 1, // take half of available width
+ style: "padding-right:0; border-right: 1px solid #d1d3d4;",
+ items: [miniCardManager.items[0]],
+ },
+ {
+ // RIGHT COLUMN (Related Info)
+ id: "in_combinedPanel1_2",
+ xtype: "panel",
+ layout: "fit",
+ flex: 1, // take the other half of the width
+ bodyStyle: "overflow-x:hidden;",
+ style: "padding-left:0; border-left: 1px solid #d1d3d4;",
+ // DEV workaround via https://stackoverflow.com/a/22376259
+ // directly add css here which selects and styles the _generated_ DOM
+ html: [
+ '<style type="text/css">',
+ "#in_combinedPanel1_2 .x-panel-body.x-panel-body-noheader.x-column-layout-ct",
+ // "{height: 100%; overflow-x:hidden; overflow-y:scroll !important;}",
+ "{height: 100%; overflow-x:hidden; overflow-y:scroll !important;}",
+ "</style>",
+ ].join("\n"),
+ items: [miniCardManager.items[1]],
+ },
+ ],
 };
 
 var dynamicDocPanel = {
@@ -830,7 +882,9 @@
 },
 ],
 },
- miniCardManager,
+ // miniCardManager,
+ // DEV add a new panel which contains both mini navigator and related info
+ combinedPanel1,
 ],
 });
 WVSPopup.win.on("afteraction", PTC.miniNavigator.onAfterAction);
@@ -875,6 +929,7 @@
 },
 items: [
 {
+ // DEV this contains EACH panel in the relatedinfo panel: caddocs, changes, etc.
 id: PTC.miniNavigator.relatedInfoColumn,
 xtype: "miniNavPortalColumn",
 },
@@ -1751,6 +1806,8 @@
 */
 PTC.miniNavigator.isRelatedWidgetPaneOpen = function () {
 var cardManager = Ext.getCmp(PTC.miniNavigator.cardManager);
+ // DEV return true always in order to display the panel always
+ return true;
 return cardManager.layout.activeItem.id === PTC.miniNavigator.relatedInformation;
 };

3 replies

Fadel
Fadel23-Emerald I
23-Emerald I
January 21, 2026

This is not possible (at least not in anu easy way) .The details are hard coded in miniNavigator.jsfrag in a way that defies easy customization

 
Buiꓘa
S
SvenR14-AlexandriteAuthor
14-Alexandrite
January 23, 2026

thanks a lot for the fast reply! Yes, miniNavigator.jsfrag contains all those UI stuff. Looking at it gives me some headaches as I am not an extjs expert or even close...😇

But then I had the idea to simply display both panes at the same time, always. This could maybe done quite simply by making the container pane contain both panes one besides each other. My first tries were unsuccessful, but I will take a look at it again...

Fadel
Fadel23-Emerald I
23-Emerald I
January 23, 2026

Hallo Sven,

 

Good Luck , if  you are stuck , you may raise a support case our services are at customers disposal .

 

BR,

Fadel

Buiꓘa
S
SvenR14-AlexandriteAuthor
14-Alexandrite
January 26, 2026

here is a patch file for miniNavigator.jsfrag (I am still using Windchill 12.0.2.26):

 

Spoiler
--- D:\thepath\ptc\Windchill_12.0\Windchill\codebase\netmarkets\javascript\util\jsfrags\infopage\miniNavigator.jsfrag
+++ D:\thepath\ptc\Windchill_12.0\Windchill\codebase\netmarkets\javascript\util\jsfrags\infopage\miniNavigator_PTC.js_frag_original
@@ -125,9 +125,8 @@
 use3D: true, // setting
 getRef: "", // setting, make "&ref=1" to get reference objects
 height: 428, // Default height of the popup window height of internal +6 for spacing +26 for vispanel title header
- // width: 486, // Default width of the popup window
- width: 686, // Default width of the popup window
-
+ width: 486, // Default width of the popup window
+ 
 getHelp: function(){
 PTC.help.openHelpWindow(WVSPopup.helpUrl);
 },
@@ -471,22 +470,17 @@
 }
 }
 
-// DEV hide this menu per css
 PTC.miniNavigator.getTitleMenuConfig = function(){
 var actionsMenu = PTC.attributeHelper.get("ActionsMenu");
 //this has to map the same id as defined in RenderInfoPageModelTag in getDataValue for nmActions.
 var defaultText = bundleHandler.get('com.ptc.core.ui.navigationRB.MININAVTHUMBPANE');
 var menuButton = {
- style: {
- // hide the menu
- display: 'none'
- },
- xtype: 'dynamicMenuButton',
- cls: 'miniNavTitle',
- id: PTC.miniNavigator.menuTitleID,
- text: defaultText,
- defaultText: defaultText,
- menu: {
+ xtype: 'dynamicMenuButton',
+ cls: 'miniNavTitle',
+ id: PTC.miniNavigator.menuTitleID,
+ text: defaultText,
+ defaultText: defaultText,
+ menu: {
 xtype: 'dynamicMenu',
 id: 'wvsViewActionMenu',
 requestUrl: actionsMenu.url,
@@ -667,51 +661,18 @@
 Ext.ComponentMgr.onAvailable(PTC.miniNavigator.relatedInfoColumn, function(column) {
 this.init(column);
 }, portalManager);
-
- /* Card Manager for right side pane in miniinfo*/
- var miniCardManager = {
- // hide it but still execute it, since it is needed
- // id: PTC.miniNavigator.cardManager,
+ 
+ /* Card Manager for right side pane in miniinfo*/
+ var miniCardManager = {
+ id: PTC.miniNavigator.cardManager,
 layout: 'card',
 region: 'center', //cannot set autoscroll here (will cause double scrollbar in Chrome). its already set on whereusedPanel/relatedInfopanel
- activeItem: 0,
- portalManager: portalManager,
- items: [whereusedPanel, relatedInfoPanel]
- };
-
- // DEV make a combined panel, but this breaks some of the functionality in the ui
- // important to define this _after_ var portalManager
- var combinedPanel1 = {
- id: PTC.miniNavigator.cardManager,
- xtype: "panel",
- region: "center",
- layout: "column",
- resizable: true,
- bodyStyle: "overflow-y: scroll; overflow-x: hidden;",
- defaults: {
- xtype: "container",
- autoHeight: true,
- },
- items: [
- Ext.apply(miniCardManager.items[0], {
- columnWidth: 0.498,
- }),
- // define a small divider between mini navigator and related info
- {
- xtype: "container",
- id: "vis-xsplit",
- width: 4,
- style:
- "background-color: #fff; height: 100%; padding-left:0; border-left: 1px solid #d1d3d4; border-right: 1px solid #d1d3d4;",
- layout: "fit",
- },
- Ext.apply(miniCardManager.items[1], {
- columnWidth: 0.498,
- }),
- ],
- };
-
- var dynamicDocPanel = {
+ activeItem: 0,
+		portalManager: portalManager,
+ items: [whereusedPanel, relatedInfoPanel]
+ };
+ 
+ var dynamicDocPanel = {
 	id: 'dyn_doc_panel',
 xtype: 'panel',
 autoScroll: true
@@ -843,16 +804,11 @@
 id: 'vis_atts_panel',
 html: '<div id="attributesPanel"><div id="attributesPanelInner"></div></div>',
 xtype: 'container',
- autoScroll: true,
- border: false
- },
- ],
- },
- // miniCardManager,
- // DEV add a new panel which contains both mini navigator and related info
- combinedPanel1,
- ],
- });
+ autoScroll: true,
+ border: false
+ }]
+ }, miniCardManager]
+ });
 WVSPopup.win.on('afteraction', PTC.miniNavigator.onAfterAction);
 WVSPopup.win.show(); // create the html
 WVSPopup.win.on('afterlayout', PTC.miniNavigator.setAttributePanelHeight);
@@ -1789,8 +1745,6 @@
 */
 PTC.miniNavigator.isRelatedWidgetPaneOpen = function() {
 var cardManager = Ext.getCmp(PTC.miniNavigator.cardManager);
- // DEV
- return true;
 return (cardManager.layout.activeItem.id === PTC.miniNavigator.relatedInformation);
 };

this results in a kind of hacky displayed two pane navigator:

 

2026-01-26 17_11_34-preview1.png

 

including a lot of broken functionality  - don't click on the +/- buttons in order to collapse the panes, it won't expand them 🤪

The scroll bars are also a bit buggy, that's why they are always displayed. But navigating part structures is working great. 

(It may eat a bit server performance, though...😇 )

Many thanks for the hints 👍👍

 

greetings

    S
    SvenR14-AlexandriteAuthorAnswer
    14-Alexandrite
    February 6, 2026

    since editing the previous post seems not possible, here is the final workaround I modded the thumbnail navigator config file:

     

    Spoiler
    --- path\codebase\netmarkets\javascript\util\jsfrags\infopage\miniNavigator_ptc_formatted.jsfrag
+++ path\codebase\netmarkets\javascript\util\jsfrags\infopage\miniNavigator.jsfrag
@@ -122,7 +122,8 @@
 use3D: true, // setting
 getRef: "", // setting, make "&ref=1" to get reference objects
 height: 428, // Default height of the popup window height of internal +6 for spacing +26 for vispanel title header
- width: 486, // Default width of the popup window
+ // width: 486, // Default width of the popup window
+ width: 686, // Default width of the popup window
 
 getHelp: function () {
 PTC.help.openHelpWindow(WVSPopup.helpUrl);
@@ -462,11 +463,16 @@
 }
 }
 
+// DEV hide this menu per css
 PTC.miniNavigator.getTitleMenuConfig = function () {
 var actionsMenu = PTC.attributeHelper.get("ActionsMenu");
 //this has to map the same id as defined in RenderInfoPageModelTag in getDataValue for nmActions.
 var defaultText = bundleHandler.get("com.ptc.core.ui.navigationRB.MININAVTHUMBPANE");
 var menuButton = {
+ style: {
+ // hide the menu
+ display: "none",
+ },
 xtype: "dynamicMenuButton",
 cls: "miniNavTitle",
 id: PTC.miniNavigator.menuTitleID,
@@ -668,12 +674,58 @@
 
 /* Card Manager for right side pane in miniinfo*/
 var miniCardManager = {
- id: PTC.miniNavigator.cardManager,
+ // hide it via id not associated but still execute it, since it is needed
+ // id: PTC.miniNavigator.cardManager,
 layout: "card",
 region: "center", //cannot set autoscroll here (will cause double scrollbar in Chrome). its already set on whereusedPanel/relatedInfopanel
 activeItem: 0,
 portalManager: portalManager,
 items: [whereusedPanel, relatedInfoPanel],
+ };
+
+ // DEV make a combined panel, but this breaks some of the functionality in the ui
+ // important to define this _after_ var portalManager
+ var combinedPanel1 = {
+ id: PTC.miniNavigator.cardManager,
+ xtype: "panel",
+ region: "center",
+ layout: "hbox",
+ layoutConfig: {
+ align: "stretch", // stretch children vertically
+ },
+ defaults: {
+ border: false,
+ },
+ items: [
+ {
+ // LEFT COLUMN (Navigate Thumbnails)
+ id: "in_combinedPanel1_1",
+ xtype: "panel",
+ layout: "fit",
+ flex: 1, // take half of available width
+ style: "padding-right:0; border-right: 1px solid #d1d3d4;",
+ items: [miniCardManager.items[0]],
+ },
+ {
+ // RIGHT COLUMN (Related Info)
+ id: "in_combinedPanel1_2",
+ xtype: "panel",
+ layout: "fit",
+ flex: 1, // take the other half of the width
+ bodyStyle: "overflow-x:hidden;",
+ style: "padding-left:0; border-left: 1px solid #d1d3d4;",
+ // DEV workaround via https://stackoverflow.com/a/22376259
+ // directly add css here which selects and styles the _generated_ DOM
+ html: [
+ '<style type="text/css">',
+ "#in_combinedPanel1_2 .x-panel-body.x-panel-body-noheader.x-column-layout-ct",
+ // "{height: 100%; overflow-x:hidden; overflow-y:scroll !important;}",
+ "{height: 100%; overflow-x:hidden; overflow-y:scroll !important;}",
+ "</style>",
+ ].join("\n"),
+ items: [miniCardManager.items[1]],
+ },
+ ],
 };
 
 var dynamicDocPanel = {
@@ -830,7 +882,9 @@
 },
 ],
 },
- miniCardManager,
+ // miniCardManager,
+ // DEV add a new panel which contains both mini navigator and related info
+ combinedPanel1,
 ],
 });
 WVSPopup.win.on("afteraction", PTC.miniNavigator.onAfterAction);
@@ -875,6 +929,7 @@
 },
 items: [
 {
+ // DEV this contains EACH panel in the relatedinfo panel: caddocs, changes, etc.
 id: PTC.miniNavigator.relatedInfoColumn,
 xtype: "miniNavPortalColumn",
 },
@@ -1751,6 +1806,8 @@
 */
 PTC.miniNavigator.isRelatedWidgetPaneOpen = function () {
 var cardManager = Ext.getCmp(PTC.miniNavigator.cardManager);
+ // DEV return true always in order to display the panel always
+ return true;
 return cardManager.layout.activeItem.id === PTC.miniNavigator.relatedInformation;
 };
      Terms & ConditionsCookie settingsAccessibility statement