Name: Customizing an Attribute Editor in SmartEdit - SAP Commerce Cloud
Uploaded: 2020-7-3
Duration: 286 s
Description: In this video you'll learn how to customize an attribute editor in SmartEdit.If you search for more information about SmartEdit, please check our SAP Help docs.

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?

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

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

<div>In this video you'll learn how to customize an attribute editor in SmartEdit.<br><br>If you search for more information about SmartEdit, please check our <a target="_blank" rel="nofollow noopener noreferrer" href="https://help.sap.com/viewer/9d346683b0084da2938be8a285c0c27a/2005/en-US/dc259a9f232a469ca8da3cf22f34839c.html">SAP Help docs</a>.</div>

Customizing an Attribute Editor in SmartEdit - SAP Commerce Cloud

Hello! In this video, I’ll talk about how to customize an attribute editor in SmartEdit. Out-of-the-box, in SmartEdit, each attribute of a CMS component is displayed with a predefined editor. As you can see, if I click-and-drag to create a new component here, the component editor is displayed, with the visible attributes of the component. If the attribute’s type is String, SmartEdit uses its text-field editor; if the String attribute is localizable, a localized text-field editor is used; and if the attribute's type is one of the numeric types, again a text editor is used, but internally, the String is converted to a number. Similarly, if the attribute's type is Date, the default Date editor is used (i.e., the default one, among several possible ones), to display and edit your Date value in a special way. The same goes for booleans. And if the attribute's type is that of a Commerce reference, (as in, the PK of another Commerce item), the default Reference editor is used, to allow you to link to existing Commerce items. These are just the most common examples. However, what if I don’t want to use the default text-editor to display this, specific number-value attribute? How can I change which attribute editor should be used, instead? In fact, a certain attribute of a CMS type is wired to a certain CMS-structure type. This CMS-structure type is nothing but a String value, which specifies a certain editor template. Then, when this attribute is displayed in SmartEdit, then, through the use of this CMS-structure type, SmartEdit will find the specified editor template, to render the desired editor for this attribute. Therefore, in order to customize a new attribute editor, you first need to define a custom CMS-structure type attribute populator, then relate that populator to the specific attribute and finally, create a custom editor template and map it to the custom CMS-structure type. Let’s take a look at this example. It’s a sub-type of "SimpleCMSComponent", with 2 additional attributes. It’s, in fact, the demo CMS component I showed you earlier. Let’s see how we can replace the text editor, which is to be used here, with a different one, so that we can display the last attribute a bit differently. First of all, I need to go to a "Spring-context file", and define a custom CMS-structure type attribute populator. I can give any value, as the ID of the CMS-structure type, here. Then, in the same file, I will relate this populator, to the specific attribute, that should use the new editor. It’s important to ensure you have the exact populator ID and attribute name here. And don't forget to save any changes. After this, I must restart my SAP Commerce server, to reload the Spring context. Now, with these changes, if the CMS-component structure is requested by SmartEdit, this specific attribute will contain the extra metadata I just added: namely, the CMS-structure type of this attribute. In order to utilize this additional metadata, we must also register the new CMS-structure type in SmartEdit. Let’s go to a SmartEdit extension. Open the "extension-named" "container module's" "dot ts file" for editing, and use the "editorFieldMappingService", to register the new CMS-structure type. I’ll also relate a new editor template to this CMS-structure type. I should then import the EditorFieldMappingService as well, and use dependency injection to wire the editorFieldMappingService. I’ll also need to define the editor template file, in a specific location where SmartEdit is able to find it, as you can see here. This is just a simple implementation of a slider-like editor. If you want, you can also implement any other GUI component. Finally, I can go to the SmartEdit extension and compile it by running, grunt dev. After the build is successful, I will open SmartEdit and log in. Then, I select the electronics site, staged version, and, in basic edit mode, I’ll drag-and-create the sample CMS component again. Now you can see, that this specific attribute’s editor is replaced by a custom one which is created using the custom editor template I defined earlier. That's it for now. Thanks for watching!