ERP ECommerce SAP Assignment 5 on Extending a Fiori App
Articles,  Blog

ERP ECommerce SAP Assignment 5 on Extending a Fiori App


Hi all I will walk you over ERP E-Commerce SAP assignment 5 Extending a Fiori Application in this assignment you will
learn how standard Fiori Applications can be extended so first
we will go To we will use Google Chrome as always and then we will Go to SAP Fiori trial account
and then i click on see It in action and then I will click on Customize and Extend ok then I will click on get started now you will See that i have already logged on to this
account if it Does not log you on automatically please log in to this Account using the ID and Password that you have used in Assignment 1 to log on make sure that you
have used the same Email for all log ins and platforms and the
same password so That you donot get confused between different platforms email and Passwords ok if it asks you to change the
password please go Back and change the password and then use a new password for The assignment ok so you should come here at the end of Signing Up for the platform ok from here we will go down To the CRM Tile from here I will click on
my contacts Ok so within my contacts I will click here
and then I will Go to develop apps and once I come here Create App Extension I will launch SAP Web IDE ok so I just close
this Tips And Tricks and then i have to put in the password use The same password for logging in to SAP Fiori and then This is the project name which should come up and Click ok now if you click here you will see
all The files that have been created with the
projects now Click on the project and click on run so in
its original Form it will run now
so you can click on any of the Contacts here and see what is here so you
will see that Professor Akkaya and then you can see the
mobile no phone No email address date of birth ok click on
this it shows Different attachments if you click on this
this is notes Ok so if you click on the information and
then the plus Sign you will see this is what you can see
here ok so Go back and choose any of the names and then take a Screenshot ok this is going to be your actually you take Three screenshot so the first one is here
Information the Second one is the Attachment and the third
one is Notes So these are your three screenshots screenshots 1 2 3 Ok now we will move on we would now like to extend this Application in order to extend the application so this is my Original application so far ok i have my original application And so you have seen how the original application looks like Now we will do some extension in this application so i will Go to from tools to Extensibility Pane so
i come here Then i go to tools then Extensibility Pane
ok so change the Preview mode you will see the outline will
show up let me Remove my ok you will see the outline has
showed up and This is preview mode make sure that you change it to Extensibility Mode ok so you will see if you
bring it here It will just turn to blue you can basically
highlight ok So now here come into contact details go down go down Further these are the different attributes
ok i need to hide Birth date label and i will click close also birth date input I will hide control and i will close so those
are the two Things i have hidden so in order for me to
change to see the Changes in the application look at here the
birth date was available And now I want see it gone ok so i will run
the application And I will close it and i will run this application again and You see the date of birth is not here anymore ok so Click in see the date of birth and the birth
date input they Have been hidden ok so at this point take
a screenshot of this Contact information here any name will do
take a screenshot And that would be your screenshot number 4 ok i need to go Back to the outline so in order to do that
i need to go to Tools ok let me run it again ok i need to
go to extensibility Pane ok i need to go to this pane and then
from here I will go to the view called S2 if i click
on S2 ok so i Have to have the preview mode changed to Extensibility mode And then when i click on S2 you will see that the contacts Will be turning to pink ok now at this point
right click On S2 and Replace with a copy of the original view And so that way this will save your changes
and so You will click on open extension code here
and you will See this view has been added to the project
ok now In order to do some changes what i would do is Right click on this and then open with layout editor make Sure XmlView is selected here in the dataset go for contact Collection and just say ok now we will make some Changes using the layout editor ok here type in object Because we are trying to look at object attribute and Then drag and drop object attribute before
the company name Ok now click on object attribute object attribute text ok so here Go down ok go down
look at here under text attribute text Remove that ok now click on here and then ok so now by Clicking here i need to bind so i need to
go to text i have Removed the attribute text and i click on
this and from here I have to do the data binding so what i will
choose From here is function so i will choose function and I will save ok and then I come here let�s see it did Not get added so one more time text function function Then i will just add it ok now it got added
sorry it did not Get added in the beginning and then i right
click and go to Code ok then i see that this function has
been added here Now I will save my file and i will run and
refresh my application And I will run the application
ok pick a name so it will Show the company and the function the person is working for ok So he is a senior manager of this company
so the function Has been added so take a screenshot and paste it to your Word document and this is going to be your screenshot no 5 ok now next we will be using another template to extend the Project so right click the project folder
and go for new Extension so i will go for right clicking
of the project Folder new and then i go for extension and
this is my Project so I confirm it by saying next and
this time I will Choose extend view fragment template and click on next and here I will choose my view as S4 and this contact picture is Fine and then i will click next and then i
will do finish So you will see that this S4 fragment file
is now added To the project so i will right click it and
open with the Layout editor now i would like to drag a button on the Top of the view where the ADD PHOTO item is ok so what I will do is I will click this button and
I will drag And drop it before photo ok so now I will
remove the text Button here ok so I will add an icon I have
to click this Ok here sorry I have to add icon button here and I will choose Camera so I get camera I say ok and I get
that camera Button here ok
so I will right click the button and I will Go to code and the code editor opens and you can see That the button code has been added ok now place your Cursor between button and width here and then you press Control and space bar together you will see
all these Attributes coming up choose tap attribute
ok and then add a Little bit of coding here ok so tap then within double quote On camera tap and then just finish your quote ok and then Save it this is from page 21 of your assignment and then you Save your file ok now we will create another extension So I will go here new and create another extension to This project and then we will click next and
this time extend Controller template I will do next and then
I will choose S4 and this is anti-controller and then I
will click next And I will do finish and you will see that
this has been added This controller component is added to the
project ok now I will double click on the controller file
actually this Is already open and just to edit I think to
double click On the file and then I have to take this quote and type It at the very beginning of the code ok be
careful if it Does not take it then just retype the quotes
and it will Take it and then after second line I have
to add this Code so I will copy the code and I will come here after The second line I need to copy the code ok
and i will Save the file and now I will run and refresh
the application So I will run it ok select Manish as we have
done Before and now click on the plus button here
so When I click on that you will see that this
camera Button now shows up here in the past it was not Ok so this is what we have extended the application Width and now take a screenshot and paste it to your Word document and this is going to be your screenshot no 6 now click on the camera button ok so it
says take a Picture coming soon and this is going to be
your screenshot Number 7 ok then finally we will deploy the
application To the Fiori Launchpad and in order to do
that we will Deploy so say ok and then go back here to
the SAP IDE Highlight the project click on deploy deploy
using at This point we will deploy using SAP HANA Cloud ok and Just deploy ok because i have practiced it
before it is Telling me to rename it i will just make the
application Extension 1 ok or i think I could update an
existing application Ok for you guys you just do deploy a new application Because I have already practiced it I will
just do update An existing application ok then go down
ok deploy then Register to SAP Fiori Launchpad click on that you have To enter a description so enter customer control sorry Customized contact apps and then do next here type is Static and then tile is put your own name
ok in the subtitle Customize for your instructor so customized for Dr. B if I am not your instructor then put in your
instructors name Ok then I will go to browse and then i have
to select an Icon for the tile so I will enter contact
and these are all The contacts that came out so I will just
choose this one Contacts and then I will click ok then I will
go to next Next again finish now I will open SAP Fiori
Launchpad ok Go down you will see the sample group here you will Find your names contact customized for your instructors name So take a screenshot of that and that is going to be your Screenshot number 8 ok paste it in your word document then Click the tile to run the extended application and click The plus sign at the bottom of the customized view so Click on that ok so choose any one click the plus sign At the bottom and then take a screenshot of your extended Application and paste it to your word document ok and Your assignment is done Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *