Detail Component Definition Setup

The detail component definition is the configuration for the screen that loads when an invoice number link is selected. This shows a detailed screen for a single invoice that contains more information than the widget screen.

1. Create a component

Open the BAPI_WEBINVOICE_GETDETAIL scenario record page and select the Create Component button.

2. Set definition properties

To set the details for the component definition, populate the fields as follows:

1. Label: SAP Invoice Detail

2. Developer Name: mySAPInvoiceDetail

3. Apex Plugin Class: Blank

4. Require Secure Link for Access: Not Required (Off)

5. Custom Permission(s): Blank

Select Create Component Button.

3. Set preview settings 

Specify how the Component Builder should render the definition in the preview frame. Populate the fields as follows:

1. Preview object: Account
2. Preview record: (Choose a sample account with an SAP customer number saved) 
3. Preview component type: Detail Viewer

After selecting Update, all of the dialog boxes should close and allow for editing. 

The preview mode will make live calls to the SAP system, so a development system should be used.

The preview mode for a detail view needs more information than can be set in the component builder, thus the preview screen will not show any live data.

4. Configure the component tab

The default view of the Component tab will be visible in the top left. Populate the fields as follows:

1. Static label: SAP Invoice
2. Custom Icon: standard:report
3. Click on the Dynamic label options button and follow the below-mentioned steps to add two parameters:
   Choose the values as shown above in the respective fields for 1, 2, 3, 4 and 5. Next, choose the values as shown below on the next screen for 1, 2, 3, 4 and lastly, click Save (5).This will display the two parameters in the Parameters fields WEBINVOICEDOCUMENT.BILL_TYPE_TEXT and WEBINVOICEDOCUMENT.BILLINGDOC, which would show the dynamic value for the Label in the Output display in place of a static label for the SAP invoice.
4. Navigation label type: Dynamic
5. Display in navigation breadcrumbs: Checked
6. Auto Run: Checked
7. Show refresh button: Checked

5. Configure BAPI_WEBINVOICE_GETDETAIL section

Disable the first section BAPI_WEBINVOICE_GETDETAIL by turning off (1).

6. Configure RETURN_x section

The next section, RETURN_x, is the BAPI messages section. The success and error messages will appear here. This is a standard SAP data structure. Thus, in order to handle the return messages, the fields should be set as follows:

1. Choose Sections
2. Choose the Section RETURN_x
3. Structure Type: Structure
4. Section Type: Toast message
5. Section editability: Read only (Off)

With this configuration, the messages from SAP will appear as toast messages at the top of the screen - success as green, warning as yellow, and error as red.

7. Configure WEBINVOICEDOCUMENT section

The WEBINVOICEDOCUMENT section is a single data structure that holds header information about the invoice. Populate the fields as follows:

1. Choose the Section WEBINVOICEDOCUMENT
2. Label: Invoice Header
3. Structure Type: Structure
4. Section Type: Panel
5. Display Variant: Simple detail
6. Editability: Read-only (unchecked)
7. Uniform field width: Not uniform (unchecked)

On the Fields tab, select Hide all and enable the following:

1. BILL_TYPE_TEXT
2. BILL_DATE
3. BILLCATEG_TEXT
4. NET_VALUE
5. TAX_AMOUNT
6. NET_DATE
7. SOLD_TO
8. PAYER
9. CANCELLED
10. INCOTERMS1
11. INCOTERMS1_TEXT
12. INCOTERMS2
13. PMNTTRMS
14. PMNTTRMS_TEXT
15. REFERENCE

8. Configure WEBINVOICEITEMS section

The WEBINVOICEITEMS section is a collection of item records. Display this as a table in a tab group by populating the fields in the section settings as follows:

1. Label: Items
2. Structure Type: Table
3. Section Type: Tab
4. Display Variant: Table
5. Show row numbers: Unchecked
6. Use infinite scrolling: Checked
7. Sort rows by key field: None
8. Maximum rows to retrieve: Blank
9. Section Editability: Read only (Off)

On the Fields tab, select Hide all and enable the following:

1. MATERIAL
2. SHORT_TEXT
3. INV_QTY
4. SALES_UNIT
5. NETVAL_INV
6. TAX_AMOUNT
7. REF_DOC_NUMBER
8. REF_DOC_ITEM

9. Configure WEBINVOICEPARTNERS section

The WEBINVOICEPARTNERS section is also a collection of item records. This is shown in the same tab group as that of WEBINVOICEITEMS. Populate the fields as follows:

1. Label: Partners
2. Structure Type: Table
3. Section Type: Tab
4. Display Variant: Table
5. Show row numbers: Unchecked
6. Use infinite scrolling: Checked
7. Sort rows by key field: None
8. Maximum rows to retrieve: Blank
9. Section Editability: Read Only (Off)

On the Fields tab, select Hide all and enable the following:

1. PARTN_ROLE_TEXT
2. CUSTOMER
3. NAME_LIST
4. STREET
5. CITY
6. REGION_TEXT
7. COUNTRY_ISO
8. POSTL_CODE
9. TELEPHONE

10. Reference Values

Navigate to the Reference Values tab. Locate the SAP Account Identifier, which is what will be used to get the SAP customer number from the record.

11. Parameter Mappings

Create the connection between the account record data and component definition with parameter mappings. These are called "parameter mappings" because of data being mapped to the BAPI parameters. These mappings are loaded when displaying the page, thus pulling the data from the record to build the request payload. 

Select the Parameter Mappings tab and the New button.

Set the input values as follows:

1. Parameter: BAPI_WEBINVOICE_GETDETAIL
2. Field: PARTNER_NUMBER
3. Reference Value: SAP Account Identifier
4. Optional: True (disabled)

Select Save.

Create a second mapping with input values as follows:

1. Parameter: BAPI_WEBINVOICE_GETDETAIL
2. Field: PARTNER_ROLE
3. Default/Static Value: AG
4. Optional: True (disabled)

Select Save.

12. Save and preview

Now that the setup is completed, the component definition will need to be saved from the top right by selecting Save. The preview pane will reload after saving completes, displaying the layout, but without data.