How to add an expansion process
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