cancel
Showing results for 
Search instead for 
Did you mean: 

Reusabilty in SAPUI5

fahad_saplearning
Participant
0 Kudos

Hello Experts,

I am trying to develop a view which can be reused by other projects. For this, I have created an xml fragment and a javascript file which contains the event handlers for the UI controls in the fragment .

If I have to use this xml fragment (along with the event handlers) in other projects, what should i do? What is the best approach of reusing xml views/controllers. It is of great help if anyone can explain this in details with some code snippet

Thanks

Faddy

0 Kudos

Hi if you got the clear view about the above scenario can you help with with any demo projects of 2 application showing that one application fragment is used in another application
can you provide any git links

Accepted Solutions (1)

Accepted Solutions (1)

junwu
Active Contributor

fahad_saplearning
Participant
0 Kudos

Hi Jun,

I think that link talks more about javascript views (though the information provided there are useful). Also, I am developing something which doesnot use FLP.  So, can you please explain it from a stand alone xml fragment perspective?

Also just for clearing out my queries, I am pasting the response from reference thread here. I have mentioned my queries in bold:

at the calling side (Question:

1. Does the following code is used to add the controller of the view (which is being reused) to the caller? 2. As I use xml fragments, I have added the fragment to the view assembly using <core:Fragment fragmentName="com.test.view.MyViewFragment" type="XML" />. So where should I write the following code?)

var oComp = sap.ui.getCore().createComponent( {

  name : "com.abc.***",(Question:

1. Suppose caller component name is "com.target.Caller" and the called component name space is "com.source.Reuse". With this assumption, what value should I mention for "name" here?

2. Will it cause any issue as the name spaces are different?)

  id : "Comp3",

  url : "/appurlforthecomponent", (Question: How can I determine url to the component? Should that be the url to com.target.Caller or com.source.Reuse?)

  componentData : {

  "targetViewName" : "saywhichviewyouwant" (Question: I hope I should mention com.test.view.MyViewFragment here. How can I do that? As i refer the fragment in the view itself, is this necessary?)

  }

  });

  var oCompCont = new sap.ui.core.ComponentContainer("CompCont3", {

  component : oComp

  });

at the providing side (Question: Can you quote this with an example code?)

in createcontent function of your component, you can check componentData to see which view is requested. you will return the view requested.

Thanks,

Faddy

junwu
Active Contributor
0 Kudos

that is nothing to do with view type and flp.

1. Suppose caller component name is "com.target.Caller" and the called component name space is "com.source.Reuse". With this assumption, what value should I mention for "name" here?

com.source.Reuse

2. Will it cause any issue as the name spaces are different?)  NO ISSUE

  id : "Comp3",

  url : "/appurlforthecomponent", (Question: How can I determine url to the component? Should that be the url to com.target.Caller or com.source.Reuse?)

url of the reuse

  componentData : {

  "targetViewName" : "saywhichviewyouwant" (Question: I hope I should mention com.test.view.MyViewFragment here. How can I do that? As i refer the fragment in the view itself, is this necessary?)

  }

  });  RUN YOUR REUSED APP, YOU WILL GET THE URL

targetViewName is just an input parameter(you defined, you can name it to anything), which just tell what you want, but didn't determine it should be a  page or a view, you can return what ever you want in the reused component.

fahad_saplearning
Participant
0 Kudos

Hi Jun,

I am still not very clear on the concept of re-usability. As I am novice in UI5 domain, it gives me tough time to understand the details which you have mentioned.

Just to state my aim very clear, I am trying to develop a view and it's event handlers reusable. For example:

MyFrag.fragment.xml

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">

<Input id = "MyInput" liveChange="onInputChanged")

</core:FragmentDefinition>

To test this fragment, I have created a view (Say App.view.xml) which embeds the fragment and the controller (App.controller.js) which defines onInputChange event handler.

App.view.xml

<mvc:View controllerName="com.test.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core">

  <App>

  <pages>

  <Page title="{i18n>title}">

  <content>

     <core:Fragment fragmentName="com.test.view.MyFrag" type="XML" />

  </content>

  </Page>

  </pages>

  </App>

