Configure a Custom Quote Header

At the top of a Quote detail page, you can display a collapsible header which will be available on all tabs (e.g. also for Items).

This customer header can contain:

Main Quote attributes (e.g., Created by, Status, Workflow Status, Effective and Expiry Dates, Last Update, etc.).
Chart (e.g. the overall Quote performance displayed in a graphical form).
Header inputs – i.e. instead of displaying the header input together with regular header inputs, they can appear on the custom header.

The content and layout of the custom header are defined in an active Quote header logic. If needed, the custom header can be displayed dynamically depending on a condition in the header logic.

To configure the custom header, add an output with resultName __UI_DetailPageHeader to the Quote in the post-processing phase of the header logic. The result field of the added output is an array of objects which form the custom header:

Result object with a chart property defining the chart. The chart is created using the Pricefx Groovy API’s buildFlexChart or buildHighchart methods.
Result objects defining header columns with fields (containing the 'fields' array property listing the fields that are displayed – all the supported fields are used in the example below).
Result object defining a column with input (only popup configurator is supported).

Objects that have neither chart nor field/input property are ignored.

Result objects in the custom header are formatted using CSS Flexbox that can be customized using the properties shown in the example.

Definition of header input field which will be positioned on the custom header

if (quoteProcessor.isPrePhase()) {

    def input1 = api.inputBuilderFactory()
            .createOptionEntry("myCustomHeaderInput1")
            .setOptions(["one", "two", "three"])
            .setParameterGroup("__UI_DetailPageHeaderInputs")  //❶
            .buildMap()

    quoteProcessor.addOrUpdateInput(input1)

}

❶ This will position it to the custom header.

Create the Custom Header section

if (quoteProcessor.isPostPhase()) {
    quoteProcessor.addOrUpdateOutput([
            "resultName": "__UI_DetailPageHeader",
            "resultType": CalculationResultType.SIMPLE.toString(),
            "result"    : [
                    [ // column with standard fields
                      fields: [

                              "createdByName",
                              "quoteStatus",
                              "creationWorkflow",
                              "workflowStatus"
                      ]
                    ],
                    [ // another column with standard fields
                      fields: [
                              "effectiveDate",
                              "expiryDate",
                              "lastUpdateDate"
                      ],
                    ],
                    [ //column with custom header inputs
                      inputs: [
                              [ "name": "myCustomHeaderInput1" ]
                      ],

                    ],
                    [ // column with highchart
                      chart: [
                              resultName: "MyChart",
                              resultType: "HIGHCHART",
                              result    : createResultHighchart()
                      ],
                      // width : 250, // initial width in pixels (number) or CSS width (string)
                      // height: 250, // chart height in pixels, default is 200
                      // backgroundColor: 'yellow' // optional
                      // 'min-width': 200, // optional and of the same type as width
                      // 'max-width': 400, // optional and of the same type as width
                      // flex: '1 1 auto' // optional, see CSS flex

                    ],
            ]
    ])
}

A working logic sample can be also found here: Quote_Header_CustomHeaderDemo

In a similar way, you can configure custom headers also for Rebate Agreements, Compensation Plans and Agreements/Promotions.