Name: Creating and Wiring a Custom SmartEdit Extension in SAP Commerce Cloud
Uploaded: 2024-6-3
Duration: 189 s
Description: This video will show you how to create a new SmartEdit Extension and how to connect it to SmartEdit.

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

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><div>This video will show you how to create a new SmartEdit Extension and how to connect it to SmartEdit.</div></div></div></div></div>

Creating and Wiring a Custom SmartEdit Extension in SAP Commerce Cloud

Hello! In this video, I will show you how to create a "SmartEdit extension", and wire it to SmartEdit.  First, I'll open a "command-line window",  then I'll go to this directory,  and run this command in Mac/Linux, or this command in Windows.  To create a new SmartEdit extension, I'll run 'ant extgen', then, for template, I'll specify 'ysmarteditmodule',  for extension name, I'll specify, 'smartedittest',  and for package name, I'll specify, 'com.sap.smartedittest'.  Now, I'll open this xml file in any pure text editor, add: ,  and finally, I make sure to save my changes.  Then, I'll run 'ant npminstall' in a command-line window.  Next I run 'ant updatesystem',  and finally, I'll clean and build my Commerce platform by running 'ant clean build'.  This will build my Commerce platform, with my new SmartEdit extension as part of it.  Now, I start the server by runnning './hybrisserver.sh' in Mac/Linux, or 'hybrisserver.bat' in Windows.  Now, I'll open SmartEdit, by entering the following URL in my browser, and log in to SmartEdit as the admin user.  In order to wire the newly-created extension to SmartEdit, we need to add two configuration items. First, I open the Configuration Editor, by clicking Settings in the header toolbar, the third icon from the right, then I click the Create Configuration button.  In the first key field, I input, "applications.smartedittest", then, in the corresponding value field, I input the following.  then I click the "Save button" to save my changes.  Next, I once again click the "Settings button" Now, I click the Create Configuration button. In the first key field, I input, "applications.smartedittestContainer".  In the corresponding value field, I input the following,  and I click Save button to save my changes. Now, I access the URLs for smartedittest.js, and smartedittestContainer.js in my browser.  The contents of smartedittest.js and smartedittestContainer.js, under this directory, will be displayed in the browser.  Now, I open the localhost URL in a browser, I choose, "Electronics Site", and click, Homepage for the staged version.  A new perspective, named Ab.Analytics.Perspective.Name will be shown. I click this perspective. And a new toolbar item, named, "Ab.Analytics.Toolbar.Item.Name", will be visible in the toolbar.  That's it for now. Thanks for watching!