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!
Image may be NSFW.
Clik here to view.
Provide your HCP credentials (if required)
Image may be NSFW.
Clik here to view.
And preview the application
Image may be NSFW.
Clik here to view.
Select “S1”, right-click on it and select “Replace with a copy of the original view”
Image may be NSFW.
Clik here to view.
We’ll receive a notification that the view has been replaced. Now we only refresh the application by clicking “OK”.
Image may be NSFW.
Clik here to view.
On the right side Select “S1Custom (Replacement for S1)”, right-click on it and select “Open Layout Editor”
Image may be NSFW.
Clik here to view.
This will close the Extensibility Pane and open the Layout Editor
Image may be NSFW.
Clik here to view.
As Data Set choose AbsenceTypeCollection and click “OK”
Image may be NSFW.
Clik here to view.
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).
Image may be NSFW.
Clik here to view.
On the left pane open the “Display” container and drag and drop the “Icon” control at the top of your view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Change the Icon: Click on the “Src” Field and overwrite the Expression “create-leave-request” and click “OK”
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Change the “Width” to “100%”
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Save and test it by clicking “Run”
Image may be NSFW.
Clik here to view.
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 RIGImage may be NSFW.
Clik here to view.
See you
Claudi