创建具有 Filter 功能的 SAP Fiori Elements 应用

Everyone welcome to this next session on unable learning series many of you have given a great feedback about my learning series on my YouTube channel as well as on my website online fury tra do com。As part of this learning series video。We will discuss aboutapp fury elements。Annotation file in SAP whereby the。Many times in your company you might have wondered。About his smart filter for applications。Especially those were working in sc s forhanna projects。You might have seen there are different varieties of applications。Which will look alike a standard fory applications but yet built by your team。Also you might see some analytical applications like an overview page application。How these applications are created。We will discuss about。How do they look like。

What are the different components of these applications。What are the techniques to create this application。And all of that will be on our。STEM scenario。Majority of the demos which you see。They all give you an overview but in this session we will go deep time。And have a look at how to create the variety of your elements。In by the full stack。As you all know by thirty first December two thousand eighteen。The support for whereby is ending and every company。Including the developers are moving to SAP thereby def full stack。So we'LL be having。A discussion around the body start to create such a。Furial element application so we'LL be talking here about two furel elements first one will be the smart filter fury and second one will be an overview page analytical application。

Before we move on let's talk about the motivation of having analytical application or a smart filter your application。A smart filter fuel application of fel limit applications actually。For all the people who have no clue about javascript and no clue about developing freesty fys。So they are major in the companies you would see there are a lot of people around you for building your applicationations and you as'AVA developer finding it so difficult to match up to the expectations。There are classical reports so all the typical。Example。Of applications which are expected。From developer。In a typical ER recipe reation project the first type of applicationation is you expect to hear books。

The reports。Gives inss exactly an insight of the data looking at the line item data looking at the master data transactional data and gives an insight of the data a detailed insight of the data to the end user。You might have done in an a classical ery system e system might have done interactive report or classical report or nailby reporter。That's what exactly the reporting requirement。The second section set of applications are more towards theview。Le。Which gives a kind ofgen making capability your example I want to know at what speed in my company products are sold。Which are the top selling products in my company。And which company is probably the most important customer for myself。

All these things are possible by looking at a high level overview。And this is done by aggregating the reader。Ggg means I want to do some。Minimum maximum。Average all these are aggregations which you apply on the data for example I want to know in last quarter how many shoes my apparel store have sold。How many t shirts。My App Store have sold then drilling it down I want to know the t shirt category which brown t shirts were sold the most in my store。So all this is done with the help of aggregation。That's exactly the motivation of creating。Also the FS now as you already know。With this new advanced technology introduction we are moving more towards responsive web applications。

The applications which are capable of running on mobile tablet and nextto on all the devices。And that's only possible with sappi five and fury technology。That is the reason there is a prime time shoot。Typical developers BP developers and seque。Dialogue programming developers are finding it so difficult。To Be relevant for the company any。Companies are expecting you to design new variety of applications which are fy experience based which can run on any device any time ind anywhere。This is what is the expectation from a majority of the companies and you as'a bad developer so difficult for you To Gee what's going on around you。People were exposed they're so busy they're not able to help you and that is the reason I have courses on my website between help you。To patch up to the needs of today's market demand。

If you not subscribe to yet the courses yet you can always go back to my website online you training dot com and subscribe to these courses as fast as possible so that you can match up to the expectations。If you're already my student you already know that I have a no learning series on my website where you can go and get free learning on advanced topics like this one so you'already comfortable with your I Fi quey a APP on hana and series views this video is for you。Still if you're a beginner you can watch this video To Get some hands on on creating these videos this is my learning series and there's a continution of this learning series video。Let us go back。And look at here the example what we want to achieve so we want to create。Sales report now what is the practical need here。The first requirement here is we need to create a report。

Of my sales data。The company。With of。Hit options。To user。To this requirement。Finest fitwi comes into To Go ahead with calls smart filter fury react。What does a smart build of fia how does it look like。Technically go back and look at a smart filter fur。Screen shot on the Google so let me search for a smart filter。Que disclaimer guys we don't need to have anyy programming knowledge required be able To Build these。Application so let me go to this smartter。

And you would see this is an example of a smart builder period let me copy this image。And paste it over here withleeing better。The typical example of a smart builder fia you might have seen this kind of apps in your company。Is what exactly smart withfey application is。OK。What are the different components of this APP。There are immediately three important components of this APP。The first component is a smart filter bar。You can see this is called smart bar the second component is the header area。Actually this one is your head area。And it includes a smarter bar then we have a。Overview area for the items which you have and then we have a smart filter table。This is the third section of your f application of the three important sections of a smart filter fur the beauty of this fur。

Is。That there is zero furyding required knowledge of javascript zero knowledge of fury To Be able to create this application we just need To Be aware of the tools。And this session which I'm going through To Be able to explain you but。There is nothing like lunch you should have a good idea about serious views。S's view is stands for code services the two variety of c concepts one is inba and one is in hana。If you subscribe my APP on ha course you would get a complete idea about serious views。In this particular I'm not discussing about the series's view。The necessary serious view I have already prebuilt。But the beauty is I'm sharing。The code for that serious view in the video so you can look at the video description here or also you can go to my UN learning series and then you can find a complete source coded。

Of the which is required to run this example you can copy that series in your environment your company and then you can you are ready To Build this application which I'm focuscasing here you will also think about my company is not。Onapps forhan will I be able to practice this yes you can because I am using a DEMO scenario and these DEMO tables do exist in all your company systems provided you native a seven point four in a above。It's called epm data model that's all covered in mycps for and aspno technicalical course please subscribe to this course To Get a detailed overview about c's views m dp sequelscripting scip hana modeling。New about syntax if you data model away scenario a lot more lot more other stuff if you have if you don't want to subscribe for the course is still you will be able to practice this example which I showing here look at the description of this video you will find the link for the series views required To Be able to develop this s STEM scenario。

