Skip to content

Customize the interface

salihzett edited this page Jan 15, 2021 · 7 revisions

Sometimes you want to change some things about Munkireport so that it better represents your environment. But you don't want to apply that change every time there is an upgrade. For this you can add some customisation settings to .env:

  • CUSTOM_CSS="https://url/to/custom.css" allows you to add an url that points to a custom css file to override the default css.
  • HIDE_INACTIVE_MODULES=TRUE when true, modules that are not in conf['modules'] will not be shown in the 'Listings' menu.
  • CUSTOM_JS="https://url/to/custom.js" allows you to add an url that points to a custom js file to override the default js.

Sample custom.js file:

// may need to run localStorage.clear(); to see changes made in this file

// expand all scrolling widgets
$('.scroll-box').removeClass('scroll-box')

// Set default displaylength to all (which is -1)
$.fn.dataTable.defaults.iDisplayLength = -1;

$(document).on('appReady', function(e, lang) {

// Add buttons to title bar
$('input.mr-computer_name_input')
	.next()
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#storage-tab">Stroage</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#profile-tab">Profile</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#power-tab">Power</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#gsx-tab">GSX</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#filevault-tab">Filevault</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#displays-tab">Displays</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#directory-tab">Directory</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#wifi-tab">WiFi</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#network-tab">Network</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#location-tab">Location</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#inventory-items">Inventory Items</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#third-party-software">Third Party Software</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#apple-software">Apple Software</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#munki">Managed Software</a>')
	.prepend('<a data-toggle="tab" class="btn btn-default" href="#summary">Summary</a>');

})

Extend Munkireport

One of the goals of this version of munkireport is to make it easier to extend the base install with your own data/widgets. Although there is still a lot of work to be done to make munkireport truly customizable, some things are in place to modify things.

Clone this wiki locally