Skip to Content
Author's profile photo Lorenz Wiest
Lorenz Wiest
February 10, 2017 3 minute read

Ensure That Your Design Studio SDK Components Work with SAPUI5 M

In Design Studio 1.6, when creating a new application, you choose one of the following SAPUI5 libraries to render your application’s HTML:

  • SAPUI5 (also called SAPUI5 commons)
  • SAPUI5 m

This choice also affects the Design Studio SDK components of your application: Only those SDK components can be used in your application that match the SAPUI5 library used by the application.

By default, SDK components match the SAPUI5 commons library. Hence, they run only in applications based on SAPUI5 commons.

Info: In Lumira Designer 2.0, applications are based on SAPUI5 m only.

To make your SAPI5 commons-based SDK component run in applications based on SAPUI5 m, apply the following steps:

Adjust the <component> element’s modes attribute

In the contribution.xml of your SDK component, in the <component> element, add the attribute “modes”.

The attribute “modes” indicates which SAPUI5 library your component supports. Valid values are “commons”, “m”, or any combination separated by a space character, for example “commons m”. If the attribute is missing then the default value is “commons”.

Make sure that the value is not “commons” (the default value) as this would indicate that your SDK component supports SAPUI5 commons only.

Example:

<component
  id="MyComponent"
  ...
  modes="m">
  ...
</component>

(Optional) Adjust the <property> element’s modes attribute

In the contribution.xml of your SDK component, in each <property> element, add the attribute “modes”.

The attribute “modes” indicates which SAPUI5 library the property supports. Valid values are “commons”, “m”, or any combination separated by a space character, for example “commons m”. If the attribute is missing then the default value is “commons m”.

Make sure that the value is not “commons”, as this would indicate that your property supports SAPUI5 commons only.

Example:

<property
  id="myProperty"
  ...
  modes="m">
  ...
</property>

Advanced Tip: It is possible to create properties that are available only with applications based either on SAPUI5 commons or SAPUI5 m. The properties must not have the same id though.

Adjust the <requireJs> element’s modes attribute

In the contribution.xml of your SDK component, in the <requireJs> elements, add the attribute “modes”.

The attribute “modes” indicates which SAPUI5 library this JavaScript file supports. Valid values are “commons”, “m”, or any combination separated by a space character, for example “commons m”.

Example:

<requireJs modes="commons m">res/js/component</requireJs>

Advanced Tip: As you can have multiple <requireJs> elements in the contribution.xml, your SDK component can provide a separate JavaScript file with applications based either on SAPUI5 commons or SAPUI5 m.

Adjust the Contribution JavaScript

If your SDK component creates all HTML by itself, there is nothing more to do. Your SDK component should work with Design Studio applications based on SAPUI5 m.

Hint: Look into the contribution.xml of your SDK component. If the <component> element has an attribute “handlerType” with value “div” it creates all HTML by itself.

If your SDK component uses or is based on SAPUI5 controls, some additional work is necessary, because SAPUI5 commons and SAPUI5 m, in general, provide visually similar but technically different controls.

Hint: Look into the contribution.xml of your SDK component. If the <component> element has an attribute “handlerType” with value “html5”, it uses or is based on SAPUI5 controls.

In this case, apply the following steps:

Adjust References to SAPUI5 Controls

SAPUI5 commons controls often look similar to the corresponding SAPUI5 m controls, but they differ in their id. For example, the SAPUI5 commons Button control has the id “sap.ui.commons.Button”, the SAPUI5 m Button control has the id “sap.m.Button”.

Whenever you reference in your SDK component’s JavaScript code an SAPUI5 commons control, find the id of the corresponding SAPUI5 m component and replace the SAPUI5 commons control id with the corresponding SAPUI5 m control id.

For example, one particular spot to look for in your SDK component’s JavaScript code is any SAPUI5 commons control calling the extend() function. Modify the SAPUI5 commons control id calling the extend() function:

Example:

Before:

sap.ui.commons.ProgressIndicator.extend("com.sap.sample.ui5.ProgressIndicator", {...

After:

sap.m.ProgressIndicator.extend("com.sap.sample.ui5.ProgressIndicator", {...

See the References section below for more information on SAPUI5 commons and SAPUI5 m controls and their ids.

Adjust Uses of the SAPUI5 Controls API

SAPUI5 commons controls may also differ in their functions, events, and fields from the corresponding SAPUI5 m controls.

Whenever you find an SAPUI5 commons function call, event, or field access in your SDK component’s JavaScript code, find the corresponding SAPUI5 m function call, event, or field access. Replace any SAPUI5 commons control function call, event, or field access with the corresponding SAPUI5 m control function call, event, or field access.

Sometimes there is no corresponding SAPUI5 m function call, event, or field access. In this case you need to create your own workaround.

See the References section below for more information on SAPUI5 commons and SAPUI5 m controls and their functions, events, and fields.

References

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.