Standard Upgrade Steps

These upgrade steps are more or less the same between all releases.

Context

There are no standard steps for upgrading SmartEdit from 6.7 to 1808.

Release-Specific Upgrade Steps

These upgrade steps are specific to the upgrade to this release and need to be performed for out-of-the-box SAP Commerce functionality to work.

Context

There are no release-specific upgrade steps for upgrading SmartEdit 6.7 to 1808.

Additional Information

These upgrade steps are intended to assist in the upgrade of custom-developed extensions and do not need to be performed for out-of-the-box SAP Commerce functionality.

The initial content of template extensions is guaranteed to stay compatible, but you need to make sure that the added or changed custom code is analyzed and tested for the upgrade from 6.7 to 1808.

This section describes some of the factors that you should take into account when upgrading from 6.7 to 1808.

Breaking Changes

Remove the ngAnnotate Grunt Task from Your Customized smartedit Extension

If you created a customized smartedit extension in SmartEdit 6.7 using the ysmarteditmodule template, you must remove the ngAnnotate Grunt task from your Gruntfile.js to ensure that your build does not break. For example, if you see “ngAnnotate:run” in your Gruntfile.js, you must remove it.

Modification to .jshintrc File Required to be Compliant with SonarQube Configuration

If you run the grunt jshint command in your extension, you may have new errors due to this JSHint rules update. The .jshintrc file in the SmartEdit Build has been modified to be compliant with the SonarQube configuration. The following two rules are now enabled:

• “forin” : true // true: Require filtering for..in loops with obj.hasOwnProperty()
• “nonew” : true // true: Prohibit use of constructors for side-effects (without assignment)

For more information about JSHint rules, see the third-party documentation at http://jshint.com/docs/options/.

Replace the Deprecated iFrameManager.initializeCatalogPreview with the initializeExperience Function

SmartEdit has deprecated the initializeCatalogPreview function of the iFrameManager. Using the initializeCatalogPreview function will result in errors. You must now use the initializeExperience function provided by the Experience Service.

The initializeExperience function loads the preview for the active experience, such as the catalog, language, date and time, etc. If no active experience is set, the user will be redirected to the landing page to select an experience.

The following code example shows the initializeExperience function:

/**
 * @ngdoc method
 * @name experienceServiceModule.service:experienceService#initializeExperience
 * @methodOf experienceServiceModule.service:experienceService
 *
 * @description
 * If an experience is set in the shared data service, this method will load the preview for this experience (such as Catalog, language, date and time).
 * Otherwise, the user will be redirected to the landing page to select an experience.
 * To load a preview, we need to get a preview ticket from an API
 */

ExperienceService.prototype.initializeExperience = function() { … }

catalogID and CatalogVersion Fields of IPreviewData DTO Replaced with ICatalogVersionData Array in previewwebservices Extension

Due to changes to the previewwebservices extension, the catalogId and catalogVersion fields of IPreviewData DTO have been replaced with the ICatalogVersionData array, which contains catalog and catalog version data.

Modification to the SmartEdit Build

The SmartEdit Build includes a new dependency injection framework. You must add the instrumentSeInjectable Grunt task at the beginning of your concatAndPushDev and concatAndPushProd tasks in the Grunt.js file in your ysmarteditmodule-generated extension, so that your extension can register your services and components with this new DI.

Refactoring of the smartEditBootstrapGateway Angular Service

The Angular service smartEditBootstrapGateway was renamed to smarteditBootstrapGateway. This is a casing change. The refactoring of the Angular service can result in breaking changes, therefore you must change the name of the service in your existing code to avoid errors.

PhantomJS Browser Removed and Replaced by using Chrome Headless

The karma-phantomjs-launcher module (PhantomJS for unit testing) was removed from the npmancillary and replaced by the karma-chrome-launcher to use the browser Chrome Headless (puppeteer). This can result in your unit tests failing. For example, the PhantomJS Engine has a different behaviour to the V8 engine; for example, the bind() function affects the function name by prefixing a “bound” to it. You must modify your tests to use the browser Chrome Headless (puppeteer). SmartEdit now runs frontend unit tests using Chrome Headless.

Related links:

• karma-chrome-launcher: https://github.com/karma-runner/karma-chrome-launcher
• puppeteer (Chrome Headless): https://github.com/GoogleChrome/puppeteer
• V8 engine: https://developers.google.com/v8/

Library Upgrade

In SmartEdit 1808, several libraries in npmancillary were upgraded. Once you have fetched the latest milestone (18.08.0-M 7), you may experience some of the issues described in this section when building or running SmartEdit.

Grunt not Detected after Library Upgrade

As part of the library update, node was updated from version 6.9.4 to version 8.11.0. You must update your NODE_HOME in your .bash_profile as shown in the following code example:

export NODE_HOME=$NPM_ANCILLARY/resources/npm/node/node-v8.11.0-darwin-x64

Problem Building SmartEdit

The SmartEdit build system now relies on Webpack 4 and other libraries. To be able to use them, you need the latest node modules. Download the last version of npmancillary and then run the command ant npminstall in the npmancillary.

Styling Broken for Dropdowns Derived from ui-select

Several CSS classes have been removed from the latest version of ui-select version. Do to these changes, you may need to tweak your styling and add the removed CSS classes.

Webpack require.context

The Webpack update has an impact on the usage of the require.context. If you previously used the require.context with a code similar to the code shown in the following example, you must update it. The following code example shows how SmartEdit performed the import of JavaScript files with Webpack 3:

--- anyExtensionsmarteditContainerApp.ts ---
import './requireLegacyJsFiles';

--- requireLegacyJsFiles.js ---
function importAll(requireContext) {
    requireContext
        .keys()
        .forEach(function(key) {
            requireContext(key);
        });
}

importAll(require.context('./', true, /\.js$/));
importAll(require.context('../anyExtensioncommons', true, /\.js$/));

With Webpack 4, SmartEdit will ignore (tree shake) all files loaded with require.context.

The following code excerpt shows the suggested approach to import legacy JavaScript files with Webpack 4. Note that the requireLegacyJsFiles.js file extension is now .ts, requireLegacyJsFiles.ts, and that it exports the doImport function that will be called. In this way, Webpack does not perform a tree shake of the files loaded with the require.context.

--- anyExtensionsmarteditContainerApp.ts ---
import {doImport as doImport} from './requireLegacyJsFiles';
doImport(); //calling doImport function to import all the js files.

--- requireLegacyJsFiles.ts ---
function importAll(requireContext: any) {
    requireContext
        .keys()
        .forEach((key: string) => {
            requireContext(key);
        });
}
export function doImport() {
    importAll((require as any).context('./', true, /\.js$/));
    importAll((require as any).context('../anyExtensioncommons', true, /\.js$/));
}

Changes to the SmartEdit Frontend

Updates have been made to the SmartEdit frontend. If you use these features in your extension, you must make the required changes to your implementation. The following tables summarizes the differences in the frontend between SmartEdit 6.7 and 1808. For more information on the new functionality, see the API documentation for the smartedit and cmssmartedit extensions.