Widget Component Definition Setup


The widget component definition displays the top 6 records as cards in two columns. The name "widget" is modeled after the Salesforce related list widget, and is meant for display on a record page. The display settings can be modified in the component definition configuration (see step 7 for the Display Variant field).


 

1. Create a Component

After the scenarios are created and activated, open the BAPI_WEBINVOICE_GETLIST scenario record page and select the Create Component button which will open the Component Builder. See how you can create and customize components using the Component Builder in a Real-Time Integration Scenario. Alternatively, you can create or customize a component from the Component Library tab.

 

2. Set definition properties

A form will appear that requires details regarding the component definition. Populate the fields as follows:

 

 

  1. Label: SAP Invoice Widget
  2. Developer Name: mySAPInvoiceWidget
  3. Apex Plugin Class: Blank
  4. Require Secure Link for Access: Not required (off)
  5. Custom Permission(s): Blank

Select the Create Component button to continue.

 

3.  Set preview settings

Next, you must specify how the Component Builder should render the definition in the preview frame. The preview frame shows a working version of the correct configuration, and thus you must determine the object type for which the component is designed for, which record to pull the preview data from, and which container type should be used to display the component. When you select the Create Component button as described in step 2, the following dialog box should appear, and should be populated as follows:

 

 

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

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

The preview mode will make live calls to the backend system, so a development org should be used instead of a production org.

 

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 Invoices

  2. Custom icon: standard:report

  3. Select the Dynamic label options button.  Add the row count parameter by following these steps and values: Row Count(1), WEBINVOICEDOCUMENTLIST (2), Click Add Parameter Button (3),enter Template as SAP Invoices ({0}) (4) & Click Save (5). 

  4. Select the Master action link button. Enter Button Label as View All (1) and click the Button Navigation Options (2) and select                       None as the Navigation Type and then Click Edit Json and add the following code snippet for the full list view - { "action": { "component": "ListViewer", "componentDef": "mySAPInvoiceList" }, "label": "View All", "name": "btn418243489" }. Click Update and then Save on the next screen as shown below. The component definition setup of mySAPInvoiceList will be covered on the next page List Component Definition Setup.

5. Configure BAPI_WEBINVOICE_GETLIST section

Next, configure the data inputs from the SAP BAPI by opening the Sections tab. The top section, BAPI_WEBINVOICE_GETLIST, should be selected automatically. These input parameters will be displayed as a filter section using only two date fields.

Select the Fields tab, select Hide all, search for DATE, and enable DATE_FROM and DATE_TO.

 

Switch back to the Section Settings tab, and populate the fields as follows:

 

  1. Label: Selection Date Range
  2. Structure Type: Structure
  3. Section Type: Filter
  4. Filter Variant: Date Range
  5. Section editability: Editable (On)

Select the Variant Options button and add the following code snippet:

{

    "startDate": "FIELD:DATE_FROM",

    "endDate": "FIELD:DATE_TO",

    "defaultOption": "Trailing Month"

}

 

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, and thus, in order to handle the return messages, the fields should be populated as follows:

 

  1. Structure Type: Structure
  2. Section Type: Toast message
  3. Section editability: Read only (off)
  4. Uniform Field Width: Not Uniform(off)

All messages from SAP will appear as a toast message at the top of the screen: success as green, warning as yellow, and error as red.

 

7. Configure WEBINVOICEDOCUMENTLIST section

The last section is a collection of invoice records. Configure this collection to display as tiles, rather than a table. This will show the top 6 records, based on the fields being populated as follows:

 

  1. Label: Blank
  2. Structure Type: Table
  3. Section Type: Panel
  4. Display Variant: Tiles
  5. Sort rows by key field: Descending
  6. Maximum rows to retrieve: 50
  7. Maximum tiles to display: 6
  8. Editability: Read only (Off)

Next, select the Fields tab before selecting the fields to display, and select Hide all. Enable the following three fields:

  1. BILLCATEG_TEXT
  2. NET_VALUE
  3. BILL_DATE

 

For each invoice to have a title that links to the invoice details, open the settings for the BILLINGDOC field (1). Select the Key field checkbox to mark this as the key (2) and the Navigation options button (3).

 

 

On clicking the Button Navigation options(3), a new window pops up and enter the details as below:

Enter the details as below on the next screen:

Enter the details as below on the next screen:

 

 

This will create a link that connects to the detail viewer and will load the detail component definition mySAPInvoiceDetail. It passes a parameter from this widget component definition, BILLINGDOC, into the target component definition's import structure, BILLINGDOC.

Still in BILLINGDOC settings, select the Display & Format Settings tab (1) and select the Dynamic label options (2) button.

 

Enter the following code snippet:

 

{

    "parameters": [

        "FIELD:BILL_TYPE_TEXT"

    ],

    "template": "{0}"

}

This will create a title for the invoice tile from the field BILL_TYPE_TEXT instead of the key field, Billing document number.

 

8. Reference Values

Navigate to the Reference Value tab (1). Locate the SAP Account Identifier (2), which is what will be used to get the SAP customer number from the record.

 

9. Parameter Mappings

Create a 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.

 


 

 

Populate the input values as follows:

  1. Parameter: BAPI_WEBINVOICE_GETLIST

  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_GETLIST
  2. Field: PARTNER_ROLE
  3. Default/Static Value: AG
  4. Optional: True (disabled)

Select Save.

 

10. 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 is completed.