SAPUI5: Reuse fragments and JS files in multiple apps

[antonette_oberholster]

Hello experts

I have a few fragments with JS files as their controllers that I would like to reuse in all my apps.

An example of one of these would be our custom "upload attachment" fragment along with it's JS file as controller for the events. I would then like to include this fragment and JS in all my apps that requires documents to be uploaded.

What would be the best way to make these files global and how would I reference/include them in my projects/apps?

Thanks 🙂

Antonette

[Ryan-Crosby · Accepted solution]

Hi Antonette,

I have done something like this using the component container concept. You could refer to this also and see if this works for you: Component Container Help

Regards,

Ryan Crosby

[antonette_oberholster · Accepted solution]

Hello Ryan

Could you please elaborate? I'm not sure how this would work.

Thanks
Antonette

[Ryan-Crosby · Accepted solution]

Hi Antonette,

What I did in my case was a I deployed the reusable fragment as a component - basically a page. Then, in any other application I was able to refer to that component and instantiate an instance of that component within the component container. In any application where I have done this I can then run that component like it exists within the application.

Regards,

Ryan Crosby

[antonette_oberholster · Accepted solution]

Hi Ryan

That is really cool. I've done a bit more reading and I think this might work.

Is it possible to pass data to and from the app in the component container?

Regards

Antonette

[Ryan-Crosby · Accepted solution]

Hi Antonette,

I didn't have a requirement for what I was doing but I don't see why it would not be possible. Have some method in the controller to pass the model from the application and then bind some event to pass it back to application when the component onExit is triggered. Not 100% certain since I have not tried but you could look into it.

Regards,

Ryan Crosby

[antonette_oberholster · Accepted solution]

Thanks Ryan

I can see the component of my 1st app is initializing inside my 2nd app, but the view of app 1 is not displaying in the view of app 2 (xml, using component container). Am I doing something wrong?

Thanks

Antonette

[antonette_oberholster · Accepted solution]

Never mind, got it working, thanks so much Ryan! 🙂

[Noufal]

As I did, I created my own library which includes the shared fragment and then declare it in all my apps.

[former_member232384]

In my case, I created a reusable package as 'ZCOMMON'.

In every package that wants to access a fragments in ZCOMMON, I registered common package.

Check below code

jQuery.sap.registerModulePath("common", "../zcommon");
var oDialogController = sap.ui.controller("common.controller.Approve");
this._approveDialog = sap.ui.xmlfragment("common.frag.Approve", oDialogController);

[antonette_oberholster]

Hello Seungchul

Is ZCOMMON your BSP name? example http://<gateway>:<port>/sap/bc/ui5_ui5/sap/zcommon/index.html

How did you make it reusable? Or can you just call it?

Where do you register it? In index or component?

Thanks

Antonette

[former_member232384]

ZCOMMON is BSP(SAPUI5) application name.

If your application APP1 wants to access a ZCOMMON, just register a path like below code.

Check this link

 jQuery.sap.registerModulePath("common", "../zcommon");

Then call a fragments

this._approveDialog =sap.ui.xmlfragment("common.frag.Approve", oDialogController)

[former_member365727]

Its like you are building a library to place commonly used customUI controls/fragments so that it can be accessed from any application where it is referenced.

I think this should be possible.

Refer to this blog by Philip, where custom controls are placed in a separate project lib 'dalrae/ui/controls'. This should provide some pointers on the approach to be used.

[antonette_oberholster]

Thanks Srikanth

I'll try this and get back to you.

Regards

Antonette