How to Open Fiori App Directly with Pre-Filled Data from Backend in Advance SAPUI5 - 17?

We frequently state that while requirements are endless, thought is crucial. The essentials must be clarified so that the challenging real-time requirements can be easily met. An example of an idea that satisfies the condition is this article. Recall that knowledge does not have to be complicated in order to be shared with others. Every tiny trick or piece of advice that broadens our understanding is worthwhile to share.

Rather than using Fiori Launchpad -> Select the appropriate app tile, open the Fiori app, fill out the necessary fields, and then proceed, there are situations when we need to launch an app straight from the back-end system with pre-filled parameters. We’ll demonstrate how to automate this in this guide to spare end users’ important time.

Which scenario is it?

The purchase order that serves as the foundation for our desire to post GRN must be provided when we launch the app from Fiori Launchpad. Now, when you launch the app, instead of having to enter the purchase order number, a simple landing page will open with the purchase order number pre-filled. You may even pre-fill other parameters if you’d like.

Resolution:

A. System at the back end

From wherever you are accessing the URL, we must make the following adjustments to our backend system:

‘?PurchaseOrder=’ CONCATENATE INTO .

The URL that you will see when you open the application via Launchpad Tile is contained in lv_url here.
It should be noted that the semantic object is case-sensitive and that you should use the exact same URL. Thus, exercise caution when using this!

The Purchase Order Value is stored in lv_ebeln and will be sent to the PurchaseOrder Parameter in the front-end.

Now, pass the value to the exporting parameter URL and use FM ‘CALL_BROWSER’ to call this URL. The program snippet has been provided in the below image as to how to call the FM by passing the final URL.

B. Front-end system

Moving on to the front-end modifications, as soon as you launch the corresponding project using the Cloud/local We IDE -> Navigate to the appropriate Controller file for the view (the view that loads as the first screen). Assume that you must navigate to View1.controller.js if the view name is View1.view.xml.

As soon as you enter the controller file:

Since providing the pre-filled parameter value on the screen load is our goal, the onInit function will be used to fulfill our demand.

As seen below, we declare a variable inside of our onInit function:
This is the var ParameterData.utilizeOwnerComponent().obtainComponentData(); :

Now, the following reasoning must be composed.

if (startupParameters.PurchaseOrder in ParameterData.startup) {

var PONumber = ParameterData.startupParameters.PurchaseOrder[0]; “Loading the URL and obtaining the Purchase Order Value…”

var POInput = this.getView().byId(“POInput”);

POInput.setValue(PONumber); “Here we are setting the Purchase Order Value

POInput.setEditable(false); “Since the value has already been pre-filled hence making it non-editable

}

The View1.controller.js code snippet has been provided below for your reference.

That is all. We have fulfilled the requirement with both front-end and back-end changes. Likewise, we can use our declared variable ParameterData to pre-fill any additional values when contacting the landing URL, but doing so requires changes to be made in the back end as well during concatenation into the final URL.

One tiny tip: Go to Run, which is located at the top of the Web IDE menu bar, then click on Run Configurations. This will open the screen below if you want to test your app simply with front-end modifications and then add back-end changes later.

Currently, you have the option to select the previously selected configuration as displayed above, click + to add a new configuration (Run), or go to URL components and enter the parameter name and value. To test it now, click Save and Run. This allows you to test the application with just front-end modifications. The completed purchase order and additional information that has been pre-populated based on the provided PO Number are shown in the final output below.