Create an Overcast Component

Getting Started

Overcast Components (OC) are a way to build integrations to external or backend systems for users in Salesforce using configuration rather than code.

Built on top of Overcast Real-time Scenarios and using Salesforce Aura Component UI technology, OCs allow for displaying real-time data in various forms, such as lists of records, charts, gauges, summaries; and performing real-time updates to backend systems.

To learn more about creating a real-time scenario, please click here. 

This page details how to create an OC for displaying SAP invoice history for an SAP customer from within Salesforce.

This OC will be used on an Account detail page. When the page opens, the component loads, reads the SAP customer number from the record, and a query is sent to SAP through Overcast in order to retrieve the invoice history. The invoice records are displayed and the invoice number links to the details page. The details page, when loaded, will again read the SAP customer number from the record, and a query will be sent to SAP through Overcast to retrieve the invoice detail to display on screen.

Terminology

To ensure a full understanding of specific terminology, click here to learn more about terms used to describe Overcast Components.

Scenario Setup

As a first step, we need to create a scenario for querying SAP invoices. Create and activate two real-time scenarios, one for one for BAPI_WEBINVOICE_GETDETAIL and one for BAPI_WEBINVOICE_GETLIST. 

 

Following are the steps to create a Real-Time Integration Scenario for SAP BAPI / RFC - BAPI_WEBINVOICE_GETDETAIL. Using this Real-Time Scenario, we shall also be creating a detail display as mentioned on the page Detail Component Definition Setup.

  1. Select the Integration Scenario tab (1), then select New (2). 

     
  2. For this scenario, select Real-time Integration, then Next.
  3. In the New Scenario Record, enter a Scenario Name (which must be an API name) (1) and choose your Connection String (2) from the lookup list. Description (3) is optional. Select Next (4). 
  4.  After landing on the Scenario Edit page, go to the SAP System Info section and choose the correct option for your integration. For this example, select SAP BAPI/RFC (1) and then select the Search button (2). 
  5.  A new window will pop up. In the Search Filter, enter the name of the SAP BAPI/RFC as BAPI_WEBINVOICE_GETDETAIL (1), and select Search (2). Select BAPI_WEBINVOICE_GETDETAIL from the search results (3).
  6. The chosen SAP BAPI/RFC name will appear (1). Click Save & Activate (2).

                    

Note: This may take time, but progress can be tracked in the Monitoring tab as well as the section for Scenario Execution History. The status changes to green when the scenario is successfully activated, as shown below.

Repeat Steps 1-6 for creating a Real-Time Scenario with a Scenario named myRealTime_SAPInvoiceList for SAP BAPI/RFC - BAPI_WEBINVOICE_GETLIST. Using this Real-Time Scenario, we shall also be creating a simple list display on the upcoming page Widget Component Definition Setup and a full list display on the upcoming page List Component Definition Setup.

 

As the next step, please ensure that we complete the following pages in the given order as below:

1) Detail Component Definition Setup 

2) Widget Component Definition Setup &

3) List Component Definition Setup 

 

Add to Account Detail Page

As the last step, with the component definitions(Detail, Widget & List) created and configured, the next step is to add the widget component to the Account detail page. Open an Account page, select the cog and then select the Edit Page link.

 

Locate the component in the Custom section named SAP Invoice Widget(the Label which you had given to the Widget Component Definition). Drag and drop this onto the page(alternatively you could create a new Tab, for this example, SAP, and place this Component Definition there), and Save. Select the Back arrow button in the top left corner of the Edit page. 

On the Account Screen, to view the data, adjust the filter settings (1) accordingly and change the date range, for example, Current and Previous Year  FY (2) and then click Update (3).

 

Clicking Update shows the Widget with 6 Invoices(based on the number of Tiles selected in the Widget Component Definition Setup).

Clicking View All takes us to the List screen as shown below and clicking the Invoice from the Widget or the List takes us to the Detail screen.

Detail screen: