Since you are researching this topic, you might have stumbled upon an old blog series of mine about component reuse.
A lot have change since 2017 like the introduction of component usage in 1.52, which mike.doyle4 touches upon his blog. This concept is really simple and lets you use the same component in multiple areas without having to worry about the state of your reuse component.
In this blog I'd like to elaborate a bit on how we can add component reuse into a Fiori Elements application. Why you might ask, well if you have a reuse component that serves a specific need or simply don't like the "standard" valuehelps, then reuse can be very valuable. We currently have a scenario where a client of mine want to use a tree table in a valuehelp, to my knowledge we can't handle this with annotations. If you know how to, please blog about it! 😉
Alright let's get to it!
First of all, I won't get into the details about how to create a Fiori elements app, i'd assume you got that covered already. My usecase will be to add a custom filter to the list report and then open our reuse application.
So first things first, create an extension as a custom filter
Now add an additional fragment, this will serve as the popup containing our reuse component. In this fragment, you need to specify the component container.
Now i noticed what i believe is a bug here. If we use the component usage, then our component won't load. I do believe this has something to do with a Fiori Element being of a different type of component to a "standard" SAPUI5 app - "sap/suite/ui/generic/template/lib/AppComponent" vs sap/ui/core/UIComponent. But i haven't gotten this confirmed. So for now bear with me and do it the old ?way of by specifying the name and component of our reuse application. Remember to set the propogate model to true so we can interact with the models as discussed in this blog
Alright in our manifest let's add a new jsonmodel which will be our filter model and then the component dependency
Add the components under the dependencies:
Next we need to add the code to open our dialog with the component container and have the event handlers for our select and cancel buttons. A little trict to get the controller added quickly is just to add a custom action. This will add all your dependencies in the manifest.
Let's add the code we need:
Remember to delete the action again, if you cheated like me.
Now in our neo-app.json file, let's add the reference to our component, so SCP knows where to look.
That's all what we need in the Fiori Elements app. Now let's build a simple application to use.
Use the template wizard and add a sapui5 application. Name it test and elementsreuse as namespace (otherwise you need to correct the manifest in the Elements app as well as the component container.)
In the view i've simply added an Input field with a change event. Remember to remove the shell as this creates a few issues.
In the controller you simply add the change event to write the value to the filter model we created earlier.
That should be it. Now when you enter a comment and then press the select button, you should have all the code you need to attach it to the binding of your table.
A lot have change since 2017 like the introduction of component usage in 1.52, which mike.doyle4 touches upon his blog. This concept is really simple and lets you use the same component in multiple areas without having to worry about the state of your reuse component.
In this blog I'd like to elaborate a bit on how we can add component reuse into a Fiori Elements application. Why you might ask, well if you have a reuse component that serves a specific need or simply don't like the "standard" valuehelps, then reuse can be very valuable. We currently have a scenario where a client of mine want to use a tree table in a valuehelp, to my knowledge we can't handle this with annotations. If you know how to, please blog about it! 😉
Alright let's get to it!
First of all, I won't get into the details about how to create a Fiori elements app, i'd assume you got that covered already. My usecase will be to add a custom filter to the list report and then open our reuse application.
So first things first, create an extension as a custom filter
Now add an additional fragment, this will serve as the popup containing our reuse component. In this fragment, you need to specify the component container.
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<Dialog id="dialogTest" title="Reuse test" contentHeight="100%" contentWidth="100%" type="Standard">
<content>
<core:ComponentContainer width="100%" name="elementsreuse.test" component="elementsreuse.test" propagateModel="true" lifecycle="Container"></core:ComponentContainer>
<!--<core:ComponentContainer width="100%" usage="reuse" propagateModel="true" lifecycle="Container"></core:ComponentContainer>-->
</content>
<buttons>
<Button text="Select" press="onOk" type="Emphasized"/>
<Button text="Cancel" press="onCancel"/>
</buttons>
</Dialog>
</core:FragmentDefinition>Now i noticed what i believe is a bug here. If we use the component usage, then our component won't load. I do believe this has something to do with a Fiori Element being of a different type of component to a "standard" SAPUI5 app - "sap/suite/ui/generic/template/lib/AppComponent" vs sap/ui/core/UIComponent. But i haven't gotten this confirmed. So for now bear with me and do it the old ?way of by specifying the name and component of our reuse application. Remember to set the propogate model to true so we can interact with the models as discussed in this blog
Alright in our manifest let's add a new jsonmodel which will be our filter model and then the component dependency
Add the components under the dependencies:
"components": {
"elementsreuse.test": {
"lazy": true
}
}Next we need to add the code to open our dialog with the component container and have the event handlers for our select and cancel buttons. A little trict to get the controller added quickly is just to add a custom action. This will add all your dependencies in the manifest.
Let's add the code we need:
onValuehelp: function () {
var oView = this.getView();
this.oDialog = oView.byId("dialogTest");
if (!this.oDialog) {
// create dialog via fragment factory
this.oDialog = sap.ui.xmlfragment(oView.getId(),
"agilux.salesorderdemo.ext.fragment.reuseTest", this);
oView.addDependent(this.oDialog);
}
this.oDialog.open();
},
onOk: function () {
console.log(this.getView().getModel("filterModel").getData())
this.oDialog.destroy();
},
onCancel: function () {
this.oDialog.destroy();
}
Remember to delete the action again, if you cheated like me.
Now in our neo-app.json file, let's add the reference to our component, so SCP knows where to look.
{
"path": "/webapp/resources/elementsreuse/test/",
"target": {
"type": "application",
"name": "fiorielementsreuse",
"entryPath": "/"
},
"description": "Reuse lookup"
}, {
"path": "/resources/elementsreuse/test/",
"target": {
"type": "application",
"name": "fiorielementsreuse",
"entryPath": "/"
},
"description": "Reuse lookup"
}, That's all what we need in the Fiori Elements app. Now let's build a simple application to use.
Use the template wizard and add a sapui5 application. Name it test and elementsreuse as namespace (otherwise you need to correct the manifest in the Elements app as well as the component container.)
In the view i've simply added an Input field with a change event. Remember to remove the shell as this creates a few issues.
<mvc:View controllerName="elementsreuse.test.controller.View1" xmlns:mvc="sap.ui.core.mvc" xmlns:semantic="sap.m.semantic" xmlns="sap.m">
<App id="app">
<Page id="page" title="{i18n>title}" showHeader="false">
<content>
<Input change="onChange" placeholder="Search here"/>
</content>
</Page>
</App>
</mvc:View>In the controller you simply add the change event to write the value to the filter model we created earlier.
onChange: function (oEvent) {
var oComp = this.getOwnerComponent(),
/*eslint-disable*/
oFilterModel = oComp.oPropagatedProperties.oModels.filterModel,
/*eslint-enable*/
oFilters = {
customValue: oEvent.getParameter("value")
};
oFilterModel.setData(oFilters);
}That should be it. Now when you enter a comment and then press the select button, you should have all the code you need to attach it to the binding of your table.
- SAP Managed Tags:
