Name: Designing the Extension Apps' User Interface in SAP Build Apps to Extend SAP Sales/Service Cloud Version 2
Uploaded: 2026-2-23
Duration: 321 s
Description: Get to know the User Interface designer of SAP Build Apps: Learn how easy it is to drag-and-drop visual components from the library or marketplace to the UI canvas, and how to adapt their style, layout, and other properties.

Share feedback

<p>We are aware of intermittent issues in accessing the learning content</p>

We are aware of intermittent issues in accessing the learning content

Personalize your learning.

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

This browser is not supported

Please try again later

Sorry, we encountered an error

Try again or reset results to continue browsing

We didn’t find what you’re looking for

To continue, please log in

Your session has timed out

Validate your skills and learning by completing the certification exam and gain a highly recognised accreditation.

Book your certification exam

Complete the assessment to validate your SAP PartnerEdge competency qualifications.

Ready to take your assessment?

Learn about the key features and essentials in the latest release to help you prepare for the Stay Certified assessment.

Prepare for assessment

Learn new skills you need at your own pace with our bite-sized lessons.

Prepare for certification

In your My Learning account you can view your certification and learn how to take your Stay Certified assessment.

Ready to take your Stay Certified assessment?

Explore {title} at SAP Learning. Find out more!

Assessment

Course Completion

Knowledge Badge

Overview

Support Resource

Certification Exam

Theoretical Exam

Schedule

External Course

Practical Exercise

Practical Test

External Hands-On

External Resource

Learning Journey

Learning Journey Assessment

Lesson

Live Session

Practice System

Quiz

Scenario Based Assessment

Course Assessment

Course

Stay Certified

Subscription

System Based Assessment

Test Out

Unit

Video

Video Playlist

Week

Want to remove this from your Learning List?

Your exclusive access to the SAP Learning Hub, event edition is ready. <link>Start learning now.</link>

Access activated

You can now register for free Live Sessions.

<div><div><div><div>Get to know the User Interface designer of SAP Build Apps: Learn how easy it is to drag-and-drop visual components from the library or marketplace to the UI canvas, and how to adapt their style, layout, and other properties.</div></div></div></div>

Designing the Extension Apps' User Interface in SAP Build Apps to Extend SAP Sales/Service Cloud Version 2

This video demonstrates how to design the main part of the app's user interface in SAP Build Apps. The final user interface will appear as shown here once you have completed the following steps. First, give the page a meaningful headline. The other text component can be removed. Next, drag and drop the first container component onto the page. Change its appearance by activating the style tab and selecting primary card. This enables the container to visually group elements. Drag and drop the components to the container that will display the account details. Begin with the title component and change its content to account. Insert two text components underneath the title. These fields will display the account ID and account name. Naming them accordingly will help locate the components later within the component tree. Add another title component and label it, select Contact Person. Insert a drop-down field for the account's contact persons under the title and remove its label text. Assign a meaningful name. Finally, add one more text component and remove its content. This adds space between the sections. Next, drag and drop another container for the meeting details and again change the style to primary card. Insert a title component and label it First Meeting Company Introduction. Then add another container. This time leave the style unchanged since it's only needed for layout purposes. The next component is the Date field. This can be found in the Marketplace. Search for Date. Select the Date field and choose Install. Drag and drop the Install Date Field component from the Install tab of the Component Palette to the Layout container. Return to the Core Components tab and label the field Date. From the Core Components tab, insert an input field under the Date field and label it Time. You can also enter a placeholder text, for instance, the expected time format. In a real project, you should use a date-time picker field from the marketplace instead. For technical reasons, this demo uses a normal input field. Next, the layout of the container should be changed to horizontal. If the container is difficult to select in the design canvas, you can select it in the components tree. Here it is. Container 4. Rename the container on this occasion as well as the parent container. Then, select the inner container and change its layout to horizontal. Drag and drop another input field underneath the Date and Time container and label it Location. Finally, insert a button and label it Schedule Meeting. Save the changes and start the preview. Choose Open Web Preview. From the preview, you can see that the app has a navigation bar, which is not required for the embedding use case and should be disabled. Test the date field and try to choose a date. A calendar should be displayed underneath, but only a shadow appears. The calendar is displayed behind other components and cut off by the edge of the containers. This behavior can be changed. Exit the preview and disable the navigation menu. Open the App Settings menu and choose Navigation. Select Navigation menu and choose No from the Enable dropdown under Properties. Save the changes. Go back to the user interface and select the date and time container. Navigate to Layout and choose No for Clip Overflowing Content. Apply the same properties to the parent container. Choose Save and Return to the Preview. You can leave the preview open. It will be updated automatically. As you can see, the navigation bar has disappeared. Tap on the Date field. The calendar is no longer cut off, but other components are still displayed on top of it. Return to the UI editor and select the Date Input field. Activate the Layout tab. Under Position, set the Z -index to Number and enter 10. Select the Date and Time container and set its Z-index to 9. Repeat this process with the surrounding container. Save the app and return to the preview to view the changes. You have now successfully designed the initial user interface of the extension app.