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>Planned maintenance of Practice Systems</p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Subscribe now

Learn more

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<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 href="https://help.sap.com/viewer/9d346683b0084da2938be8a285c0c27a/2005/en-US/dc259a9f232a469ca8da3cf22f34839c.html" rel="nofollow noopener noreferrer" target="_blank">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!