Objective
Now that the user interface is ready, you can add data and logic to the app to give it life.
This lesson covers the following tasks:
The steps listed above are demonstrated in the videos below and are accompanied by additional explanations. As mentioned earlier, this course focuses on creating a single appointment for demonstration purposes.
To work with APIs and external data, you need to enable data integration as a general feature and select the connection target, which is SAP Sales and Service Cloud Version 2. After that, you must choose the entities that are necessary for the use case: accounts and appointments. This lays the foundation for working with the respective data.
The following video demonstrates how to enable data integration into SAP Sales and Service Cloud Version 2.
The Browse Real Data feature in the integration section offers a simple way to view data from the connected system and gain insights into data structures and field values, such as codes. The following screen capture illustrates this.
Once the extension app is embedded into the SAP Sales and Service Cloud Version 2 account screen, it will present additional account details. To enable this functionality, the app needs the technical ID of the currently displayed account. This ID allows the embedded app to access the relevant account data through the account-service API.
The following screen capture illustrates how the account ID is handed over from SAP Sales and Service Cloud Version 2 and additional account data fetched via a REST API.
The following video demonstrates how to enable the app to receive the account ID from a URL parameter and retrieve data for the provided account.
Page parameters enable passing data to a specific page within the app. This can occur either internally when navigating to a different page or from an external source, such as when the app is embedded in another application. It’s recommended to choose descriptive names for page parameters.
Please note that the name of the page parameter is case-sensitive and must be added to the URL exactly as defined when configuring the mashup later in SAP Sales and Service Cloud Version 2 or during the preview of the app with real data.
Following the previous demonstration video, you have to append ?accpuntId=#UUID# to the URL, where #UUID# needs to be replaced with the actual technical ID of an existing account. Use the Browse Real Data feature as mentioned earlier in this lesson to find an existing one.
Data Variables store object data fetched from or sent to the APIs of connected systems. Data variable fields can be linked to UI components. This allows displaying values on the UI and users to modify them.
In the previous video, additional account data was fetched from SAP Sales and Service Cloud Version 2. While the account’s ID and name are shown as read-only texts to the user, the contact list drop-down allows users to pick a contact person who will be assigned to the created appointment.
The implementation of the appointment creation involves creating an additional data variable, setting default values for the relevant fields, and binding them to the UI components to enable user editing. Finally, it includes designing the logic to send the new appointment to the API endpoint.
The following video demonstrates the appointment creation. The sections after the video explain some of them in more detail.
With the flow function Set Data Variable, you can set initial values for the relevant fields of the newAppointment data variable. Binding fields to UI components allows users to change the default values, for instance, the invite text or the location field. Other fields have not been initialized in this flow function. Instead, their values are either directly entered by the user or calculated.
To give you a better overview of the used fields in the demonstration, the following code snippet shows a sample appointment record in JSON format with sample values:
123456789101112131415{
"note": {
"content": "Dear ..., This is the invitation to the first Company Onboarding meeting. ... Kind regards ..."
},
"account": {
"id": "11ed7172-c77b-9f0e-afdb-8141ba010a00"
},
"subject": "Company Onboarding",
"location": "My Company Inc., Some Street Address",
"primaryContact": {
"id": "11ed7746-4559-2c7e-afdb-813386010a00"
},
"startDateTime": "2025-12-12T15:30:00Z",
"endDateTime": "2025-12-12T17:30:00Z"
}When you compare the fields used in the demo with the fields available in the field definition, you will see a big difference. This is because the same structure is also used to read appointment data. However, not all fields are relevant for creating a new appointment. For instance, the account node has several fields that contain values when reading an appointment from the system. However, for assigning an account to the new appointment, only the id field needs to be filled with the account’s technical ID.
Other fields may have default values assigned based on settings in SAP Sales and Service Cloud Version 2 when the extension app does not set an explicit value.
The following code snippet shows the newly created appointment read from the system. It contains a lot more fields automatically filled or calculated. Some nodes contain additional information, such as names and contact data for the account and the appointment owner.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485{
"id": "10f21f36-be0d-11ef-b9eb-3bbb8fc6ae1a",
"externalId": "391",
"displayId": "391",
"subject": "Company Onboarding",
"organizer": {
"id": "11eef6cc-d2e1-3b3e-afdb-81c376020a00",
"externalId": "E0014",
"displayId": "E0014",
"phone": "",
"name": "Frank Williams",
"email": "frank.williams@best-run.cx.demo.sap"
},
"account": {
"id": "11ed7172-c77b-9f0e-afdb-8141ba010a00",
"externalId": "1000077",
"displayId": "1000077",
"streetPostalCode": "30303",
"state": "GA",
"name": "Global Bike World",
"postalAddress": "ATLANTA GA 30303 / US"
},
"individualCustomer": {},
"owner": {
"id": "11eef6cc-d2e1-3b3e-afdb-81c376020a00",
"externalId": "E0014",
"displayId": "E0014",
"phone": "",
"name": "Frank Williams",
"email": "frank.williams@best-run.cx.demo.sap"
},
"ownerDeterminationCode": "3",
"primaryContact": {
"id": "11ed7746-4559-2c7e-afdb-813386010a00",
"externalId": "1000227",
"displayId": "1000227",
"name": "Tom Barker",
"email": "tom.barker@globalbike.cx.demo.sap"
},
"phoneNumbers": [
"+1 478-705-261"
],
"startDateTime": "2025-01-14T15:30:00.000Z",
"endDateTime": "2025-01-14T17:30:00.000Z",
"location": "My Company Inc., Some Street Address",
"documentType": "0001",
"documentTypeDescription": "Appointment",
"status": "OPEN",
"category": "1001",
"categoryDescription": "Meeting",
"priority": "3",
"priorityDescription": "Normal",
"note": {
"content": "Dear ..., This is the invitation to the first Company Onboarding meeting. ... Kind regards ...",
"adminData": {
"createdBy": "f2bda492-f6cc-11ee-a4ab-d3bb037ca5a4",
"createdOn": "2024-12-19T13:27:59.993Z",
"createdByName": "Frank Williams",
"updatedBy": "f2bda492-f6cc-11ee-a4ab-d3bb037ca5a4",
"updatedOn": "2024-12-19T13:27:59.993Z",
"updatedByName": "Frank Williams"
}
},
"adminData": {
"createdBy": "f2bda492-f6cc-11ee-a4ab-d3bb037ca5a4",
"createdOn": "2024-12-19T13:27:59.993Z",
"createdByName": "Frank Williams",
"updatedBy": "f2bda492-f6cc-11ee-a4ab-d3bb037ca5a4",
"updatedOn": "2024-12-19T13:28:00.227Z",
"updatedByName": "Frank Williams"
},
"isAllDay": false,
"isPrivate": false,
"isDraft": false,
"territory": {},
"salesOrganisation": {},
"distributionChannel": {},
"division": {},
"isTeamsMeeting": false,
"leadProspect": {},
"isEndOfPurpose": false,
"isMandatory": false,
"timeZone": "UTC",
"isDraftMode": false
}Identifying the relevant fields for a specific use case and understanding the values they need to achieve the desired outcome can be challenging. A good approach is to start by creating a sample appointment in the front end. Fill in the relevant fields and then retrieve that appointment via the API. This will provide an overview of the data model, as well as the representation of different values and data types.
There are several ways to examine the data delivered by the API. This lesson discusses three of these methods in detail:
This method allows you to browse the real data of the connected system and inspect single records in more detail. It also offers the capability to create new records or modify existing ones as the following screen capture illustrates. This is the easiest way to browse data of a connected system. However, it requires an existing project with the data integration already enabled. The next approach is more generic and doesn’t have this prerequisite.
The SAP Business Accelerator Hub is an important source for integration and API related information. You can find it via https://api.sap.com. It provides an overview of the APIs that solutions offer, accompanied by the supported capabilities, operations, and required data structures. It is closer to the technical layer in comparison to the Browse Real Data feature of SAP Build Apps. Instead of simply listing data and creating records with a button, you need to select the API’s capabilities like GET or POST, and can apply parameters on the technical API layer.
The Try Out feature allows you to conduct test calls to either a sandbox environment or real systems after entering the necessary system information. One key advantage of this approach is that you do not need an existing project in SAP Build Apps or a connected system to gain a general overview. The following screen capture demonstrates how to use the Try Out feature to search for an appointment using the non-technical display ID in the previously connected training system.
Carry out the following steps to use the feature:
The filter condition follows the pattern fieldname eq value (field name, space, comparison operator, space, value) where the field name must be the exact name of the attribute, eq is the comparison operator and stands for equals ( = ). Text values must be quoted with single apostrophes ( ' ).
With the Try Out feature, you can also query the other capabilities of the appointment service, for instance, Appointment Category. The GET operation of the Appointment Category capability returns a list of code-description pairs that reflect the categories set up in the connected system as shown in the following screen capture.
An appointment’s category can be set and read via the category field and the corresponding code. When reading appointment data from the system, there is an additional field categoryDescription, which contains the text for the category code. The created appointment record above contains the category code 1001, which stands for Meeting.
The third option is the most technical one, but it doesn’t need any additional tool besides access to a SAP Sales and Service Cloud Version 2 tenant. This approach allows you to retrieve data via the GET operation from REST APIs simply with the web browser by typing the correct endpoint into the browser’s address bar. Make sure you are logged in to SAP Sales and Service Cloud Version 2 in the same browser window before opening an API endpoint.
The SAP Business Accelerator Hub helps you find the right API endpoint. Instead of using the GET Appointment Categories capability within the Hub's user interface, you can enter the full endpoint directly into your browser's address bar, as shown in the screen capture below.
The full endpoint for the Appointment Categories would look like this:
https://myXXXXXXXXX.crm.cloud.sap/sap/c4c/api/v1/appointment-service/categories
The following listing shows other sample endpoints that you could use to fetch appointments, for instance by their subject, by their displayId, or just the first 10 records from the system:
The first two URLs target the appointment collection of the appointment-service and apply a filter.
The browser will usually escape characters and change the last part of the URL to something like this:
$filter=subject%20eq%20%27Company%20Onboarding%27
Some characters have a special meaning and are not allowed to appear in URLs. In this case, the browser applies the so-called URL encoding, where affected characters are replaced by a % followed by two hexadecimal digits that represent the ASCII value of the character. The %20 stands for a space, and the %27 for a single apostrophe.
The Schedule Meeting button contains the required logic to trigger the appointment creation in SAP Sales and Service Cloud Version 2. The following screen capture shows the Logic Canvas.
The process starts with two flow functions Set Data Variable that calculate the startDateTime and endDateTime fields. The formulas for these calculations are explained in the next section. After these calculations, the Create Record flow function sends the appointment record to SAP Sales and Service Cloud Version 2. Depending on the response, the user will either receive a Toast notification confirming success or an Alert message for an unsuccessful operation.
As part of the appointment creation logic, the start and end date and time of the appointment need to be calculated and assigned to the corresponding fields. The flow function Set Data Variable has previously been used to define the appointment’s field values.
In the Schedule Meeting button logic, the function is used in combination with the formula SET_KEY to only update a single property of the existing data variable rather than setting all fields again.
The formulas in SAP Build Apps work similarly to those in well-known spreadsheet software, such as Microsoft Excel or Libre Office Calc.
The SET_KEY formula function requires three parameters:
Let’s have a closer look at what the two SET_KEY formulas do in the two added flow functions. The following code snippet shows both formulas:
12345#1
SET_KEY(data.newAppointment, "startDateTime", SUBSTRING(data.newAppointment.startDateTime, 0,11)+pageVars.inputTime+":00Z")
#2
SET_KEY(data.newAppointment, "endDateTime", ADD_DURATION(data.newAppointment.startDateTime,2,"hours"))
Both formulas update the data variable newAppointment.
The first formula updates the property startDateTime and the new value must be assigned in the format YYYY-MM-DDThh:mm:ssZ. The date should be taken from the date input field, which stores its selected date in the same format. However, the time portion of this value is unfortunately the current time. The time that the user entered into the time input field is needed. For that reason, extract the date part of the date field value with the formula SUBSTRING from the beginning up to the zero-based character index 11, which returns YYY-MM-DDT. Then the time part is added with the hours and minutes entered into the time input field with + pageVars.inputTime. Finally, the seconds get added with +":00Z" to match the required format. The Z at the end is required and states that the time stamp is UTC.
The second formula sets the endDateTime property to the value of the startDateTime property with two hours added. The ADD_DURATION formula is used to read the startDateTime property of the newAppointment data variable and adds the value 2 with the unit hours.
This lesson explained how to enable the integration with SAP Sales and Service Cloud Version 2, reading account data and creating appointments via APIs. The following lesson describes how to integrate AI Core Services to enhance, generate and translate email text.
Log in to track your progress & complete quizzes