Now the question comes where do you develop your c view。You do it using a bar development tools in eclipse。This is an above development to liclse。Which allows you to do about development while a clubipse is the only place where currently you can create serious views other than a Apple cn so here。They have something called。A sample example built as I mentioned we are using something called a sample scenario。The sample scenario is using something called enterprise procurement model is called PM the sample scenario。Is based on in human model EP model which is available。In every s networkVAl system seven point four above。

You can use this sample database tables sample babies。And you can use code as ST pmco To Generate the sample data also on sample scenariOS is。She is a prettyquisite To Be able to execute the scenario in your company。Once you down my so school with him and going to share with you。What you need to do is the very first thing you got in and followed by source code and copy youraps from a check you have transaction called em available or not。You can go to the transaction code in your system or in your system here we have an。I transaction cos I got check out loging quickly。

And I just。This code will be there in your company。Is a recreate and it would read some sample data in the database tables。Again I repeat these are all sample tables。So that there is no productive use of these tables hence you can go ahead and generate this in any environment it will not affect your productive。Sales sort of material data in your company。This is a prettyquisite To Get started with any development any DEMO scenario in your company detail about this epm model is explained my on ha course this video is again just an introduction。Complete details will not be covered here。That's a prettyquisite guys we can go ahead and do that once this is done you can now use my serious views I will be sharing a note with all of you which has all these serious views which have created already in the system for you。

The series views includes product series views business partner series views sales order header reine and sales so line item data。The final CS view which is so called a consumption series view in forno is what we are using here are created one with the name call s sortdaho。I execute the series view。And now you can see it displays me some sales or data。Displays me all the line item information the products which customer has purchased。What is the gross amount of the seal。That amount。Overall status for the sales order or status criticality of the sain。The business partner who bought the sales order company name all this information is available over here。All this information is a availableir over here this is a preview of the data this guys we need data To Get started somewhere right sample data this is a sample data which is more more close to the standard sales order of purchase order scenario which you would like to do it in your company。

This is once again I repeat its a DEMO data it's a DEMO tables built on completely DEMO scenario。We are using epm data model。Now what the serious views are built we are important is we need to just remember that serious union with is our consumption seriess our consump series building。What is consumption serious views what is seriouss subscribe to my appon hana code To Get a detail hands on on the sea。It will become a full stack developer if is subscribe to my courses。How was this is built To Be already。Part top of the s's view older services also been created you can see it here we have an annodation in s called oit to publish。

Which exposes this series view in order to service。I have already registered this orderud service in my negate reing system and I can go to the outline view here to look at this oit service DeFinition。So go to outline you look at your CDS。You have your secondary object and you see o exposure。And rightly clear in say open it will launch the order service into the browser。And I can choose my entity set。And we can just go ahead and this our format。Is Jason。You have no clue about service。Please look at my channel I have an introduction video already post for you regarding audit services。So let me show you quickly my YouTube channel and always my YouTube channel and get a hands on on basics of code。

And here you have lots of three videos offered by myself onhan you are five g stuff like that just here the top。And search for。Auditor introduction。And you would find as GY architecture service for you here please watch this video。An introductory video which will give you a good overview of how oit works the basicics of codeit guys you can watch this video and get a hands on on that。Now let's move on so once this done you can see this some data which it is exposing from myp system form aor service。Since there is huge amount of taking a lot of time。I just keep thisside and that's my order service name。Generated o service name typically includes the seriousvna underscore series so let me know down my re service name。

Our service and also look at the scenario directly in my system we can email and I will give you an access to this oitor server。S for a server and then you will get an access to this system from your local computer you can access to editity you can also access to yourapp system from local sapp g and then also run all the services locally new current browser。You can also create a connection secure connection with your sc cloud platform with this scbs for a system so in this example our back end is going To Be our harma system which is an eighty or nine。Ise and our。Connection will be happening with cb cloud platform so we have our sc cloud platform。Account trial account。

And from this specific cloud platform I have already modeled her。Destination which is connecting to this system in the good news is no cloud network required because my current is ior cloud system it's actually an Internet facing system so there is zero connection zero cloud connector requirement for this you can directly connect to it that's the beauty of this sour。So we have our reci our platform and here we have our development tool for fury called SAP ver by e and a successor of that is SAP ver by full sta。No clue mytrodu no clue stack video on YouTube about full stack。These videos are also there on my YouTube channel my YouTube channel is gonna be helpful for you throughout all your learning so just search for you can also go to these be trainings。

A list。It comes always on the top on YouTube。And here you'LL find the video about baby full stacks just a little bit and you'LL find a BA full stack video here you can see thisci very full stack introduction of a very full stack already given free of cost to you on the YouTube。There's a lot of learning which you can do on YouTube with my channel please subscribe to my channel on YouTube if you want these amazing videos To Be published on your email automatically once I upload them。Coming back。We will be using these tools so we have to create ourva development tools on eclips to create our serious views。Correct and create views we have already donequi already already hear the code with you and then we have also set up of a cp account with your destination connected to our aspo system。

This is what the current setup we have。If you have an opromise system then you would also need something called SAP ho cloud connector To Be able to connect to this cloud system。Then be using a c website full stack and websiteby To Be able to create this so let's move on back to our requirement。Where we want to now create a report for my sales data which is exposed by this poit service and serious view and create this kind of application without any more coding guys you're right no coding required to create this APP now you must be wondering how it can be done there are two ways guys to achieve this kind of applications。First technique which you can use is rotation use use so this is something there are two options again I seem to create this smart fuy element type of application one is using e rots serious abuse。

Another is without an rotation but with a rotation fine。In sc we。Using annotation model。If you ask me which option is best。My experience I would say go with option number one because in that case the code to create journey the UI remains in your above system it follows the same life ccle as your series view and it always remains very close to your data model which is actually a good technique tomorrow in case if you remove some properties at new properties you can quickly change your your data extensions accordingly。If you have no clue about how to create this option you can watch my video again on YouTube about serious b ptegation where I'VE actually created a smart filter。

Using previous b integration complete and in transactional application we have built here using serious b p integration。With annotation so here are created serious views also relevant for the DEMO scenario and then also I have created a smart filter fy about the end using serious annotation so please watch this video if you're interestedted to no option number one today we will talk about option number because this was the most a topic on my YouTube channel and on my emails email box by my students。So we will look at the option number two right on keep thisside and going talking about option number two where we will be using by to create annotation file manually and then create generate the necessary。Necessary application for our requirement now for this to achieve we need to talk about herenos so annotation is nothing but it's。Actually the major data the major data for you so is annotation。

Simple words you can see these are meter。For sy element which。They。What yours you want。On screen。What filters we want？What problems we want？All these things we want more selections you want。All these things you can tell why this major data so called annotation so we'LL be using couple ofnotations。What will be information major to create this particular application related to smart filter we are using three top the first annotation which we use is erate。

Handle in for。The second annotation here we will using the RA while if I t about option number one in series we will be there similar to that thesenotation will be using in annotation modelr by the u show unit number minutene by go to UI and this one for filters for all the the top level filter selection screens youll use selection fields。Annotation will configugu selection fields and for creating the line items that he will columns you will be using line item annotation。A line item。Multiple columns which is represented。TTT。

Inside selection。All you need to know be able To Get started easy three things you need to know To Get started creating this smart filter as a pres your view is also ready along with oudit service。We just have To Go back now to there by the so let's go to our SAP cloud platform account。I'm Switch to my SP platform platform cckpet so just go to SAP neutral。And now here in the services we have SAP by def full sta service which we will be using To Be able to develop our APP just a quick information prerequisite guide if you'are using your own tic cloud platform account you must need a connection to the server which is created under destination over here。

If you want to know how to create destination。Please look at my YouTube video about whereby the personal editation where I shown how to create destination to connect to the vaen system you can do that coming back so this is again of prequisite let me put it in the equtity so that we don't be sit out by any chance the step by step line by line。So now just go back where it pres so here we have and the second thing is a。You may have already product by your company or unless a cloud platform。Esination to your。If is going To Be very precise。说保留给你。If。

Mrs。No Internet facing capability you need find a director。How to create set up on a cloud connector is also covered in maron my one of YouTube video go back once again I'm so sorry guys there are too many things and for everything I have a YouTube video for you。You want to learn these details in these things in detail please subscribe to my trainings on u five fory development on the body full sta and advancey development as well as a weapon on on a training you will become an expert on all these things if you subscribe to the training on YouTube I just have sample small videos for solving your temporary issues it's not a full flash or training on YouTube for everything full flash training is there available through my website。

So come here you'd find something called integrating your coal as a account。Just check that video。So here it is this is where I haveed this video how to configure your c with serious table function and a cloud integration with cel so that's something I explained here how to create cloud connector expose your order service the cloud using s cloud connector。Is foreign premise system to ho cloud platform。So that's just again cover in that video can see all those videos actually make ready and now we are ready To Go ahead to our SAP whereby full stacks so close by launch by designer。And I just go to。Services。And here search for services thereby the e duck。There you go。Make sure that is an April in your cloud platform。

This is actually your development fury development as a service they development your apps using this service code there by let's go en launch this service。And since we have all our prequisites met our connection is also we can right we get started with developing a the smart filter period display this line item information which you see here in your SIP system the data meip system will now be displayed in the flu u and all of that a recording。Without any about codeing required guide zero about so let me close everything what we have it's a fresh one you can also Switch to another workspace that's an amazing feature。Which where body fools out offer you can Switch to multiple workspace so I can Switch to another workspace altogether so maybe I just open another workspace and。So that's my another workspace。Can see I can always go to another workspace and now I can also start building my new apps here that's a multiple workspace feature which by sta office okay coming back now let's create a new project so I can write click here。

And a new as a project from templatet。And now we will choose。In the featured categorycp fy elements some of you may not be able to see this fury elements in the drop down what you got to do is you need to enable a feature in there by。How do you do that come to this settings button。And our features。And now he has searched for。Fury elements。There you go。呃。No。Just check out。You to choose overview page atically speech on。This is actually for our next example as inferior by will come by default we could also make sure that you select this work list application checked on and this one on these two options must be checked on To Be able to see and create your apps which we will be demonstrating now。

Going back let's create one more time new。Project from template。And I can your element。And now here we will choose application as least report application。Now if you have your company asking you to convert transactional report which you had earlier and new order To Be a new paradIgM new programming paradIgM with this forhanna you can DeFinitely use this option and convert that report with a smart filter view application using series views the performance of that will be amazing and user experience is also amazing with that。Click on。Give some project name I can。

Element fe underscore my。Or sales report and give a title sales report。And against the name space online they training start farm heart。'。And now he'LL be will use our data source。He already have created the destination that's the reason is showing me here I just connect to my sor。My server I search for my service here。This my audit service generated out of my CS view。

Click on next。Don't choose the second and rotation file as this under rotation file which is coming from series view actually because in my series view I have also kept couple ofnotations related to aggregations and semantic information they are not relevant right now we are not using this option in my on course I have show you guys using this option To Generate the company UI。Without local annotation but in this case we'are not doing so so I click on just first one the service measure data that said。Click on。And I chose my hold collection。And that's it he won that much click on finish。You see ay application a smarty gets createda and can just quickly check this up and now with some of you maybe already working with your five period you must wonder what is this grand file what is this packages on what is this you know mainfa component so guys all this is covered in in detail or in my trainings so file is actually for best practice build of your application。

