Change Navigation images and Background images of module in Sage 300 ERP Web screens

By | August 28, 2018

We have seen earlier that Sage 300 2018.2 has introduced vertical menus with the functionality of expand and collapse.

New Stuff: Complete web based solution for document attachment in Sage 300c

When we create a custom module, sage 300 wizard generates the folder under web application “\Content\Images\Nav\”.

The images related to custom module stored in the project specified in the above path gets copies to the Sage 300″\Online\Web\External\Content\Images\nav\” directory.

Note: Before making changes to any existing data/content, make sure to take the backup of the files.

Sage 300 Web has an option to change the Menu Icon and Menu background image of any module in Sage 300 ERP Web screens without making changes in the source code.

Follow the below steps to change the image and icon:

Step 1:

  1. Standard Module: Locate the “[Sage 300 Programs Path]\Online\Web\Content\Images\nav\” on the server.
  2. Custom Module: Locate the “[Sage 300 Programs Path]\Online\Web\External\Content\Images\nav\” on the server.

Step 2:

  1. Locate the XML file of the menu details for the respective module where the images needs to be changed.
  2. Navigate to “[Sage 300 Programs Path]\Online\Web\App_Data\MenuDetail\” on the server.
  3. Edit the file in the text editor. Example: For Order Entry module “OEMenuDetails.xml”, where OE is the module Id.
  4. We will see the example of the Greytrix Document Attachment Module “GD” → “GDMenuDetails.xml” and Order Entry Module “OE” → “OEMenuDetails.xml” in the next steps.

Step 3:

  1. Search for XML Node <MenuItemLevel>2</MenuItemLevel>.
  2. Under the same level there will be <IconName> and <MenuBackGoundImage> nodes with path format “DevPartner/ImageNameWithExtension”.
  3. Standard module of the Sage provides the module identifier as the folder name for DevPartner



4. DevPartner for Custom module is decided by the development team while module development. It           can be module identifier as followed by Sage or the one supplied by partner. We are using “Greytrix”         as the DevPartner.



Step 4:

User has an access to either change the name of the image in step 3 or overwrite the existing image in  step 2 with same name.

This provides the user to customize the navigation icon and image as per the company/user comfort using the Sage 300 Web screens.

About Us
Greytrix a globally recognized Premier Sage Gold Development Partner is a one stop solution provider for Sage ERP and Sage CRM needs. Being recognized and rewarded for multi-man years of experience, we bring complete end-to-end assistance for your technical consultations, product customizations, data migration, system integrations, third party add-on development and implementation expertise.

Greytrix offers unique GUMU™ integrated solutions of Sage 300 with Sage CRM, and Magento eCommerce along with Sage 300 Migration from Sage 50 US, Sage 50 CA, Sage PRO, QuickBooks, Sage Business Vision and Sage Business Works. We also offer best-in-class Sage 300 customization and development services and integration service for applications such as POS | WMS | Payroll | Shipping System | Business Intelligence | eCommerce for Sage 300 ERP and in Sage 300c development services we offer services such as upgrades of older codes and screens to new web screens, newer integrations using sdata and web services  to Sage business partners, end users and Sage PSG worldwide. Greytrix offers over 20+ Sage 300 productivity enhancing utilities that we can help you with such as GreyMatrixDocument AttachmentDocument NumberingAuto-Bank ReconciliationPurchase Approval SystemThree way PO matchingBill of Lading and VAT for Middle East.

For more details on Sage 300 and 300c Services, please contact us at We will be glad to assist you.