Customization

InteractiveHtmlBom plugin supports powerful output customization options. Everything from the look to the functionality of the generated html page can be adjusted to user's preference and made to fit the look and feel of company standard documentation/website.

User customization files

There are currently 4 supported user files:

• user.css - custom css styles and overrides for default ibom styles
• user.js - custom javascript code, see more info below
• userheader.html - custom header injected above ibom contents
• userfooter.html - custom footer injected below ibom contents

All of these files are expected to be in web folder of the plugin, along with ibom.html, ibom.css and others.

Custom javascript

In addition to adding arbitrary javascript code developers can add custom callbacks for some ibom page events. See example user.js for simple implementation of such callback.

Currently supported events are:

• highlight change
• checkbox state change
• bom table body change event

Callback parameters

HIGHLIGHT_EVENT

{
  eventType: 'highlightEvent',
  args: {
    rowid: rowid, // string
    refs: [(ref, id), ...], // array of tuples
    net: net // string
  }
}

CHECKBOX_CHANGE_EVENT

{
  eventType: 'checkboxChangeEvent',
  args: {
    checkbox: checkbox, // string
    refs: [(ref, id), ...], // array of tuples
    state: 'checked' or 'unchecked' // string
  }
}

BOM_BODY_CHANGE_EVENT

{
  eventType: 'bomBodyChangeEvent',
  args: {
    filter: filter,  // contents of filter textbox
    reflookup: reflookup,  // contents of ref lookup textbox
    checkboxes: ['checkbox1', 'checkbox2', ...],  // array of checkbox names
    bommode: "grouped", "ungrouped", "netlist" // string
  }
}

Id in reference tuple is the index of the footprint from footprints array of pcbdata struct. See DATAFORMAT doc for more info about pcbdata.

Backwards incompatible changes to the events API will be avoided if possible and documented here.

Examples

An example of every file can be found in InteractiveHtmlBom/web/user-file-examples.

How to add a logo: #430.

How to rebind highlighting to mouse click instead of hover: #88

How to hide specific columns: #167

Allow slower double click on column header: #377