Name: Using Decorators in SmartEdit in SAP Commerce Cloud
Uploaded: 2024-6-3
Duration: 291 s
Description: In this video, you will learn about decorators and how to use them in 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

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>In this video, you will learn about decorators and how to use them in SmartEdit.</div></div></div></div>

Using Decorators in SmartEdit in SAP Commerce Cloud

Hello!  In this video, I’ll talk about decorators in SmartEdit.  What is a decorator?  It is a feature that adds further rendering around a CMS item, such as a "CMS component", or a "content slot" of a page.  It could be in the form of this button, used for editing a CMS component,  or this button, used for dragging this CMS component to another location.  Once a decorator is implemented, it can be wired to multiple CMS items.  And if a decorator is clicked, it can be used to call a backend API, to perform specific tasks, such as deleting the CMS item wrapped by the decorator.  Therefore, decorators are, in fact, very important elements that are required by all CMS items in SmartEdit.  So how does one create a new decorator?  You can create a "contextual menu button" using out-of-the-box support.  Let’s take a look at this example, in a custom SmartEdit extension, here.  Please note that this SmartEdit extension is generated via the "ysmarteditmodule template", thus already wired to SmartEdit.  I’ll open the extension-named module.ts file, which was automatically created when generating our custom SmartEdit extension, via the "extgen" process.  I’ll use "featureService" to add a new contextual-Menu button, here.  The "contextual-Menu button" has: a unique id,  a name to be displayed,  a list of "regular expressions", to specify, via a set of filters, which cms items should use this button. In this case, all non-slot CMS items will get this decorator.  An action with a callback function, to perform specific backend logic, here, I will merely pop-up an alert message, for simplicity.  After the declaration of the "contextual menu button", I’ll relate it to a "custom mode" here, by inserting its unique key into the list of features.  Then, I’ll need to compile the custom "SmartEdit extension".  To do this, I’ll navigate to the SmartEdit extension's base folder, and run grunt dev.  If the build is successful, I can open SmartEdit and select the electronics site,  staged version,  then switch to the custom mode, to which I registered the contextual-menu button.  You can see here, as I hover my cursor over each CMS item, that this button now appears on every CMS component that is not a content slot.  And if I click on the contextual menu button, the logic implemented in the decorator is executed, as evidenced by the simple alert message, here.  Furthermore, you can also create your own decorator.  Let’s take a look at another example, here.  I have prepared a simple "type-script file", which implements a new component, with: a unique id, to be used for referencing this component,  a "template URL", for rendering this component,  bindings, to pass all the attributes of the wrapped CMS item to the decorator,  a controller, to relate to an appropriate controller definition, which in my case is only an empty skeleton.  You can also see, in the same folder as the renderer file for the decorator, that I only render one of the component attributes in a simple span element.  Finally, I’ll open the extension-named module.ts file,  and import the decorator module.  I’ll need to declare it in SeModule as well.  I also need to perform a simple mapping, to tell SmartEdit, which CMS item should use this new decorator.  In this case, I will append this custom decorator to the end of the mappings list of "SimpleResponsiveBannerComponent".  Now, I can register the decorator via the featureService.  The last step, is to group the decorator into a mode. Here, I am going to add the decorator into my custom mode.  Finally, I re-compile my custom SmartEdit extension via grunt dev,  after which, I’ll refresh Smartedit,  and go back to my custom mode.  Now, I can see that the custom decorator appears,  but only on "simpleResponsiveBannerComponents", as per the mapping I defined earlier.  That's it for this video.