How to add an expansion process

This works from Openbravo PR14Q4

In order to create a record component, you have to create a canvas field

This canvas field should be in charge of build the process and open the expansion component. Here it is an example:

isc.defineClass('OBPF_SalesInvoiceAddPayment', isc.OBGridFormButton);
 
isc.OBPF_SalesInvoiceAddPayment.addProperties({
  canExpandRecord: true,
  noTitle: true,
  title: OB.I18N.getLabel('APRM_AddPaymentIn'),
  draw: function () {
    if (this.record && this.record.paymentComplete === false) {
      return this.Super('draw', arguments);
    } else {
      return false;
    }
  },
  click: function () {
    var processId = '9BED7889E1034FE68BD85D5D16857320',
        grid = this.grid,
        record = this.record,
        standardWindow = grid.view.standardWindow;
 
    var process = standardWindow.buildProcess({
      callerField: this,
      paramWindow: true,
      processId: processId,
      windowId: grid.view.windowId,
      windowTitle: OB.I18N.getLabel('APRM_AddPaymentIn')
    });
 
    grid.openExpansionProcess(process, record);
  }
});

As you can see in the code, at the end, the grid.openExpansionProcess is the one in charge of showing the process within the current grid row/record (the one where the button is).

The openExpansionProcess can have the following arguments:

• process: The process to be opened
• record: The record where the process will be opened
• selectOnOpen: It indicates if the record will be selected when the process be opened (true by default)
• deselectAllOnOpen: It indicates if all other records will be unselected when the process be opened. It is applied before 'selectOnOpen' (true by default)
• collapseOthersOnOpen: It indicates if any other opened process should be closed (true by default)
• width: The width of the opened process (100% by default)
• height: The height of the opened process (7 grid rows + 'bottom buttons layout' by default)
• topMargin: The top margin of the process. (10 by default)
• rightMargin: The right margin of the process. (30 by default)
• bottomMargin: The bottom margin of the process. (10 by default)
• leftMargin: The left margin of the process. (30 by default)

Here it is the source code of this how to