Create reusable fiori application

[RameshShrestha]

In one of my project we had requirement to  create Fiori application whose purpose was to maintain variants for account assignment in Purchase Requisition application.

Requirement:

User should be allowed to maintain the variant which can be selected later by user.

On selection of the variant, the data is pulled and stored into the current account assignment values

Account Assignment Variant is created as separate application so that it can be reused again

The variant application should open as a Dialog box without navigating away from the current application

 

Problem faced: 

Initially we tried to create separate application which was called into fragment of the dialog with Component container.

This solution loaded Not Found page in the dialog box.

We noticed that the router of the main application was impacting the router navigation of the reusable application.

Thus not able to have internal router for the reusable application

 

 

Solution:

1. Created separate application with Worklist Template


2. Removed the routing configuration from the manifest.json of reusable component


3. Pointed the root view to Worklist view


4. Called the application in component container of the dialog with Parameters in component Data

 

 

Manifest.json of Reusable component

 

 

Code to Call component

	sap.ui.getCore().createComponent({

				name: "com.test.AccountAssignments.zAccountAssignments",

				async: true,

				componentData: {

						startupParameters: {},

						companyCode: "Param1",

						controlArea: "Param2",

						commCode: "Param3",

						saa_id: "Param4"

						},

				manifest: true

		}).then(function(oComp) {

		if (!this._AccAssignVariantDialog) {

		this._AccAssignVariantDialog = sap.ui.xmlfragment("accAssignVM",

							"fragmentpath.fragment.AccAssignVariantManagement",this);

								this.getView().addDependent(this._AccAssignVariantDialog);

						}

	this._AccAssignVariantDialog.open();

	Fragment.byId("accAssignVM", "accAssignVariantCompContainer").setComponent(oComp);

						}.bind(this)).catch(function(oError) {

							jQuery.sap.log.error(oError);

						});

 

There might be other better options but this is one of the solution we found. More suggestions to improve the solution of reusable component are welcome.