</mvc:View>

App.controller.js

sap.ui.define([

  "sap/ui/core/mvc/Controller",

  "sap/m/MessageToast"

], function(Controller, MessageToast) {

  "use strict";

  return Controller.extend("com.test.controller.App", {

    onInit : function(){ }

  });

  onInputChanged : function(oEvent){

     MessageToast m = new MessageToast();

     m.show("Test");

  }

});

Now, I have another project with View MyView.view.xml (full name of the view is com.real.view.MyView. My reusable fragment't event handler resource root is com.test.view.*) where I want to reuse MyFrag.fragment.xml and onInputChanged event handler (similar to App.view.xml and App.controller.js mentioned above. However, instead of copy pasting the event handler code to MyView.controller.js, I want to put it in .js file and reuse it).

So my question would be: How can I make the event handler generic and reusable? Can you show it with an end to end example (as I am not an expert, I am not understanding where to write what, so asking for the complete code)? If you can share the project source code completely, that would clear all my questions.

Also, is there any way to create a library of MyFrag.fragment.xml and it's event handlers and provide it to developer so that they can make use of it like other javascript files (instead of copying view fragment and corresponding javascript files explicitly)? If yes, how can I do that?

Thanks,

Faddy

fahad_saplearning
Participant
0 Kudos

Hi Jun,

I have revisited the explanation once again and tried to do some homework myself. At the end, I was able to load the view from one project to other as per the approach you have mentioned. However, I am still having an issue.

My Caller index.html looks as follows

<html>

...

  <script>

var oComp = sap.ui.getCore().createComponent( {

  name : "com.test",

  id : "MyComp",

  url : "/ReuseLib",

  componentData : {

  "targetViewName" : "Test"

  }

  });

  sap.ui.getCore().attachInit(function() {

  new sap.m.Shell({

  app: new sap.ui.core.ComponentContainer({

  height : "100%",

  name : "Call_Reuse2",

  component : oComp

  })

  }).placeAt("content");

  });

  </script>

...

</html>

In /ReuseLib UI5 app, I have a lading page view (named App.view.xml) and a second View (named Test.view.xml). I am trying to load Test.view.xml using

  componentData : {

  "targetViewName" : "Test"

  }

However, the default view (App.view.xml from the calling side) is the result which I am always getting. Event if I exclude the code:

  componentData : {

  "targetViewName" : "Test"

  }

it still gives App.view.xml output.

I am using web ide for these developments where default view (in calling side) is mentioned in manifest.json. Also, I did not write anything in specific within Component.json of calling side.

Can you please tell me why it always loads the default view of calling component (App.view.xml) though I tried to load another view (Test.view.xml)? Also, why

  componentData : {

  "targetViewName" : "Test"

  }

does not have any effect in my case?

Regards,

Faddy

junwu
Active Contributor
0 Kudos

it has no effect because you didn't do anything.....

in the reused component, there is a functino createContent

in the function you check what view is requested, and return it.

fahad_saplearning
Participant
0 Kudos

Hello Jun,

Should I write createContent() method in Component.js of the reusable project? I have two views in reusable project: App.view.xml and Test.view.xml. Default view is loaded from manifest.json. How can I write createContent() method here so that App.view.xml or Test.view.xml will be loaded based on componentData at caller side?

As I am novice in this area, it would be really great if you can provide the code snippet

Regards,

Faddy

Message was edited by: Faddy Learner

fahad_saplearning
Participant
0 Kudos

Hello Jun,

I have managed to write createContent() method which loads views. Still I have an open question:

With this approach, I don't see any effect for the default view mentioned in manifest.json. Is that the case always?

Regards,

Faddy

junwu
Active Contributor
0 Kudos

what effect you want?

when you implement createconent, default view setting in manifest is voided

fahad_saplearning
Participant
0 Kudos

Hello Jun,

It is clear for me now. Thanks..

Faddy

Answers (0)