Skip to content

Registering Extension Control in SAP Business Application Studio

The extension controls that you have created to extend the functionality of your app can be used as base controls by registering them using the Mobile Development Kit editor.

Procedure

  1. Right-click on the Extensions folder, and select MDK: Register Extension Control.

  2. Choose a template in the Template Selection tab:

    Template Name Description
    New Metadata Extension Control Generate extension metadata and .extension file
    Register a Native Extension Control Generate .extension file which is used for Control's implementation on Mobile Development Kit Client side.
    Register Existing Metadata Extension Controls Generate .extension file based on existing extension metadata folder

    Choose Next.

  3. In the Base Information tab, provide the Control Name, Module, Control, Class and Display information.

    A file named Control_Name.extension is generated based on the control name you provided.

    The Module, Control and Class properties are used to identify the extension control.

    The Display property is used for the image to be displayed on the page editor to represent the extension control. Use the binding button to select an image from the Workspace\MDKExtensionControls\Images folder.

    Choose Next.

  4. Define the properties of the extension control in the Extension Properties Schema window. You can also add a sample under Sample Extension Properties column and click Generate Schema to generate the schema info. For example:

    {
        "MaxValue" : 200,
        "MinValue" : 10,
        "Title" : "Counter"
    }
    

    The generated schema will be:

    {
        "type": "object",
        "BindType": "",
        "properties": {
            "MaxValue": {
                "type": "number",
                "BindType": ""
            },
            "MinValue": {
                "type": "number",
                "BindType": ""
            },
            "Title": {
                "type": "string",
                "BindType": ""
            }
        }
    }
    

    Note

    To invoke related object browser selection, BindType can be defined as follows:

    BindType Description
    ODataCollection Display all the OData collections
    OData Display all the Odata objects
    Rule Display all the Rule files
    Global Display all the Global files
    Image Display all the Image files
    SDKStyle Display all the SDK style classes in Style files
    CallFunction Display all the Odata functions
    ActionResults Display all the Action results
  5. Click Finish to complete the registration of extension control.

Alternative ways to register the extension control:

  • Another way is to open the page directly (double click on the page or right click on the page and choose "open page layout editor") or create one new page, then, the extension controls are automatically registered.

Extension files are named in this format: <Module>_<Control>_<Class>.extension

Results

After you register an extension control, a file named <Control Name>.extension is created under the folder Extensions in your project.

All the registered extension controls present in the Extensions folder are displayed in the Registered Extension Control section of the control panel in the page editor.

Folder structure:

metadatamaster (ProjectName)

  • Extensions (folder)

    • DevAppExtension (folder) (ModuleName)

      • controls (folder)

        • MyControlExtension.ts (file) (ClassName)

          export class MyControlExtension extends IControl {} (file content) (ControlName)

      • I18n (folder) - This folder is not affected

    • DevAppExtensionJS (folder) (ModuleName)

      • controls (folder)

        • MyControlExtension.js (file) (ClassName)

          exports.MyControlExtension = MyControlExtension (file content) (ControlName)

      • I18n (folder) - This folder is not effected

A developer can set the properties of a registered extension control using the editor. For details, see Registered Extension Control.

Note

Whenever an extension is used, and the required class, control, or module is unavailable, the Mobile Development Kit client app fails and an error message is displayed.


Last update: October 19, 2023