SAP Knowledge Base Article - Preview

3381549 - Not able to utilise TypeScript in Fiori Elements App development

Symptom

Error when using TypeScript with Fiori Elements:

  • When using AppComponent from sap/suite/ui/generic/template/lib/AppComponent.d.ts and running the application, transpiler complains about missing setting argument for a class eventually extending ManagedObject.  This doesn’t occur for standard UI5 app as UIComponent.d.ts (sap.ui.core lib) has settings parameter in constructor.
  • When trying to convert Fiori Elements app to use TypeScript, it is not possible to use controller extensions due to different controller extension syntax. 
    Standard, js controller extension definition for List Report, that uses sap.ui.controller syntax.  Type script controller in comparison uses classes and extend syntax.  Which after compiling and running the project uses Controller.extend (method coming from sap/ui/base/Metadata class).  

    -    When using sap.ui.controller, effectively you are getting js object with methods from js implementation on first object level (not nested): 
    -    When using Controller.extend, all methods from js/ts implementation are provided as prototype methods, so are not directly on first object level (nested) 

    It makes second case not working for Fiori Elements controller extensions (version 1.117). Error occurs when mixinControllerDefinition of sap/ui/core/mvc/Controller is being called. 

    In this case onInit method is on ‘first’ level of controller, resulting in matching one of mLifeCycle config methods and going into first branch of if statement from line 255. As a result, inside of this method, execution type ‘After’ is being passed and controller method is registered correctly.

    Because of using this way as an equivalent for class … extends … syntax by default by typescript transpiler, onInit method is not accessed during iteration (only extend and getMetadata are). It uses then default ‘Instead’ type of overwriting in ControllerExtension.overrideMethod call (for extend and getMetadata functions only). Additionally it never looks to onInit (as it is part of prototype and iteration happens only on ‘first’ object level), so it never applies extension mechanism against it. 
    This causes controller method (ListReportExtension / ObjectPageExtension) never being actually called. 


Read more...

Environment

  • TypeScript
  • Fiori Elements

Product

SAP Business Application Studio all versions

Keywords

typescript Elements Element Fiori , KBA , CA-UI5-ST , Fiori elements v2 , Problem

About this page

This is a preview of a SAP Knowledge Base Article. Click more to access the full version on SAP for Me (Login required).

Search for additional results

Visit SAP Support Portal's SAP Notes and KBA Search.