Press "Enter" to skip to content

Create a FioriLike App Sales Order Tracking

Create a FioriLike App Sales Order Tracking

pCreate a FioriLike App: Sales Order Trackingp pwelcome my name is Mark Andric Im working for the customer experience group at ACP and in todays article I will show you how to use sub River or de to create a few like application we will create a sales order tracking application here you see the steps that I will go through so we start with creating a new project in sorry body well be using a template to create a story application then when this application is done we will run it and I will show you the result we will then continue and and we will run the application with mock data and at the end we will deploy the application to sub gateway and to verify that it is deployed we will just import this deployed application back to supply body and on the application so lets get started here I have already launched my browser and Im accessing a demo system from SAP Weaver our de you can see here on the on the left side I have already or some projects I have created so lets start Im creating a new a new project in here so I will go to my menu file and create a new project so I will provide a name to my project so lets call it my sales order tracking and we can go to the next step here we have a catalogue of different templates that I can use so every template is generating a different kind of application in in this article Im going to create a fury like a few like application so Im going to select this here and you see that there are different possible templates that I can choose form and this is the one I would like to use subview a starter application this template is going to generate a master detail application so by selecting this you can go to the next step and there is a visit that we guide us through different steps and and at the end Subway Vardy will generate the all the artifacts we need in our project folder so the first thing we need to define is the data connection to the backend system and here i have the possibility to access a catalog so what im going to do here is that im going to access one of our gateway systems so you can see here in the im im going to select this GM 0 ab ab system and hes fetching all the available fuel reapplications all the dissolved all the available or data services and in this gateway system and you can see that there are many many other data services so im going to look for one that i would like to use for my sales the order tracking so lets lets look for tracking and as you see here he is proposing me these different data services im going to select this one here this is auto tracking and service in fact i can open it i can see that there are different collections here and this is the one that is interesting me the sales orders so thats very good I can even spend this and see more detail down here so this looks quite good for me so Im going to select this one okay you can maybe see it has been highlighted in green which means that this system has been validated by Sephardi meta data has been validated so it looks good for us you could even look at the details while youre looking down here again so these are these are the sales orders that Im interested in so lets continue lets go to the next step so the next step is now the customization of the template now as I said this template is going to generate a master detail application and here on the right side we can see in fact I can even click on it to have a better look on it now we can see how the application will look like so you see on the left side we have the we will have a master section so the list of list of sales orders that Im going to look for and on the right side we have the detailed section so here we will place these sales order details and you can also see that we have already some fields that are foreseen by this template so what we need to do here is we need to map these fields to the old data fields that the OData service that I have just selected before is going to give me so lets start and map the master section so Im going to put in here a title say its orders and then all data collection this is where Im going to select my sales orders collection and now Im going to map these different fields so you can see here if I open this dropdown list I get all the old data service fields that are given by the old data service and Im now going to select some feels so says all the number then Im going to select maybe a total total amount you need attribute lets take currency this make sense we can then maybe use the customer ID and customer name down here so we are mapping these the search field of course going to be the key field so thats going to be sales or the number so we have mapped now the the master section and we can go now to the detail section lets give them a title sales order detail text sales order details and we can map again fields so lets take here for example the customer name again and the customer sales orders may be better say its odd number down here the customer ID and we can then take some of the numbers like lets take the net price amount and that detects amount which is just below that and maybe the order date okay so we have done the mapping we can go from one to the other that looks fine lets go to the next step so the mapping has been done and the next step is just to finish this visit and he will then create my new project in my workspace so lets finish this and lets have a look here so you see here we have our new project my sales order tracking if I open it ok I can see the files that he has waited and I open for example the view folder I can see that my view and controllers have been put in here for master for detail theres also one for app knowing that fewer applications and any s AP uf5 application is following the MVC paradigm model view controller paradigm so the up here we have the model which is given by the odata service and then here we have the view and the controller pair so on that looks good now lets lets see if this is all working so we havent done any coding line until now so Im going to select the index.html file and up here you can see this icon so Im going to press this and now subdiver rde is opening a new tab called application preview so this means that we can test we can run and test our application within subdiver Rd and then you can see that the app that Ive defined here is the master user data section is working and you can even see values in here so this data is coming from the backend system this is no fake this is really coming from the banking system and I can go down there many more sales orders down here and we can recognize that the fields that we have been mapping on here say so the number we had the total amount customer ID name we divide the currency and again here we can have the lets see what it is this is customer name the size of the number customer ID this was the title and then here we have the net price tax amount or the date and you can also see that we have the possibility to change the size of this screen currently we have this medium size I can go to small size which represents a smartphone and you can see that we have a responsive design here I can even change the orientation to simulate the orientation of my application going back here and I can even go to large which is 1 which represents a a desktop full screen this is a very nice feature so before even deploying the application for example to a sub k to a system to a web system I can test the whole application running here with real data this is a really nice feature next I would like to show you how to run the application with mock data assuming that for example we dont have access to the backend because there are some issues or they are they are working on on the backend become the access country and I still would like to test my application now by default if I run it of course its going to get the data from my backend if its not available I can use mock data so what does that mean in fact there are two possibilities first possibility is that I own the mock data here and the system is going to generate data for me so all I need to do is hit one here and the application is running so you see again the same application but now you see that the data that is displayed here is generate the data by the system we have some more meaningful data here total amount net price tax amount for text fields you can see that he is just putting a a number here you know next release we will even add different numbers in here so that we can differentiate this but you can see that he is generating a lot of data here for us so thats one possibility but if you want to go further we can do the following we can provide a JSON file now for this Im going to add a file into my bottle here so I can add JSON files containing data and I need what I need to do is I need to create a new file here sorry I need to import a file of course because I have already created something so Im going to upload a file in here so let me quickly take this JSON file so I have here some sales orders and I can call a little bit to the right there are theres theres some data in here like this 99 Taurus so lets run the app again with mock data but this time Im going to check this box here provide mock data using JSON file so lets run the app again and you see the 99 total amount if I go to the next one you see that now we have more meaningful data which is provided so thats an a nice feature I think so next lets deploy lets assume that we are happy with this app and lets deploy this app to the sub gateway in fact this is only one possibility we could also deploy the application to the Hana cloud but lets do this here so were going to deploy this to the repository so again Im going to select the system I want to deploy it to so Im going to use again my gm0 here you see the possibility of deploying a new application or updating an existing application and so this is a new application so lets keep it as it is now I am going to give him a name so lets call it my ISO tracking so for example any more application so tracking and Im going to choose the package so to make things simple Im just going to use my local TM Tolo TMP and lets go to the next step okay click and finish to deploy the app yes lets finish so in the background he is now deploying it to the sub gateway and we are now waiting here we are following success message the application was successfully deployed to have a repository way nice now of course we could go to the sub gateway and have a check there and but to validate that the application has been successfully deployed we can also do the following we can import the application back to our environment and see if its still running so lets do that so first thing I need to do is I have to create a new folder so lets call this my sales order tracking import it and lets create this folder so here we are and now Im going to import you see I could import it from a file archive or I can import it here for my above repository so lets do that selecting again our gm0 now hes offering me all the all these applications and one of them is of course going to be the one we just deployed I could look like like this or I could just go here so lets import this when you see has imported it and I can now on the application and here we are so this concludes this demo so we have seen how to create a few like application we started to create a new project we have been using the template which helped us to create this start of your application defining which audit service to be used mapping the master detail fields then we have we on the application to see the resulting app we deployed the application to sub gateway and reimported it back to our sub cover our de thank you for joining this articlep

Be First to Comment

Leave a Reply

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