Extend a Fiori Application with SAP Fiori Demo Cloud Edition Part 2

[former_member5235]

In Part 1 you used the Web IDE of the SAP Fiori Demo Cloud Edition to extend the S1 of the Leave Request Application.

In this Exersice we replace the S1 view with the original view, opened the new S1 view with the layout editor and add a control. Because of the last release (1.12) we can now switch from the Extensibility Pane to the Layout Editor, to modify a new Extension.

Part 1: Open the SAP Fiori Demo Cloud Edition, Extend the S1 view

Part 2: Add A Control with the Layout Editor

Part 3: Deploying to the SAP Fiori Launchpad

Extending a Fiori Application – Extend a view with Layout Editor

Open the extensibility pane (“Tools > Extensibility Pane”)

If Extensibility Pane is grey, check if you have selected your project!

Provide your HCP credentials (if required)

And preview the application

Select “S1”, right-click on it and select “Replace with a copy of the original view”

We’ll receive a notification that the view has been replaced. Now we only refresh the application by clicking “OK”.

On the right side Select “S1Custom (Replacement for S1)”, right-click on it and select “Open Layout Editor”

This will close the Extensibility Pane and open the Layout Editor

As Data Set choose AbsenceTypeCollection and click “OK”

You should see the preview of the S1 view. But you cannot change the existing controls at this point (for this use the extension points in the Extensibility Pane).

On the left pane open the “Display” container and drag and drop the “Icon” control at the top of your view.

Change the Icon: Click on the “Src” Field and overwrite the Expression “create-leave-request” and click “OK”

Change the “Width” to “100%”

Save and test it by clicking “Run”

Close the Preview Tab

In the last part I will show you how you can add this extended App to the Fiori Launchpad of the SAP Demo Cloud Edition.

More Web IDE stuff published by Technology RIG :smile:

See you

Claudi