It's actually used as a note module in we body full start To Be able to create the necessary runtime artifacts so can always build your application rights a build option and then you will see your APP will get built in in in a Dis folder and that's what gets the cloud finally to the back system that's what fury best practice built which actually creates ho in pto JS and other stuff again there is an introduction video for the same just search for fury best practice built。Fy grants。On YouTube you'd see on top the video videos the second video is what so the first video which I'm interested to listen and see how can we create the how can we create guarantee as file To Be able to perform the best practice built with very very full stack please watch this video get a complete idea about company preload and all stuff。

Let's come back sta and now you'just simply ex right now just ex simply so I'm just gonna run this。I didn't touch anything else I just created the air from the tablet and I'm just executing it let me run in another session make it easy for me to Switch。And go its connecting post to the cloud platform authenticating you and DeFinitely ask your credentials now for your gateway system as well。Because currently we are connecting by our destination to our gateway system so first we give you a sandbox view sandbox what is PU sandbox it's a local launch band。This is also covered in my fur advanced traininging。So I click on the tile now。

And would it will soon launch our release report analy report where we can see all the lineem information but yet since we have not created any anotations yet system will display you an empty filter empty table it won't show you any columns in the table it won't show you any filter selection to you okay disconnect to the system。Now you see it will show you an empty screen now you see there's an empty filter an empty table I can actually go and now at columns from here so I can see my。Curry code and across amount。Company name I want company click so I my columns and say you can see it will display some values to you but we don't want that what we want is we want to display。

We want to display user the screen built columns when the screen opens that time we want to see these columns also we want to see some some filters some I outfi and I want maybe。Company code currency code and company code to filters I want To Be displayed with the end user when the application starts。So currently a user has this option but not really so good so this is the kind of screen I want to display guys。When my application launch I want to filter one is currency code when is company the company at position number one and currency code position number two and then I want here some item information header info for my my table which will display me the account number of。Number of records in the table which should display me here something and then at the bottom I want this smart filter table and they should have at least four columns I want at this point so I want company name maybe three columns company name gross amount and currency code。

If I so how can we achieve this how how can we achieve this very easy guys can create something called an annotation file in by full stack so let's look at the steps to create such an annotation file in BA body full stacks I go back to a body full stack。And now you can see already system is greeted a folder and a file I'am not interested it I believe this。So I go for edit and this because I want to show you everything from scratch。I just that and now once again I come back and ADD a new folder。And I call this as a not for me。And now？It is older be a grand creative file but before that let's have a look at manyif fies on。

Um in little bit。You would see this is our service。And there is something called an annotations annotation entry which system is saying I will load annotation from the packing system since we are using serious view with some annotation system is trying to load this annotations from the back end system we don't want that also I just remove this entry and that no serious nottation in this case。On thenotations built on by and now watch out I currently my line number twenty one is empty in manifest the moment I ADD an annotation file that entry will appear here automatically system is so smart everybody so smart that it is going to link your annotation file whatever you career automatically that's what will happen let's see that I can write drink now innotations。And you must use new。A rotation fire。

Click on that。You can give any name you like I just keep it innotation。Go。That's my main service fine click connect and so finish。You will see wow there you go you can see just now line number to anyone there is now an annotation file path has been addeded for you that's what be what it drive and this annotation path is potic here and you can see its exactly poing to your annotation folder。In the main directory with annotation X so this is your main directory which it is pointing and in this directory you would have your annotation or X file clear everybody how everybody how your project is linked to the innotation file so sometimes in your company when you're working with such apps by mistake if you'VE done a typepo or the link is broken due to some reason or some developer has done something that the APP will not appear so you know where what you need to do you need to come to many f on check here the innotation path。

I for this annotationch at the absolute part which is given for annotation file。If this path is correct at least your linkage will work properly。Okay now I can just come back to annotations XL and since it's an annotation file where understand pretty well and it is going to launch something called annotation editor yes that's called annotation editor this is what is the option number two other than what we learned in a BA hana Co here to create now and smart filterer APP with annotation。So as I told you quickly sometime back what type of annotations we would need we would need allnotations to create our fieldrr。Selection in line items so let's ADD these threenotations entering for selection fields and line items let's come back and you gotta start with look annotation let me make it maximize double clicker it makes it maximize。

And I search for。Check we collection fields。And。Then we want right now I just ADD these two yeah know just ADD this two so in the heing for annotation I can come here and choose my type name so my type name is is something like hard code name can always choose it I d n file so what is I it actually used text a fy application text translation and you can always come and maintain some some forward here maybe I just want start with let's say。He for。Info。Goes to sales order he。Al。

These two text I added and now my translator can actually pick up his convert the multiple languages to support different languages in theory now coming back。And it just refreshed just expand his heading for an na and choose I end and this nice little。But I'm here and now you can see we should see ourselves out of item。And items these two put the type name andal and let's give a title also the title should come probably from my。S title for me in the he conceive about hein when its time to ADD nowions what selection fields you want so as for the requirement there are there is a need for two selection field when is company name and one is currency code so let's clickonla button。

I just choose an item。OK。I choose here as my first company so it's pulling the information from yourit did automatically let me also just use plus。Another item and that's gonna be my currency code。Over there and I want my labels so this item itself and I my item label。I can also ADD two tips if you wish to and heading whatever you like you can do that f and let's give some text okay so this one is my。What exactly I wanted it title for。My company name so I can just give you。Hetack X the that animran invent be used。

And this one covered mytroduction of AC subscribe to that code to understand the concept of I now I come here and。The company。And they？STEM。This'proper people don't comment on your code that your code is back there may I have to take some time but we have To Build things always。With the best in equalality delivery that's what majority of my training focus we always focus on following standard and also making sure that the quality of the code between generateer is is always the good because you always have this dilemma in your mind I'm doing including you following some Internet blog output will come but you are not sure whether that output the bay you got out to disc correct。

So this is something always you been in a dilemma。And that dilemma is now now solved with with proper extensive training and let's come back for the items now currency code and just at a label for as well just going to choose currency code。We are done and my fields are treat make sure that you save this when you make some change you would see a small star star over there on the top of the file that indicates they are unsad changes so make sure you click onceiveive all to save the changes of your file and now we are done let's come back and watch them magic earlier when we were loading the APP we were seeing nothing in the head or nothing in the table but now at least when I refresh let's see what happens system bres this annotation file and the fy element is so smart that it automatically fetches the information。

And then it is accordingly going to do stuff。So there you go you can see the company called the company selection field is coming up over here and right now you see this header info also since sort items with the of sales order which are getting display yeah so now let me just click on low go button right now there'are no column so of course because it'just a quickly a column。Just a couple of columns。So it's display something but I want this columns also To Be by default coming up here this is what I also want I want this columns to come by defa so how can we do that as well so let's do that so but oops I see my company name is there but with my another。

Fancy could it's not coming up right。That should come with just check that。Just have to make sure the part is correct and you there's a nice star here which indicates there are unsafe changes save。Let's come back and re replace the beach。You also see the currency code field on the head To Be very careful while usingos your fields。For the items and now is see both of my fields so that's the beauty of element zeronotation the fy element reads thenotation and they built accordingly let's go ahead now with lineonight meittation right now you see there are no columns in our table be're gonna get the columns now so how do we do that。Let's collapse them and now we'go with new one which is line。

And now with line I want to just ADD four columns four data fields three data fields four fields code。Cross out。And starts。Or use plus at the line item level。The potato fields are added so fast field I will ADD as a company court。Company the second I'm adding it as a。Cross a mountain。Aren't you choosing this one gross out which is that coming from the he and then I'm using another field as。Currency court。Or maybe I use the currency code and I'LL also use the status of the。

S order。Order status yeah so these are all the fields I have chosen and we are done take you can also change the order of the field suppose I want my currency code or order status before the currency code you can do that just select the field。And you can see this up button and down button you can move the fields and order up and down that's completely possible。Now you see unsafes all and。Magic happens here on the UI you would see four columns will be added as part of your smart table when you run your application once again with updated and rot can you see guys there are four columns the first company gross curency and auto status columns have been added already to to your table and now when I click on go button you will see the data popping up for all these。

B that's what we one amazing example this is exactly report the beauty of this APP is it automatically does the imagine in your typical ERP system when you use to write report and if there are twenty billion records your report will never work。Your report will never learn because there are twenty billion record it has to fetch but now in this case what is happening it is doing it doesn't load video in one shot just like YouTube what YouTube does when you play a YouTube video YouTube starts buffering it doesn't allow you to it for the entire video To Get buffer right you two doesn't do that you say hey you can start the video by the time I paramaly buffer that's exactly call teaching concept here。In YouTube it called streaming concept and here it is called beijingging concept in this it doesn't be it for all billion records To Get loaded it loads data chunk by chunk historical quickly show you that again covered in detail in my is Beijing and how to implement that and now you see when I scroll down。

A call is going to make automatically to the backing system with fetch the next set of records that's called pre concept and system does it beautifully for you it's loading the set of records automatically as user is cruing system is loading the chunk by chunk data automatically that's all teaching concept again details are covered in my UI Fi andfu reading this is just a DEMO video To Give you an idea what kind of capabilities this new technology is giving us。I want to do a factor so maybe I want to see all the orders for。And click on go button。A can see there are thirty six records for this particular customer with thirty six orders in differentrencies e canency currencies here it showing up the beauty of this reported adapt itself automatically if you don't put the currency code column system adapts it automatically watch out come back and for time being will just removed this color。

And I see my fight。And now I refresh out what happens now there is no currency column cannot display the currency to us。System is going To Going to create a link and in that links we are going to display the data for the currencency now you see since there are their different currencies in which orders are pleased you can see the company name comes at front of that show my link comes up and in that you see all the ordered sub totals in different currencies that system does autom so smart that it knows there are dead design different currencies so it got to convert it to a link。That'something with system does now coming back you have not written anyding anymore you can also for all the Euros and new orders in Euros。

You the orders so if you go sees working wrong。I think I'm not used the correct correct filter。So。The。It's getting all the amounts which has at least one item with burs because it's getting you the records the head records which has eo but the item record also may have different currencies because at the head level its currency converted amount so it's only getting you the items for which the head has the u s currency。OK so now what else we can do there's a lot you can do lots of annotation this is just an introduction so I'LL not go deep but yet you can always check the documentation onp Fi this applicationations andnotations so if you GOP Fi。

Include the documentation and so fornotations。On fine。Annotations working with why the complete details about all the annotations the part what the two voab basednotations。Vocabilities standard you have a vocabilities or vocabilities so all these details you can always see anotations for overview page which we can built in a minute you can see head data field all thesenotation details you can always find out a uf I is dig。But right now we'are not looking at documentation at this point。So you can see all this is mentioned well mentioned here about the documentation you can do a lot of valiations and stuff like that I want to show you another interesting feature。That feature is about now adding something called an order status they see right now it's just display order status as a usual order status I want to display with the ior yeah so what I do is I just go back to my serious and make a small modification to my serious I go to my composite view and here I say if the order is speed the students should be a critical。

It is is delivered period then is to delivered this criticality is not delivered it is new militaryture of the critical is high one and thated the red so that's my criticality code in my serious view which I added。And that's coming as a criticality column with the output and what I'm gonna do is I'm gonna go back。And my？E and here for my other status column I'm gonna ADD another critic card applications click。And just use criticality。And now here you choose。That the data for criticality is going come from my such as path andby critical。

It is coming from service to CAL click on save。Let's come back and refresh。That's a small change which I made to my serious view for critical calculation and now you would see that system is going to。Call that up。Let's see。It is going to load the data for us they can't go。But is still not showcasing what we expected to see maybe I just refresh my cash。RA air imp hardri。It should pick up the critical calculation and it should automaticallym issue was the criticality for this let's see。

As a threefresh the cache。To load the latest annot file so that's how you can ADD a critical calculation for any column which you want To Be in a different color and differentity。So let's see if it works。It takes a little bit of time in the meantime so first requirement is fulfilled it is addressed now can you also have annotations to control the bees hide everything you can control guys so gotta always go and check that what is that you can use to control the data field be data field hide the lots of lots of connot here。So you can have lot ofnoation navigation you can also the navigation if what should happen all these things can careful。For a given or of not is so much right now now I come back it's still not doing critical cardicical I did you should have done it for my order status let me just check。

What's not doing that so。Not sure have to check that。I should have done the criticalalculation for my order to its some cay issue that's why its not working but it it will actually work as。Now coming to the next requirement where we want to create our overview page which is more like an analytical application so here is a real down report where user can see for which company what order was placed what is a information what is a line items so that's something which which we can see it a drll it's a report but what about it my CEO wants to know what the recent top recent sales orders。Which were sold in my sales customer bought some see that information how can we achieve that that'for that something we could create something called and overview page again the same series can be can be used for that purpose with an irritation file so this time I'm going use。

The typical babyi rather than baby full stacks so we go back to the bodyi e itself。So I'm gonna search for BA party。MY。Becausel I was just checking it yesterday evening and it was working with wherebyry but not with wherebyry full starck full starck was having some issue with o b that's why I'm now sitting back to the websiteby to showcase the sea。Let's go back To Be byde。And。It let taking a little bit of time in the meantime let me take a question from here so deep is saying when we use at the rate u line item in serious view we just put that field and don't have to put divide data a field by this difference okay when we use at the RA UI line item in the serious view。

The serious view is then supplies the data data for rendering the UI。At that time this annotation file is not required that's why I told you when we started the session there are two options to create。These are two different options its your convenience your expertise which besides which option you will go with。If you'are going to put annotation in serious view with you line it which I didn't do right now you see it didn'do it here in that case you don't need an annotation file。But if you're not doing that then you need anrritation file in to tell the UI how the UI should do display so this is either or this either or this that's what you got To Go had been one of the option you can choose based on your convenience based on your choice of option since you are also in available on hundred developer you can always go with this option where we learned about metered extension with serious and your annoationions which we have used to create a smart with。

In this case we are not adopt。Coming back。I'm just gonna create an over。So let me create an a here now right click in my b。New。Put it from temple。And what I want is I want to choose yours。An overview beach。And I need it。Be。And as the onlineing start for。And I say。

He got。Who's the data sourceau。Give my credentials for my ASP system。Load my total serviced out of CS view。Click on。Select the annotation file don't choose the serious innotation。Click on。Choose the entity type。For giving the filter now how doesvie this is how an overview please like。You can see in this againvia sections the top most section of the OE page is called global filter。But it is called anyone would call b filter。

It is called b。Filter the topmost section and now in the bottom we have something called content area。This is called content area。This qua area includes cards epc。There are these types of cards at cards you can you can card alytical card can an analyt card table card can choose least card a sta card variety of cards he can choose from these cards so we will be adding here To Cards one will be that the most recent sales order card which will be more like a table like like this kind of card a table like card which is see one this one I want to ADD for most recent sales orders and then I want to also ADD a dashboard card like this。Maybe I will use a bar chart rather than a donor this is a donor chart I'm gonna use a bar chart so To Cards I want to ADD in the global filter I want to ADD company name as a filter。

So one filter is company name when I change the company eventually click called go but these charts will change automatically。So that's what we want so let's go ahead and achieve this。So we are choosing an entry and there's only one entry type here for football filter is the type for one series view which you have。So enable life filter which means the moment you change you don't click on go button it will automatically change your chart automatically。Maybe I'checker this up click onne。Finish。Now guys before you start the cards you must ADD a rotation file once again let me this APP it won't show you anything right now because there is no card inside。There's no card nothing inside so it's not gonna show you anything at this point of time。I'm gonna run this up。

Open the APP。So it's just trying to load up and now in the meantime I'LL starting for creatinging annotation second a you fold up。Let's create an int file。Its name it his annotation enough。And make sure that it has been linked also so good manifest。And you can see this innotation file is linked here I don't want serious irritation so I'm removing this line。He could also no and no problem。Now I'will go to annotation。Editor to start editing validation in the meantime。

The APP is trying to load here。It't anything empty because we don't have anynotation To Guide what to do this don't understand or don't know what to do theres no card here so we'ADD To Cards here。We also ADD a global filter on the company name and currency code I want two things or I want order status and company name。What are students and company I want these two things let's come back。Start adding irritation course of global filter as usual use selection field andnotation。And this election you now I'm gonna ADD。Two items。The first item is gonna be mine。Company code。Company name。A second item is gonna be order status。

Two things I'VE I。I can save this irritation and show you now by now Google filters will appear guys come back here if you will see two Google filters one will be the company and another will be the orders status so two global filterers should come up as part of your act now。A can you see guys two filters arecom company name and order status。Next we want to ADD a card so for that first we have tono so what we want is a table card so let's come back let's come back here are we gonna ADD annotation for line item to ADD table。嗯。Let's airline item。I'm just gonna ADD it field I only ADD three columns。Somebody had a fields as part of my life items。

To do that。And the first one is the company name I want。Second one is oneloss amount。I heard when I want secondency。That's it you can of course ADD labels if you wish to for the columns so let's do that。I can choose hardco string also。Another level。For second column。And currently。So these labels will appear。Now the beauty here is you can use same serious view to create multiple cards。

Right do you want to use same serious view to create multiple cards。I want to use same beautiful medical cards as a result of that texts the reason what I'LL do is I will go ahead and put something called line at a annot ID identifyier here qualier here just give some name you can give any name I will give and go。But she's going to help you guys because sometimes you want multiple table cards。How many system recognize how many different table cards you want。So you have To Give a qualified to each of the card to create each of the annotation so that corresponding annotation can create a card accordingly my first one given on I can click on now see。It getceived let's come back and ADD a card so right click on the new。I want to ADD a card。And now you can choose your variety of available cards。

Select a table card because I want a table card。And I can see next。And now？I can also just choose the reader source click click on。And now guys here we was the entity set。The moment you choose entity said you can see at below system is automatically picked up anotation part with hash deck and Google go the I identity fire it has already picked up let's give a title to the card I can see recent orders。Sales order items。We are done。Where is this card edit you can always see that in the manifestsration file just crawled down you can see a card has been added over here。Just in case if you don't want the card you can always come to manifest Jason and believe the corresponding card from here e。

Let's come back and look at my a once again when you。And just watch out guys what happens it's gonna show you a table card with all the line item data the top records probably well can you see guys how beautiful it looks a table card on your screen。I cannot change the company name。The picture。嗯。And you see it could filter up but if not something is wrong。Maybe spelling isre I just speak a。And I see it has got five out of five fifty four at the orders。I don't have any other company name to display right now。As you go as correct one you see it is built out in my card automatically all the recent orders for ael I want to see the other status based on order status I want to see the p ones。

Students。And you would see nows of I don't have。'filter I want another car which is a bar displaying all the sales companies I want sales companies how can we do that very easy。Annotation Rita and this time we can ADD another innotation called chart annotation for chararal plus。Chart here and now you can chart。I want a time To Be。

A barchart。Measures and you guys remember sometimes that I told whenever you want to create analytics or charts you have to always go with measures and dimensions so measures is what makes your y access and dimension is what makes youris so let's ADD a measure its always a new column typically so a measure item one。And this is gonna be of course my gross out。And then I can see measure attributes。You can ADD also as as much as much as as three measures suppose I want to show tax amount ne amount gosa measures on same card I can do that and that's why we can use multiple measures as well so now I want to just right now display the grass on and I just choose measure attribute types。Role and measure。So I will say on myx access one I want to see cross that's my measure one so you can ADD maximum three measures for poor analytical card。

That's why measure let's a dimension。ADD item for dimension。And now choose company name as。My dimension based company which would display the data dimension attributes of course。Can also have multiple dimension attributes。And I will go with dimension as my company name and choose it as a category not as a series。So what is series useful for series is used for let's say you have a band of values like I want to show how many people bought my courses based on age group so between fourteen to eighteen years within eighteen to twenty to twenty five twenty five to forty in this age group how many people bought people bought my course how do on that so that's actually a serious type of aggreg so now I choose category if you don't know anything about this blindly choose category as a dimension role and choose here。

Company name。And the yard done guys。Let's annotate this with also a qualifier the chart innovation and I will name it as overall。Let's click on see you。We are done and now what we're gonna do is we could ADD a card so right click new。Card。This time an analytical car。And the next。And now use your entity set。Givet title。And I see mys ash。Sales or customer？You can see guys it has automatically picked out a char onnotation of over here fire it has already picked out。

So if you have multiple chart chart multiple chart cards To Be added you can have such multiple annotations in your local annotation filed with their own qualifiers。That's all I want I don't want selection presentation where at this point and don't have it I'LL show you what is the purpose of this will'see later click on next。And I click on'finish。What happens now magic happens on the UI zero。Now come back refresh the PE and watch out what happens。System is going to show you。The sales data aggregated po customer that's what system is going doa can you see a sales dashboard on your screen poor customer it showing you the sales that are wow what amazing stuff guys thanks to SAP o BB this is the kind of applications you can really build with saps foran。

With series views also if you're a native a seven point five doesn't matter whether you're nest or or not can actually build this application with furu X that's the power of serious and annotation based fury application。A kill combination you will become an end to sta that's why I recommend if you have no clue what am I talking if you guys are very confused what is happening around you what people are doing what you supposed to do where To Get started I would recommend。I would recommend a clear direction to all of you you must go and start blindly with this one even you are a bad developer doesnt matter this is the first course you should begin with move to thenone hamer and finally to with my abiur once security in period once traininging these three courses you must complete your next ten years of career is set。The next ten years of your career is set because every every ten year technology changes next ten years this technology is going last you could going To Become a full stack developer。

This is what my recommendation learning parts for all of you blindly get started with this don't think me a better to attorney don't worry for a or these courses are designed if you just know Co back more than a enough for me thats it I don't need anything else even for the first course about itself is not required。No above knowledge required for four course yes here a little bit of a BA knowledge required about thirty forty percent again for serious and m BP you don't need an a concept here。And then finally this one which is more advanced still you have aet to learn you can go with native development with accesss advance and access architecture with micro services and honard department infrastructure completelyvaor application using no JS and exce GS with excess oit and analytical views。Okay coming back。

Now what I want I want to sort I want to sort highest so salesal on the first with showing a kind of pattern va high sales low sales high sales loses I want to sort the data I want to fetch and display this chart where it should first tack my high sales customer beginning it should basically sought in in descent order yeah that's what I want in my chart so for that reason go with some presentation if you come downund you can see right now there's a card created I delete this card。Right now I delete this card I'm it once again and I gopa to innotation and this time I'm going use another innotation called presentation vem so let's do that trickled glass。And lawi presentation。And I give some name I will also give the name as。But order。

And I just used so by。To the type。And now here I choose。Sort a based on property gross out I'only saw the sales orders。And then I want to do desending。It was too true。And you can also go by a lot of things you can do visualization different coloring you can see you wish to there's a lot you can do。And again choose analy and the next once again and ch he said and just give some title。Who of you？Sales by company。And now you can see guys presentation automatically picked up as chart order and on tops with up oroy as my chart rotation click on next and finish we have done congratulations now this time you see when you look at the data it will be sorted so let's come back to manyif first the scroll down you see the card has been added order also and this type of presentation and rotation path is also end here。

Wellan let's come back and run this application once again last time we were seeing the cards。Car with with any order and now shell show the sales order with descending amount。Order amount will been descending out well you see it now showing you the s order here that the s order which is highest you see this Brazil technology which has given you the highest revenue。Now it's also very clumsy it's bringing all the customers I don't want that I want only five customers for three or four customers we can also control that come back and。Con annotation。

And now you see some annotation must be there in presenttation period again。Just presentation and we should see I should be the try。You can save come back refresh the page and watch out what happens is show you only the tough and with a tough for selling buying customers for your company oops it's not working with cash issued express actual。And refresh CA and hardlylo once again did I forgot to save it let me go back and check no I save it oops there's a problem you see heres just you didn't save properly given forion and unsa。It doesn'save you just click on the sea button here on the top it will save properly。Come back and refresh once again。Watch out more happens now it will organize the top selling a top buying customer for your company in the first and it's only going to show you the tough for customer rather than it just feeding it with lots of data with user content the sta。

So let's see finally what exactly happens here。It's loading my k p of course the filter will also work accordingly。Based on your knees。So can ADD variety of charts donughor chart line charts stack chart stack column chart heat maps variety of charts available and well now you see guys only tough four selling customers with their revenues are being displayed in the in the chart so that's the power of innotation file again I repeat all of this can be controlled with seriousnotation so in the serious you got company and with serious you got probably choose younotations here in the radionotations。You can see or the lineation or the selectionation or everything you can all with previous is a an option covered by course please subscribehanna course toten basedationted data extensions again and choose the option which you wish to choose its your choice you liking disliking present what your comfortable might be is to teach you everything and also give you the best practice about what we wish to。

Together with that suppose I want to ADD another another so I want to also ADD with the cross amount and amount so I'm just do that's very easy because this was one question you guys asked me this'now I'm just going to come back here and my。Chatter nottation I'm gonna ADD another measure。And this time it's gonna be。Let on To Beham let on。

We don't have it out here。Sorry we don't have let amount otherwise I would that and that would also come as part of your data guys so I don't have that。At this point so I can't demonstrate maybe I just enhance my serious don't worry we can do that so can come across out and I'LL always this ne。Just and as they don't worry let me to that。Just activate this。Let's come back on the top and here we have。Chs also also forget。Okay we got na out now come back。I'm gonna create another al together I don't want torupt anything here so let's create another chart。

And choose a different qualifier and I say grass that's the name I'm。And a type is gonna be this time of butcher maybe I want。Sta chart。Bote。嗯嗯。And I two items。One will be the cross one will be the night amount。Did we got the net out here now。I don't that I refresh I refresh let's save。And just refresh。There has To Be an option actually in ver full sta we have an option to there me editator。Yet we don't have that。When option in my start to refresh me we don't have that here just gotta reinfreed his end。

So we could ADD the net amount as anotherxis so why access there will be To Charts two two bars actually so this time I'm using a stack one so it's gonna see a single bar with with the net amount and the gross of the same bar that's what is exactly going to happen happen over there。So just come back。Nanoations。And just。Change this。You have an error。Of course we have To Give another measure and now you have the data out in here measure attributes。Just ADD both the measure attributes。With your rule and measure。

Gras a Mo。Andmo。Is thisis one and this is gonna be access to。Now let's ADD the dimension as company itself。嗯。Doing little faster。Just for time again。Company。Hit the category。Then let's save this up and had a card。This time we have named it some differententif its gross。The show you that not option new car。An analytical card。And I'm gonna just choose your ENT said once again。

VI it is a stack。Card。Ne wass。Cross sales。And now he received I rotation part as char order。That what is and next finished the doneise watch out now on the screen it will get you in another card be the staard net amounted gros among two different ais on the same level。So maximum three measures you can ADD together on a car。And now it's going to load that up。And not display anything something is wrong。So'too much of data system is some time。In the meantime let me read the questions here。

Don't we have to reload the meter data from that's what we'VE done we don't have to load from back and actually just have to refresh the website ID。OK selection all rotation it means selecting particular record is it optional to use the selection period is actually for。This selection field vaariant so if you want to defult a value with company codev here you want to default some value you can use selection presentation VAT it's optional yeah it's optional just like we use presentation variant To Give a presentation variant to over chart card similarly you can use the for the filters the selection presentation variant how you want it To Be displayed for that purpose you can use。If you want To Be for less requirement is to default company code to s or do you do that。Something you can do taking a lot of time because nowadays it has to fetch the net amount also is taking huge time because so much of data system has to do aggrerrigation upon。

So let's wait for it to load I'LL pause the recording。So I hope you guys have got some idea about how to create applications which are smart filter list report application and is smart o VP application theres there are two more other types of applications which works well pretty well in fact there are three more so one is the keypi t with EP and I made a atics which is what we have seen in the last last class。If he have attended my last session I have covered there。It is also another called lp frame of。This also another wave this part of ebohanna embded analytics and there is this third one called alytical list page al p also depends on anoation stay tuned for a YouTube channel to subscribe this channel To Get more amazinging videos like this do you think this video is helping please share this video takess and friends please do give me likes it helps me To Get more and more videos like this for you on the YouTube channel thank you so muchable signing out have a nice day and goodbye。