Skip to Content

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!

/wp-content/uploads/2015/07/301_753468.png

Provide your HCP credentials (if required)

/wp-content/uploads/2015/07/302_753469.png

And preview the application

/wp-content/uploads/2015/07/303_753470.png

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

/wp-content/uploads/2015/07/304_752399.png

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

/wp-content/uploads/2015/07/305_753471.png

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

/wp-content/uploads/2015/07/306_752436.png

This will close the Extensibility Pane and open the Layout Editor

/wp-content/uploads/2015/07/307_752437.png

As Data Set choose AbsenceTypeCollection and click “OK

/wp-content/uploads/2015/07/308_752531.png

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).

/wp-content/uploads/2015/07/309_752533.png

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

/wp-content/uploads/2015/07/310_1_752542.png

/wp-content/uploads/2015/07/310_752541.png

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

/wp-content/uploads/2015/07/311_1_752546.png

/wp-content/uploads/2015/07/311_752548.png

Change the “Width” to “100%

/wp-content/uploads/2015/07/312_1_753472.png

/wp-content/uploads/2015/07/312_2_753473.png

/wp-content/uploads/2015/07/313_752554.png

Save and test it by clicking “Run

/wp-content/uploads/2015/07/314_752552.png

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 🙂

See you

Claudi

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply