Skip to Content
Jan 13, 2021 at 06:15 AM

CAP UI Annotatios - Make a custom view and navigate to it via Freestyle UI5 fragment button



I am working in a SAP CAP project and the one UI module that we have is made almost entirely with UI Annotations at the instance level. The UI is mainly a Flexible Column Layout including three separate ObjectPages for each section of the FCL. The project is made using SAP Business Application Studio.

Since the code inside the .js files for each fragment we managed to include in the ObjectPages are somewhat limited and do not behave like a regular view controller, trying to call functions from within functions in that .js file is not possible, and so on.

Therefore there is the need for a custom view and controller.

Normally we "navigate" the structure of the app via the command in BAS: Show Page Map, and it is there where we can add new fragments to the object Pages, usually like a tab/section.

In one of these sections I have a button. I've also created a new custom view via the Show Page Map command, with its own controller. Business Application Studio, when this view was created, added a route and target to it in the UI Module's manifest.json file, but I am not sure how to navigate to this view.

I tried adding another fragment and some code behind a button inside of it to navigate via "this._controller._oAppComponent.getRouter().navTo("[view name here]") but it doesn't do anything or it will just.. make the ObjectPage section where the button I clicked was.. larger. Or it navigated to the first part of the FCL, as if the Router took the default/first route somehow.

Does anyone have any idea how I could make this work?

Is it possible to navigate like this to another view, even though the whole app (with some important functionalities aside, which are being put behind these fragments) is made with UI Annotations?

If not, any input into how this could be achieved would be of great help. Thank you in advance :)