Introduction

SmartEdit is a pluggable JavaScript framework based on AngularJS which help CMS Managers to manage their websites.

Whenever we create any custom component, generally we don’t need to do anything to get it work in SmartEdit. SmartEdit automatically shows all custom fields in popup whenever we create or edit it.

Generally 3 tabs would be visible –

1. 1. Content Tab : Where all component fields would be visible.

1. 1. Basic Info Tab : Where component id, time created and time modified field is visible.

1. 1. Visibility Tab : Where visible and restriction related field is visible.

Problem

What happened when we create lot of fields (e.g. 10) in Custom Component. All the fields would by default be visible in a single Tab that is Content Tab which makes the whole component weird.

Wouldn’t it be better to logically separate fields into different tabs to make this beautiful ? Today in this blog, we will learn the same. We will create one custom component with 10 fields and break fields to two different tabs.

But before starting, Let’s first understand how Field Tab Mapping working currently. This blog will be based on SAP Commerce 1811 version.

Current Logic

Generic Editor allows us to edit components in the SmartEdit interface and this component is written in cmssmartedit extension. SmartEdit supports tabs and each generic editor has a tabset within itself.

cmssmartedit/web/features/cmssmarteditContainer/components/genericEditor/config/cmsGenericEditorMappingService.js

This file is responsible for registering field level mapping. Field Tab mapping also defined in this file only.

        this.setDefaultTabFieldMappings = function() {
            // Set default tab. 
            genericEditorTabService.addComponentTypeDefaultTabPredicate(this._defaultTabPredicate);

            // Set tabs
            editorFieldMappingService.addFieldTabMapping(
                null, this._isComponentPredicate, "visible", "visibility");
            editorFieldMappingService.addFieldTabMapping(
                null, this._isComponentPredicate, "restrictions", "visibility");
            editorFieldMappingService.addFieldTabMapping(
                null, this._isComponentPredicate, "onlyOneRestrictionMustApply", "visibility");
            editorFieldMappingService.addFieldTabMapping(
                null, this._isComponentPredicate, "uid", "basicinfo");
            editorFieldMappingService.addFieldTabMapping(
                null, this._isComponentPredicate, "id", "basicinfo");
            editorFieldMappingService.addFieldTabMapping(
                null, this._isComponentPredicate, "modifiedtime", "basicinfo");
            editorFieldMappingService.addFieldTabMapping(
                "DateTime", this._isComponentPredicate, "creationtime", "basicinfo");

            // Page Tabs
            editorFieldMappingService.addFieldTabMapping(
                "DisplayConditionEditor", this._isPagePredicate, "displayCondition", "displaycondition");
            editorFieldMappingService.addFieldTabMapping(
                null, this._isPagePredicate, "restrictions", "restrictions");
        };

Look this editorFieldMappingService, this service creates and displays a tab if there is at least one field mapped to it. By default, all fields are mapped in the content tab (default tab) and some of the common fields mapped to visibility & basicinfo tab. These are tab ids and their localization is defined in cmssmartedit extension

se.genericeditor.tab.basicinfo.title=BASIC INFO
se.genericeditor.tab.visibility.title=VISIBILITY

On the same line, We can also create and map fields to other tabs using this service.

Customization

Assuming we have created one custom CMS Component e.g. TrainingComponent with 10 custom fields and wants to map few fields in new tab.

• • Lets first create one custom SmartEdit extension. Please follow these links to setup & create one custom extension e.g. trainingsmartedit.

https://help.sap.com/viewer/9d346683b0084da2938be8a285c0c27a/1811/en-US/0955af7dd5154a8db28dfce327d8…

https://help.sap.com/viewer/9d346683b0084da2938be8a285c0c27a/1811/en-US/6d55d5fba206425b9acecda9f231…

https://help.sap.com/viewer/9d346683b0084da2938be8a285c0c27a/1905/en-US/5fd2da27ae50410592b4a8d04af1…

• • Once new extension is created, Go to trainingsmartedit/web/features/trainingsmarteditContainer folder and create a new package structure /components/genericEditor/config (Here we will define our new field tab mapping).

• • Go Inside trainingsmartedit/web/features/trainingsmarteditContainer/components/genericEditor/config folder and create one new file : cmsTrainingGenericEditorMappingService.js

• • Create new field tab mapping like this ..

angular.module('cmsTrainingGenericEditorConfigurationServiceModule', ['cmsGenericEditorConfigurationServiceModule', 'editorFieldMappingServiceModule'])
    .run(function(editorFieldMappingService) {

        // Set tabs
        editorFieldMappingService.addFieldTabMapping(
            null, "TrainingComponent", "field1", "additionalproperties");

        editorFieldMappingService.addFieldTabMapping(
            null, "TrainingComponent", "field2", "additionalproperties");

        editorFieldMappingService.addFieldTabMapping(
            null, "TrainingComponent", "field3", "additionalproperties");

        editorFieldMappingService.addFieldTabMapping(
            null, "TrainingComponent", "field4", "additionalproperties");
    });

• • Here we are trying to create one new tab “Additional Properties” and assigning 4 fields out of 10 into this new Tab. “additionalproperties” is the tab id that we have introduced.

• • Finally, Inject this service into trainingsmarteditcontainerModule.ts file.

...........
@SeModule({
	imports: [
		'smarteditServicesModule',
		'abAnalyticsToolbarItemModule',
		'cmsTrainingGenericEditorConfigurationServiceModule'
	],
...........

• • Add the below property as well in resources/localization/trainingsmartedit-locales_en.properties for Tab Localization.

se.genericeditor.tab.additionalproperties.title=Additional Properties

Build Step –

Make sure at the time of SmartEdit setup, assuming you already done ant npminstall.

• • Now run ant clean all and this will compile our newly added service and generate new trainingsmarteditContainer.js file.

• • Once build is successful, start the Hybris Server and open SmartEdit.

• • Make sure that the following impex run at the time of setup.

INSERT_UPDATE SmartEditConfiguration;key[unique=true];value
;applications.trainingsmartedit;{"smartEditLocation":"/trainingsmartedit/trainingsmartedit/js/trainingsmartedit.js","extends": "cmssmartedit"}
;applications.trainingsmarteditContainer;{"smartEditContainerLocation":"/trainingsmartedit/trainingsmartedit/js/trainingsmarteditContainer.js","extends": "cmssmarteditContainer"}

• • Finally test the changes, Create new TrainingComponent instance. It would show our newly created tab as well with 4 fields.

Conclusion

This way we can create any number of Tabs and logically divide fields to different tabs (when component has large number of fields). Hope this will help.