Learn SAP UI5 Data Binding | Fiori | Full Course for Beginners [Tutorial]

right in this full ui5 course you are going to learn everything you need to know to get started with data binding and if you are new to ui5 then i would highly recommend you take a look at my channel here and take a look at the video called learn sap ui5 in five hours here is um a full walk through based on the sap ui5 documentation walkthrough which will help anyone who's a beginner get to grips with the basic concepts in ui5 so if you're new to ui5 data binding it can be a bit complex and some of the topics we'll talk about we'll get into quite a bit of detail if you have no knowledge of ui5 i would highly recommend you take a look at this course we'll be looking at data binding as i said in quite a bit of detail and we'll run through important topics like aggregation binding formatters data types and things like expression binding which i am a particularly big fan of so pretty much all the tools that you'll need to build the best possible ui five applications we are going to follow the ui5 walkthrough and the data binding and we're going to run through all 15 steps here and i'm going to take you through them in detail as we go along as we complete each step i will have it referenced in a commit inside my git repository so that you can come here and pull the code exactly as i've written it and has exactly exactly how it's been recorded on the video and you can start from any step that you want so if you decide you want to start from step 10 you just jump into step 10 and you can browse the files and you can simply download the code um and go from there if you want um and we will eventually come out with an application that looks like this and obviously there's a whole bunch of functionality that we'll have that you can use in your day-to-day projects i'm going to be running through the examples from my local machine using visual studio code so your project will eventually come out and look like this to run and test the examples i'll be using the ui5 cli and nodejs which is how we will run our local server on our local machine you can follow along on your local machine and your local web id or your local ide of choice or you can use something like the sap web ide um it's completely up to you and uh one final thing is um in all of my courses i purposely make many many many mistakes and you'll see me in many examples pull up the chrome console to try and debug and figure out what's gone wrong those are those mistakes or at least most of them are there on purpose to um just um add a slight an extra layer of um sort of learning to help you guys see and understand how another developer might look at or approach a problem you might do it better or you might learn something that's the best part it's all about learning by doing so i've left those mistakes in there so again as well if you wind up making a ton of mistakes that is the that is the purpose of learning and hopefully we can learn together so um yeah let's jump right in right so before we get started we need to set up our application structure and to do that we are going to start with the ui5 cli and the first thing we're going to do is run npm in it and run yes with um all the options and that gives us our package.json file which is good and well now we need to run now we need to create our ui5.yaml file using the command ui5 in it and all right so i forgot to create the web app folder first so uh we need to add our web app folder here and then we can run this ui five in it again brilliant there is our ui5 dot yaml file now what we need to do is we need to create our manifest.json file and that should go inside the web app folder itself and i'll have a link to this in the description for a um sort of the subset of information that you need just to get started i'm just going to copy it across from the documentation brilliant so that's just a bit of boilerplate stuff we have in our manifest we can go ahead and save that and the last thing we need to do is um we need to tell sap the sap ui5 we need to tell the app which ui5 library we want to use so we are going to again use the cli and we're going to say ui5 use sap ui5 because we want to use the sap ui5 library specifically and we want the latest version and let that run brilliant so now we can get started with step one right now in step one we are going to set up a basic html page with an index.js file to go along with it and we're going to use that to display a hard-coded text control which will form the base of what we're doing with absolutely no data binding yet so let's go ahead and create a new index.html file underneath our web app folder and under there i'm just going to copy across the html directly from the sap documentation and the only thing we need to do is just change the source and the source is going to come from the open ui5 content delivery network um and that's just going to allow us to pull all of our data uh from there rather all the sap y libraries and controls et cetera um and because this is just a a demo uh slash tutorial uh or course um we're just gonna use this for now you wouldn't normally use this with your production apps for performance reasons and and all of that so now that we have that we can go ahead and save and now let's go ahead and create the hard-coded text control in our index.js file so let's create index.js and let's open up our require sap dot oops sap dot ui dot require and let's pull in our sap slash aim slash text control from the sap.m library and once we have that we can go ahead and open up our function passing in that text control all that text part of the library and then we can go ahead and run our function so first i'm going to do is put use strict to run the strict check and control over our javascript and now what we're going to do is we're going to attach an anonymous function to the sap ui5 init event and to do that we're going to use sap.ui.getcore now it's important to note with this that when you use this you attach and use the items directly on the core itself which is not obviously how you would do your production apps when you run your production apps for example um you would run something like this dot get view dot set or get model uh etc etc and so this is view specific running off the context which is what this sort of is um so um the other reason we're using accept.ui.getcore is because the documentation that we are using as the backbone for this course uh uses this and i think it's just to illustrate the point um and to focus rather on the actual models and then how to create them and use them etc etc and data binding uh itself so uh just bear in mind that um you'll see ui.get called throughout the course don't use this in your production apps rather focus on your view specific logic based on whatever controller you're in um so that's obviously an important distinction to make so um we're going to now attach call the attach in it whoops i need my dot to the attach init uh event and we're going to call a function within which we create a text ui element that displays a hard coded text string and to do that we are going to call new text new text control and we're going to pass the attribute the text attribute and we're just going to say hi my name is john for example yeah but you can just put your own name in there and once we've got that we need to place at i think we called it content but let's go and check so obviously we're creating our new text control and placing it at the content which is the id of our body here in the html file itself um so that's perfect so we can go ahead and save and let's have a look and see if our text our hard-coded text comes up and to do that we are going to use our ui5 cli and type ui5 serve oops ur5 serve rather and that should run our little local server perfect so let's go and take a look at our app and we're going to run index.html and here is our hard-coded text right in step two we are going to move on to actually creating our model and your model can come in a whole bunch of flavors you can have it in json format xml format odata format you also get something called a resource model which sits in an i18n file which in the case of ui5 is used to create text that can be easily translated across your ui so you have quite a bit to to work with you also have two types of models you have your client side and server side so client side um could be in our case it'll be a json format model that we will do one call for on the client side and it'll load uh pretty much all of our data and make the entirety of that model available to us service out model is something like odata where you can get and post uh different information but that primarily the logic primarily happens on the server um so you would get let's say a subset of data when you initially load the app make some changes to it send it back to the server the server would perform some logic and then give you back some data to display to the user so all of your hard work happens on on the server side so yeah we let's go ahead and jump into it and i'll explain the um the core further on once we've actually um added it in so underneath the same um in it function that we've now got off the um the ui5 core uh we are going to create a model and then we're going to assign it to the core so um i'll explain that in a second but let's just put some code down first create a json model from an object literal and so we're just simply going to create a model like this we create a variable called var o model and that is going to equal oh before we do that we need to bring in the json model module up here so that's going to come from sap slash eui slash model slash json slash json model and we are going to bring that into our function here and now that we have this json model here we're just going to say new json model and open that up and we are going to just have something called greeting text and that's going to be this same text that we had here and that's fine so now that we have that model created so now we have our json model object with this data inside of it we now need to assign the model to the core itself so uh let's assign the model uh object to the sap ui5 core and again just like we did in the last sip sap dot ui dot get call dot sit model and now we pass in this model object and so um now that we've bounded to the call the reason that the documentation does it this way is purely for simplicity so what would happen here is just like we talked about in the last step if you were doing this from a view perspective which is technically best practice to have your your business data for that specific view obviously bound to that view itself you would do something like this git view dot set model and you would pass in your model object like that so in your production apps this is this is what you'll have to set the model to that specific view because the data in that model will most likely be relevant to that view only in most cases so this and this are doing the same thing except this model is now available pretty much anywhere in the application but that being said that is obviously not recommended and not best practice because it's it's not sort of compartmentalizing things um you know and things are not on a need to know basis if that makes sense so um again when it comes to best practice we're not going to worry about that now to stick with the sap documentation we're going to use the scepter geoattack git core and we're going to sit and get our model etc and do the binding using that method so it's it's an important distinction to know that this is purely for training purposes and not what you should be doing in a production app i cannot stress that enough so we're going to go ahead and save and that's it you'll see that in the application there's no change because we are going to deal with that um and start our binding in a in a step further on down the line right now in step three we are going to create a property binding and we're going to take the model from the previous step step 2 and we're going to display that data in our text control so let's go ahead and scroll down to our text control here and we are going to remove all of this and let's create a new comment that says display a text element whose text is derived from the model object which is what we're going to be doing and all we're doing now is in this little text section here we are going to replace this with curly brackets and inside the curly brackets we are going to call our greeting text and the greeting text is going to come from here and the reason we can do that is because the model has been set and is available to us and because we've set it in the um on top of the core itself it means we can effectively just call it straight away like this um which is fine for demo purposes but will obviously change as we as we move along so if i go ahead and save that let's check if it is working and if we refresh the page right something has gone wrong let's check the console i think i have made a small spelling hence why it is not working so if we go ahead and save that and jump back into our page refresh we can see we have the same text that we had before and now it's pulling specifically from this model here now we move on to step four where we look at two-way data binding and so what we're going to do is we are going to adjust our model uh to include a few more a few more values um and a bit more data and what that data is going to do is um what we're going to allow to do is to tie into a newly created view and a newly created control including the um like sap m inputs for example and what we're going to do is we're going to bind them to uh certain parts of that control so that when we interact with it on the front end something happens um on the client side that kind of illustrates what happens when data changes and how we can start controlling the user interface based on the model itself um so what we're going to do first is we're going to create a new view and to do that we need to create a new folder underneath web app called view and under there we need to create something called app or a view called app rather dot view dot xml because we're using an xml view then under here i'm going to open up my mvc tag and call my view and under here xml in s and we're going to bring in our sap.m library and now we're going to um if you've gone through the initial full walkthrough which is another video on this channel um you'll see we would have only dealt with the set.m library now we're going to use an alias and we're going to add more libraries in and to do that we're going to go xmlns and we're going to give this an alias of form and this is going to be from the sap.ui.layout.form library form and then we're going to bring in our mvc artifacts as well oops i forgot my equal sign so now we call xmlns mvc so this is standard standard artifacts that we need to bring in to allow our view to work properly within the realms of ui5 and this is sap.ui.com perfect so we can close off that and let's just close off our mvc view as well mvc brilliant so now that we've set up our view uh let's go ahead and add our panel a panel control rather and um now that we've got the panel here we're going to assign the header text attribute to a value from our model which will make sense shortly but i'm going to add it in here so that we can refer to it in a second and so in here we're going to call something called the panel header text and the rest of the attributes are going to be uh class let's just shift that across whoops and we're just going to call our standard uh ui5 class sep dot ui oops except ui responsive if i can spell properly zap ui responsive um margin the width we're going to have as auto so just standard attributes here um and i think that's fine so we can close off our panel [Applause] so now that we have our panel we are going to call the form from the uh form library um and so that and to do that we need to add the form alias first and call the simple form and give it an attribute of editable and what's uh it's going to make sense in a minute but um let's just set this to true so editable true and we're just going to give it a layout um of column layout brilliant so the uh this just decides whether it's editable or not um and also controls the sort of size of your um controls and this is just a type of layout pretty pretty straightforward so let's just close off this simple form lovely and now let's just straighten that okay that's straight enough now within the simple form we are going to have three labels and inputs and the first one is going to be label with a text attribute of first name oops first name and we can close that off like that then next to the label we want to add an input control just like we would in a normal form so input and we're going to set the value of this input to pull directly from the model and oops that needs to be the quotes need to be on the outside and we're going to call the first name value from our model and we can go ahead and close that off but let's add a few more attributes so the first one is value live update equals true and so this allows the value to be updated in real time within the application itself and we'll just set a width to 200 pixels fine and now where we start to see the the two-way data binding come through is we set enabled the attribute enabled to let's put that in quotes um to enabled now this enabled um value is also going to be in our model and so when we toggle the um the eventually we're going to add a checkbox and when we toggle that checkbox on and off this value is going to change and it's going to determine whether this entire input is enabled or not so i'm going to just be a bit cheeky here and copy and paste the second one and this is just going to be last name so we're just adding another field here and add last name here value live update 2 etc etc brilliant and now we need to add one more except now we're going to have a label oops just open that control properly label and the text is going to equal enabled so it's it's just going to be called that now we're going to add another control the check box and inside that check box we're going to add the attribute selected and that is going to also be attached to be bound to our model from the enabled part of the model now if we close that off save just close that off double check everything's fine it looks good um so now that we've saved that let's jump back into our index.js underneath our model let's add a few more or less change it rather to include the first name and that's going to be let's just say harry but this can be whatever your name is [Applause] next we're going to have last name and that is set to hawk i'm just going with the example here and we're going to set enabled and that's going to be set as a boolean which doesn't need quotes and now we're going to add the panel header text and set that to data binding basics and we're going to go ahead and say that so according to our view which we'll deal with in a second we've got our first name our last name our panel header text these are all from the model and we've got our enabled um value here which is also bound to this part of these particular input controls so we'll see that interaction in a minute so now we need to remove this so again we've set our model to the core so that's all fine now let's go ahead and display the xml view which we called app app.view called app and all we're going to do is set new oh uh i almost forgot uh we need to bring in the xml view module here so we can display that so it's sap dot ui dot core dot mvc oh these need to be slashes my apologies sap dot ui dot core a slash course slash nvc slash xml view and we need to bring that into our constructor here and now at the bottom we can go new xml view and oops add our attributes here and we're going to call our view name and set that to sap.ui.demo.db.view.app and we are going to place at content just like we did before in our html page and let's go ahead and save that now let's see if it works and if we refresh the page right we've seen to run into an issue so let's have a look um in our console [Music] ah okay naming convention so um just like we did in the full walkthrough video which will be linked in the description um in the index.html we need to add something called uh data dash um sap ui dash resource roots resource routes and there we need to add we basically need to add a name space where our root folder will come from and to stick with the um the walkthrough so that when you download the code it'll you know obviously you can you can refer back to it um i'm going to use the sap.ui.demo.db which is what they've used and i've just copied it across to make sure i've matched it exactly but when you call this namespace here it's going to effectively pull you to this home folder so if you watch the full walkthrough that'll obviously be explained in more detail but just so you know that's something we need to add at this step which we didn't in previous ones so that means that this should now work and it should access our view and then our view folder which is here and then our appview.xml so let's just make sure that that's saved saved and let's go back to our application and refresh fine we've got another issue ah okay it looks like we've got an xml issue which will come up quite often when you're retyping out your own xml which i'd recommend you do just so you get used to things so back to the code if we have a look at our xml that looks fine label ah there should be a um quote symbol i mean a colon there um i think that was the issue let's refresh and see there we go so um we've now got our model bound to these different input controls and you can see enable the set which means that these inputs are active or enabled now if we had to untick that they're no longer enabled and that's because we bound them to the input control and the enabled attribute directly to the model um and so you can switch it back on and you could type again which is a very very useful concept and something that you will find you'll use in your production apps quite often to keep things very tidy now in step 5 or section 5 we are going to switch off two-way data binding and we are going to turn on one-way data binding and all that means is um if you set your model to be one way to have or use one-way data binding it just means that when you pull that information from the source and into your model that's it it's the data is there and it and it's going to be displayed and dealt with in your app and there will be no communication back to the actual source itself so the flow of information happens one way two-way data binding it can flow both ways um so in this case we are going to just simply turn it off so now that we have so you would have your model here and all we would do to set the binding set whether it's one or two-way the binding mode whether it's one way or two-way is we would call our model and we would call set default set default binding mode and we would call binding mode oh apologies before we include binding mode we need to bring it in as well our module so again calling in um sap slash ui oops that should be in quotes sap ui um model binding mode so now we're bringing that in and bring it into our constructor here perfect so now we can use it so set uh o model which is our model app which is our model object here set default binding mode and we pass it in binding mode one way and we go ahead and save and now if we um go back into our application and refresh we switched it off and so nothing happened so um you would obviously use this under certain circumstances whatever they may be but it's nice to know that if you have a model that you set to two-way bound to be to include two-way binding you can switch it off very very easily depending on the functionality of your application at the time right in step 6 we are going to look at resource models specifically and in sap ui 5 a resource model is where we are going to store language specific texts in a separate i18n file which we then build a resource model on top of and we do that so that we can um translate text back and forth fairly easily depending on your locale with uh different files so um in the previous example we stored things like our label texts here and also our bits and pieces directly in the model we're now going to replace those with our language specific text from the i18n file and obviously that is because the storing it in a resource model or resource bundle is a best practice for sap and the way we've done it is not necessarily best practice and so um depending on the locale your labels and and various texts on the ui will change which is obviously um very useful so let's go ahead and get started and the first thing we're going to do is we're going to run into our index.js file and we are going to create our resource model so underneath our model here we are going to create a new variable called o resource model oh and before i forget we need to bring in our resource model module up here so this comes from sap slash ui slash model slash resource model and we need to take that and pop it in here brilliant so we can access that so we've got our variable for our resource model and that is going to be a new resource model and we're going to reference the bundle name and the bundle name is going to come from cp.ui.demo.db dot i18n dot i 18 in and so we're going to create our r18n folder and eventually create our i18n.properties file we'll do that shortly but that's obviously where it's coming from and the next thing we need to do is we need to add our supported oops supported locales we just need to add the camera in there supported locales and in here we're gonna have our default one and we're gonna have one for uh germany or uh deutsch and we need to tell it to use the fullback locale as our default brilliant so we've got our resource model here with our bundle which will come from this i18n file under the i18n folder and obviously the i18n file we've got local supported a default one or blank and then a german one and we're telling it that the fallback local must be the default one or the empty one and now what we need to do is we need to assign this model to the call sap dot ui dot get call so just like we did with the other one dot set model a resource model and now we're going to give it an alias of i18n so we're passing in the model to the set model method and we're passing an alias so we're going to call it or in our xml for example we're going to use i18n as the name of this particular model so that's all fine um and we're just going to turn off this default binding for now so it sets it back to two ways brilliant so that's sorted now let's create our i18n folder so under web app we are going to create an i18n folder and under that we're going to create a file called i18n dot properties brilliant and now in here we're going to start off with our field labels and we've got first name and we'll set that to first name oops name last name and we'll set that to last name and enabled will be set to enabled and we'll just add our screen title as well screen titles panel header text and that will be data binding basics basics yeah basics brilliant so here's our i18n file and these are what we're going to use to reference the you know to pull in these properly set titles now let's jump into our let's save that first jump into our view and the first thing we're going to do is we're going to find our panel header text up here and instead of using the slash like we would do for a normal model we're going to go i 18n and greater than sign and that is how you reference your resource bundle specifically so this greater than symbol is specific to the i18n file and so this will pull up panel header text and display data binding basics and then let's change the rest of our labels so this one will be i 18n and first name and we'll jump down to our next label here and set that to i18n last name and at the bottom here we'll find our last label and set that to i18n uh i think it was enabled let's just check yeah enabled last name first name oops and we've got i18n first name i18n last name and i18n enabled so if we go ahead and save these properties should now pull through correctly and our form going to actually change which we're expecting so let's go have a look refresh the page right it seems we have a small issue let's check the console the resource model js has failed to load so let's go check our index.js file ah i found the issue it's resource slash resource model sorry i was missing this part over here uh let's save that and take another look and see here we go we're back to normal so data binding basics first name last name and enabled all coming from and obviously i've turned the two-way binding back on again all coming directly from our i18n file right in step 7 which is optional but we are going to go through it anyway we are going to look at how the resource bundle can be used to display the different texts that we've got in our app view xml here our xml view so that when you for example open up your browser and let's say another browser like firefox in german with your default language being german you can actually get these to change automatically by just effectively having a second i18n properties file and so we are going to do that and all that's going to happen is um this resource model has got its supported locales here and it's full back locale here but it's supported one is going to be d e and so we are then obviously going to reference the german language version so to do that we are going to create a new file under i18n and we're going to call it i 18n underscore d e dot properties and in here we are going to add our field labels and our first oops first name which obviously needs to match the other one is going to be for an arm and last oops last name going to be and enabled is going to be activate a k t i t-i-v-i-e-r-t and our screen title is going to be panel header text and in german that would be called data binding ground lagen gundlargen and we can go ahead and save that so now we have this file available here and this underscore de is going to be referenced over here so let's go ahead and pop into the browser and if we go ahead and refresh the page you can see that and this will obviously be browser dependent but you can add either whatever language you want i've just included german here and if you switch to german instantly it changes which can be incredibly useful when you're building apps um across an organization that operates in multiple countries so um yeah it's just as easy as specifying a new i18n properties file for your particular language now in step 8 we are going to look at our binding paths and specifically we're going to look at accessing properties in a hierarchical or hierarchically structured model and all that means is when we access this model here which is true for our i18n properties there it's flat so it's basically one level and you just access each um attribute as you go along now what we're going to do is we're going to add some more data in the form of an address but we're going to structure it in a way that means we have to go one level down the hierarchy structure and when it comes to json models and odata models um it's almost always the data you get back is almost always in some form of a hierarchical structure and organized in some sort of fashion especially when it comes to header and item views and that sort of thing so um we are going to add some address details and then we're going to display it in a separate panel underneath our current form so let's go ahead and just under our section here we're going to add or just under our model we're going to add an address and the address object is going to have street and we're just going to say one any lane so you can just make this up as you go and as you go along city um old off waldorf how you pronounce it zip code 69190 and country oops germany so now that we've got this data in you can see our um initial structure looks like this then we hit our address which goes one level down into our street city zip country et cetera et cetera and we need to just put a comma there so this whole item is actually an object so we go ahead and save that now we are going to lay this out in our uh where is it our app view so now that we're in our app view we're going to come to the end of our panel and we're going to create another panel and let's close that off panel [Applause] and here we are going to add um some stuff from our i18n file so first we're going to give it a header text attribute and that's going to come from our i18n file greater than symbol panel 2 header text and let's go ahead and add that to both of our i18n files so we're going to put this here and that's going to be um address details and let's while we're here to make it more clear call this panel one and go back to our view here and make sure we label this as panel one so it's clearly separated and let's go ahead and add a few more oh sorry we forgot to add it to the um the german one as well so the german one will be um oops oops it's 1d address details can you save that save that back to our view so now within our panel uh control let's add a few more um attributes we're going to call the class sap ui responsive margin all around and we're going to set the width to auto perfect now underneath our panel we need to add our next control which is obviously specific to the panel and it's called content and let's just close that off brilliant now that we're in here we need to bring in um a new um control a new library from sap and that is called xmlns sap.ui.layout.form and we're giving it okay so we'll change this as well so what we'll do is because we are going to pull the um we're going to pull from a different library we're going to change this a little bit and this is going to be called so we're going to have this set as l for layout and then our form we're going to change the library to sap dot ui dot layout oops dot form and let's just put that in quotes okay so we've got our form coming from our layout form here and then we've got our layout coming from our ui layout um library here so that's fine we can save that um now what we need to do oops i need to change that to equals so now that we're in our content we're going to call our new layout library for this new control and we are going to call the vertical layout and let's just close this off oops perfect so now within our vertical layout we're going to add a label and we're going to add the address details as well so let's go ahead and add our label and it's the label for the address and the text is going to come from our i 18n and it's going to be the address so let's go ahead and add this in and that's just going to be address and now we had it in the german one as well and it's just adr esse perfect so we can save that save that back to our view so we've got our label for and text there um and we just are going to add um this at the end so now we've closed off our label here so um it should now just say address semicolon and that's perfect now underneath that we are going oops we're going to add a control called formatted [Applause] and add a control called formatted text text and we are going to give that a class sep ui small margin at the bottom so we can have a small margin at the bottom and we are going to have html text equals so again um all of these attributes are just from the documentation so when you look for um in the sap ui5 sdk you'll find formatted text and all these attributes will be here so you don't have to learn this from memory you would find these and use these in different parts of your application so html text is now going to be oops close that off we're going to reference our address section and our street so just like we would have referenced up here first name on the same level as first name is address and then one level down is street um and it's so you can see we've just like we found first name we find address and street is one level down so we add that and then we can add a line break here and oops i've got that in the wrong spot and we're going to call a ddress zip code and we're going to call that we're going to call address city another line break and after that we are going to call country and we're going to give this the id of address to link it up oops so obviously this label here is linking up with this id here of this formatted text and underneath that we've got width of let's just say 200 pixels perfect close that off and that's it so now um just underneath our first panel second panel with its header text content in a vertical layout with our label labeling this formatted text which has all of our nested data from our model referenced through the address and then obviously the street zip city country etc now if we go ahead and save that let's see what it looks like hmm all right it seems there's an issue somewhere along the line so let's check the console okay it looks like an issue with our xml let's go back and check that um okay so vertical layout fine label formatted text uh okay so the issue is probably with these um html line break um items here so for some reason um and you'll find this with the ampersand symbol as well when you do expression binding uh you need to um you need to express the um less than symbol or the ampersand symbol in a slightly different way uh so what we're going to have to do here is going to look like this it's going to be and lt like that and this is going to be ampersand gt and all this stands for is the less than symbol which is effectively that and then this stands for the greater than symbol gt so every now and then within these sort of when you do expression binding and this sort of thing um you will have to show these symbols like the ampersand and the greater and less than symbol a bit differently so it looks complicated but obviously once you get used to it it's not too bad it's just up to you i5 on how they interpret these particular things so we're at their mercy unfortunately so that should fix it let's go and take a look and refresh there we go so it's working so that was the problem so now we have address details our address here one in elaine this in waldorf in germany so now on uh in section nine or step nine we are going to look at formatting values and what we're going to do is in our application we're going to have a little email link at the bottom here that automatically formats itself to send an email based on the user's first and last name and obviously as you change that so the email will change and it creates a bit of automation there so to do that we're going to need to use a formatter function and we are going to add that in a controller for this app view so we're going to have an app controller as well and then we're going to add some more details to our i18n file so let's go ahead and create our controller and to do that we need to create a new folder called controller in the web app folder and we need to create create a new controller file called app dot controller dot j s lovely and now we are going to call samp.ui.define sap dot ui dot define and we're gonna open that up and we need to bring in two modules the first one is our controller sap ui core mvc controller and the second one is from the sap dot m library specifically called library and that's zap slash m slash library now that we have that we can call our constructor and add in the let's just copy it so that it's correct controller and library brilliant now we need to use strict as always and as in any controller we are going to return controller.extend cp.ui.demo controller.app referencing our controller and now we can go ahead and create our formatter function and we're going to call it format mail and that's going to be a function that pulls in the s first name and s last name and now we are going to get our resource bundle and save it as a variable and so we're going to grab that by calling this dot get view so if you remember we are now um calling the this dot get view get model but before we were calling the ui.getcore obviously now we're doing a similar thing but we're doing it view specific because now we have a controller and a view with logic specific to that particular controller in view which is obviously best practice anyway we're not going to change anything else we're going to get our model which is i18n and from that we're going to get resource bundle brilliant now that we have that um we are going to for uh for this format function we're going to return mobile library oh apologies this should be mobile library like that and mobile library and we're going to return url helper dot normalize email which is from obviously from the mobile library api your url helper api and we are going to pass in the s first name and we're going to put a dot and we're going to say so obviously this is first name dot is lost name plus at example.com but this could obviously be at sap.com or whatever your email address is and now we're going to grab the old bundle and we want to get the specific text for male subject and s first name and we want to get the text for the mail body oh bundle and get text mail body and that's that oops that goes down here [Applause] so we're going to return our mobile library with our url helper and we're going to normalize the email passing in our email address built with the first name last name at example.com passing in the mail subject with uh the first name here and we're getting the text specifically from the um our little resource bundle and um whoops forgot my dot there and we've got get text for the mail body so now we're passing in the mail body and that's how we're putting the mail together effectively so we can go ahead and save that now in our view we need to reference our controller and we do that by referencing the controller name and passing in the location which is septetui.demo.tb dot controller dot because it's our app controller we can save that and now if we scroll down uh so just underneath our um formatted text we're going to add a new control uh called the link control and it's going to have a attribute h riff which will be which will be the following we'll have the parts whoops and we'll have first name which we're now passing into which will pass into the formatter um and obviously first name is now coming from our model specifically the top layer or top level of our model and we're passing last name and we're going to reference the formatter which is that formatter function in our controller and that's going to be format mail which is here so that's our formatter and once you've done that the text attribute will be i 18n send email now let's go ahead and update our i18n file and make sure that's saved so under here we're going to have our little email section and we've got send email which will be send email and we've got the mail subject which is going to equal heim and we're passing in a parameter here that's what this parameter is so if you wanted to add another parameter it would look like that but we only have one parameter for now and mail body equals how are you go ahead and save that and we need to add that to our german one as well email so let's just be a bit cheeky and copy this and replace the text and email ascendant and this is going to be hello and in german it is the gates the gate s there brilliant so that's all fine um let's have a look and see if it's worked refresh the page so it looks like we have run into another issue f12 for the console right it looks like another xml issue which is probably my fault let's have a look um everything looks far ah apologies i did not close off my link control uh so let's have a look now and see if it works refresh the page hmm it seems there is another issue let's check the console again um something's wrong with the normalized email event of well it's undefined so it's not working let's go back and check that return mobile library url helper nor apologies hp capitals let's save and refresh again there we are so now um here's your send email link and you can see um at the bottom it's harryhawk example.com subject hi harry and body how are you and then obviously you can click on that i haven't got an email client set up on here but if you were to click on that your email client should automatically generate these bits and pieces and yeah there you are right now in step 10 we are going to look at property formatting using the sap standard data types and what we're going to do is we're going to add a sales amount and we're going to give it the currency code of euro and instead of just displaying it as a standard number like you would in json in the in json format we're going to put a a data type on top of it and um it's uh you have a whole stack of different data types which you can find in the um sdk um but in this case we're going to use the data type currency which comes from sap ui model i think it is and all we're going to do is we are going to add the data to our json model and we're going to adjust the xml to display and formatted correctly and it's as straightforward as that so we can then use the data type to display pretty much anything from dates to currency to whatever the case may be so let's go ahead and jump into our index.js file and underneath our model that we've got here we are going to add sales amount and we're gonna set that as one two three four five point six seven eight nine and we're gonna set the currency code to euro and pop a comma there perfect so all we've done in our model added sales amount which is this single value here and the currency code of euro so let's jump into our xml document and we are going to add a new vertical layout section or vertical layout control so underneath here pop that in like that close it off lovely now we are going to add a label control and this is going to be label four and this is a sales amount brilliant and the text is going to be from our i18n file and that's i18 oops i18n and sales amount amout perfect so let's go ahead and add that to our two files um so let's just what is that here sales amount and that's going to be oops sales amount and let's pop over to our german translation and that is going to be the kalfsming and save that save that perfect as we don't need the controller sorry back to the view right so now that we have that text in there we can go ahead and just add that close it off and now we're going to add an input control and give it the description and this is going to be also well this description is going to come from our model specifically and that's going to be currency code and we're going to set this to enabled sorry let me just set these out so you can see it better and pop that down there all right in a in a build yep and we'll set this to slash enabled again pulling directly from our model and we will give this an id which we pull from here just to make sure that they match and that is perfect so now that we have that we are now going to call the value attribute and in here we are going to start dealing with um our formatting so we're going to call parts open that up and in here we're going to set the first path which is going to be sales amount and our second path uh whoops is going to be currency code and coherency code yes that's correct so this will make sense in a minute so we've got our parts now we'll set the type and we're going to pull this directly from the documentation and it's sap dot ui dot model dot type dot currency brilliant and we want to set the format options lovely and we're going to say show measure don't show the measure rather and then um after we've got that we're going to set our width and that's going to be 200 pixels which is quite standard so make sure we close that off so we've got our input with our description pulling in from the currency code um it's enabled so again everything coming from the model our id sales amount so that it's linked to this label up here then in the value just like we've done before we're going to bring in our parts and we're referencing the path to our sales amount and currency code for the value specifically we're giving it a type so again from the documentation pulling the sap ur model type currency data type currency and format options we want to show the measure as false so we don't want to show the measure the actual measure here um which we'll see now in the front end and then we close it off with the vertical layout go ahead and save and we can go ahead and test so let's open up our browser go ahead and refresh and there you are so now you can see we've got 12 000 comma 345.68 rounded up with euro and our sales mark all displayed nice neatly and there you go right now in step 11 we are going to move on to validations using the standard ui5 message manager and what that means is we are going to take our application and if we type something in here that is not the correct format that we expect for the sales amount input we want an error message or the block to sort of light up in and display an error to the not display like a pop-up but for it to highlight this as a sort of you haven't typed something in correctly and what we in in order to do that um what we need to do is create our view as a named object then we need to use sample 2. get chord to um register the object this new view object with the message manager itself and we're then going to place it back in the dom like we did before at content so the code changes are fairly minimal um but then once we've attached it to the standard ui5 message manager um we can then use the standard ui5 validations for our particular data types so to get started we are going to um display the xml view called app and we're going to create an object called o view and that's going to equal new or we can actually just copy this directly across so just like we did before we're creating a new xml view referencing the view coming out of the view folder and specifically the app view and then here we just change this to overview dot place at content back in the dom where it should be and now in between we need to register the view with the message manager and to do that we're going to call snap.ui.getcore git message manager and we're going to call the register register object method and we're going to pass in the view and set that to true brilliant so um now that we have our new view object we've used samplerduo.getcore to get the message manager to register the object being the new view object that we've got so now that's connected to the message manager and we then place it back in the dom in our content here in the html id tag so we can save that and let's test it out so if we go ahead and refresh now if we just type in any old number everything's seems fine but if we try typing anything else into valid currency amount so back to this and there you go it's as easy as that right in step 12 we are going to move on to aggregation binding uh using templates and um all that we're going to do is we're going to create a new json model with some product data we're going to store it in a separate json file we're going to then bring it in and create a model and we're going to display that model with inside a list control and we're going to allow we're going to use aggregation binding to allow the list to automatically create the object list items based on how many items that are in the actual model so the list will become dynamic and there'll be as many lines as it will be you know as many lines as there are inside the json model which could change at any time so the aggregation binding itself can be used in tables lists or whatever the case may be and it obviously just displays data dynamically and on top of that we're also going to add another formatter as well which we'll move on to shortly but first things first let's go ahead and bring in our new data our new set of data rather so under web app we want to create a new folder called model and underneath model we're going to create a product dot json file and i'm pulling these directly from the documentation which you can do as well but you can put any data in here that you like this is obviously just the example data to for you to follow along with so in here we've got our products object and we've got a list of products underneath with a bunch of attributes so let's just format that there we go we can go ahead and save that so now let's jump into our index.js file and let's create our model so to do that we're going to just shove this down a bit and we are going to oops that comment belongs to that and here we are going to create a new variable called o product o product model and that's going to equal a new json model and notice um we've now created a we've now created a blank js model whereas here our json model opens straight up to just some hard-coded data here we've created a blank json model and we're now going to call a method uh known as load data so oh product model dot load data and now we're going to reference the location of our products.json file because that's where we're going to load the information from so model slash products dot json so now we've loaded the data and the final thing we need to do is septo is set the model using zapf.geoid.getcore and set and model and in here we're going to put a product model and we're going to give it an alias of products and obviously we can call this alias in our xml when we do the aggregation binding so created a new blank model loaded the data into our model from our js our new json data over here and set what you get called setting the model to the core so it's accessible everywhere um again remember not best practice just using it for the because the documentation uses it and also because it's easier to run the examples but obviously you would just this.getview.set and getmodel would be replaced there and give it an alias of products lovely now let's jump into our view and we're going to add another panel underneath where we're going to have our list below that so here is our panel there let's add another one close that off [Applause] and under here we're going to have header text and the header text again gonna come from our i 18n file greater than symbol panel number three header text oops if i could spell and let's go ahead and add that to our section which is here and uh where's our panel and we're going to call this aggregation binding and let's pop this into our german section as well and this is also going to be aggregation binding because maybe there's no direct translation who knows um and let's save that back to the view so the next attribute we are going to add is the class and we're going to set that to sap ui responsive margin and we're going to set the width to auto lovely so that is our panel sorted now within our panel we're going to add a list control so we start off with list and let's just close that off while we're here perfect now in list we're going to have header text equals i18n and product list title go and pop that in our properties so this is now under our what do we call this we'll call this product list which is fine and pop that under there and we'll just say product list and in our german translation and we'll just put productless title artik atikelister as much good german very good uh german there so we'll go ahead and save those and save that lovely now let's add the um items attribute and so um this is where we are going to bring in our aggregation part of this particular control so in a list it's under items in a table um it'll be in a different place slightly different obviously depending on which control you use check your documentation and you'll see where to add it um so in this case under list it's under items and under here we are going to reference our products model and now slightly different we're going to reference products so you see how we reference the model and before when we just accessed our um our standard model we just had our slash name first name etc etc now when it comes to aggregation binding we have our products model with a group whoops with a greater than symbol and then followed by the slash and then obviously products and products down here is up here and in this products object is a list one object two object three object etc so that's these are what these are the items or objects that will be aggregated and this is the object that we've called from the json model so now that we have that we can close that off which is perfect now we need to add a new control called object list item and we're going to give that a title and so now once we're under here each of these object this object list item is now going to be repeated and automatically generated based on the data in our json model so when we call the title for example it's going to be products and without the greater than symbol we're going to put product name so now you can see it's just the greater than symbol and the product name here is again coming from here and that's how we start to reference it to now it's going to pick this product name next object list item this product name next next next so um the so you said obviously the the title there and the next attribute is going to be the number and the number is going to get just like we passed in with our data types except now we're going to place it within the object list item and it's going to just aggregate that so we're going to call parts and under here we are going to set our paths so path and its products unit price unit price yes that's right and we are going to set the second path to a currency code bring in the currency code from the other model the initial model that we've worked with so we're combining the two there so now that we have that we then apply the type and the type is sap.eui dot model dot type dot currency and format options show measure set to false lovely so that is our number part sorted now we need to add the number unit and that is going to come from you guessed it currency oops i've got my slash currency code and we can close that off so now we've got our object list item with a title which will be aggregated our number passing in our unit price and currency code from two different models our type which is currency formatting the options saying don't show the measure and then the currency code slapped on at the end and again these are all uh standard oops what have i done wrong i forgot to close this off my bed [Music] okay well let's close that off i forgot i forgot my equal symbol so that's fine um right now we need to add the attributes and let's just close attributes off brilliant so underneath here we're going to add object attribute and set the text to equal products quantity per unit quantity per well did i get that right unit quantity per unit yeah that looks good so let's just oops put that down so you guys can see it so we've got our text there my object attribute and we can just close that off and we're going to add another whoops another object attribute object attribute and we're going to set the text oh sorry we're going to set the title to equal the stock value oops so again jumping into our model products stock value brilliant um and then under that we're going to set the text to equal um pulling it again um oh so um obviously now um we're going to add the we're going to use a formatter for the stock value which will make sense in a minute so what i'm going to do is i'm going to reference it now and then we'll go ahead and actually build the formatter in the um in the controller so let's again just pass in our bits and pieces set our parts and under here we're going to reference the path to products unit price next path units in stock products units in stock and finally we're going to reference the currency code oops i should probably close these off so they don't break very important and it's going to come from currency code lovely so these are going to be passed into our formatter which we're going to reference here and it's going to be format stock value and close that off so we're referencing the formatter that we're going to now build in the controller passing it in these three items or values rather so let's just make sure the xml looks fine there might be an issue but we'll come back to it now let's jump into our controller and in our controller we've got our first four whoops our first formatter here and so underneath that we are going to call the format stock value formatter and in here we're going to create our function and we are going to then pass in the unit price stock level and again these are just parameter names uh but they'll be passed in order anyway currency code and let's open up our thing i'm just going to close this so you guys can see what i'm doing so now um we are going to call we're going to create a variable rather called this browser brow zoo browser local and we again are going to use the sept.ui.get and from the call we're going to get the configuration git configuration and we're going to get the language that the page or app is currently loaded in at and then we're going to create a new variable called locale and that's going to be oh that's obviously going to be locale so we need to bring in some new modules here very exciting uh the first one is sap dot slash ui slash core slash local and these will all make sense very shortly let me just bring them in oops for now and we'll go through it in a minute um the next one we're going to bring in is local data and we're going to bring in our currency types so sep ui slash core slash locale data finally escape sap slash ui slash slash type currency brilliant so just like we did before let's bring it into our constructor boom locale data sorry i'm just copying it to make sure it's it matches at least whether or not it's correct this is a whole other story right so we brought those in now we need to set a new um locale and that's going to be the browser local and we're going to create another variable called local data uh oh locale data perfect and we're going to set this as new locale data passing in our locale brilliant and now that we have that we're going to create another variable called currency and we're going to set that as new currency locale data dot m data dot currency format and we are going to return so now we're going to obviously return the values or the value rather and we're going to format these particular values based on this currency that's been set up using our local data which has now come from our core which is loaded up in a certain language um and oh sorry we're going to return the o currency format value and in here we're going to put near if oops the f unit price multiply by the stock level and we are going to pull in the currency code bring it back in string format set that there and we can go ahead and save that so we're bringing in so um it's fairly long-winded and once you read through it it'll make sense but we're using the core to grab a language we then sit within grabbing our local we're then calling our locale we're creating the locale data object based on our locale um we're then creating a new currency object based on the local the locale data that we've got and then we're using that to format the value which is the stock level multiplied by the unit price and the currency code and we're returning it as a string and you'll see what that looks like very shortly and i think we've forgotten one thing we forgot to add the stock value here and this is current stock value and in german it's stock value and this is a lager stand that lager stands sorry if i pronounced that terribly if you are german okay so our format is running there back to our view so now um we've got our stock value and we've now set it as passing in all of these different values formatting it and returning it as is and now we can go and see what all of this effort looks like in the front end we refresh the page all right so there seem to be a few issues but we can look at that now so you can see we've got all of our lists based on our items so let's just go back to our json so we've got chai first chang second aniseed syrup chai chang and a seed syrup so it's loading it correctly um we've got our all our different values here all aggregated nicely it seems to be missing the currency code though i'm not sure why but let's just go and double check okay so there could be an issue with the xml where is that uh here we go number units so an object list item the number unit should be current here's my spelling do apologize currency code let's go and see if that works brilliant um so here's our stock value though it's missing our title let's go and see what the issue is there uh let's see object attribute text object attribute here uh title ah apologies calling all these different models that should be set to i18n let's refresh and have a look there you go stock value ready to go right now in step 13 we're going to move on to element binding and element binding is exciting because um when you have your list of items here you can use element binding to allow you to click on an item pass the data for the single item and display it in something like a form which we're going to do in this example so let's jump right in and the first thing we're going to do is we are going to add a fourth panel to our view and let's just close that off and under here oh sorry before we do that let's just um add a few attributes to our panel the first one being the id which is going to be product details panel product details panel and let me just make this a bit wider so you can see um then we're going to add the header text oops text and the header text as always is going to come from our i18n file and it's going to be panel 4 header text perfect so let's just go ahead and add that to our i18n uh where our panels here we are and we're gonna call this product details brilliant and in german that is going to be called product detail details uh where is it here panel four so there we are product details lovely save save back to our view and let's continue so uh we want to set a class and that's going to be whoops yep sap dot ui dot sorry sap ui reese responsive margin and we're going to set the width to auto lovely oops that shouldn't be there now under our panel we are going to add a form and we've already got the library load the library pulled into our xml so we call our alias form simple form and we can say this is editable by setting it to true and we're going to set the layout to be a column layout and again you can visit the documentation to see the different layout options you have available to you and i'm going to go ahead and close our simple form off there we are now under here we are going to add i think it's about six labels so let's add our first label offering in the text and the text is going to be um i 18 in product id and i'm just going to add these all first and then we'll go back and change and add them to the files and then we're going to get our input control and set that to value oh sorry need to just fix that and we can just close that off and this is going to come from our products model and it's going to be product id brilliant so i'm going to be a bit cheeky and i'm going to copy this down and i'm going to change this and once we've got product name we need quantity per unit quantity per unit brilliant then we want unit price sorry i know this is a bit laborious but it's important to go through each individual item so you see how it works unit price then this is units and stock whoops brilliant and finally we're going to say whether or not it is discontinued except in this case it's a check box discontinued this continuous that is correct and this is going to be a checkbox brilliant so we've got our um form laid out here with all of our different input values um brilliant so this should now be populated well now we're going to get it to populate with the single values that we need so we can make sure that's saved now let's uh jump into our before we do that actually we need to underneath our first panel uh sorry our third panel panel three we need to add um two sorry underneath our third panel underneath the object list item we need to add two more values and the first one is the press event and we need to register an event called on for example on item selected and we need to set the type to be active and all that's going to do is when you press on this object list item uh which is obviously now aggregated down based on the model we're going to call this event in our controller so let's go ahead and pull we can just copy this as well jump into our controller and underneath format stock value let's add our event here pull in our function and again when dealing with a function when dealing with um an event like clicking on something or pressing on something you need to pull in um the event so there'll be this object which we'll just call oh event which will hold all of the data we need and the um what's known as the context of what we have just clicked and we're going to use that to construct the data and fill our form in with once with that one single item lovely so now that we're here we are going to create the following variables a selected item and to get that we call the o event and we call get source then we get another variable called context where we get the context and this is oh selected item dot get binding context and that binding context is from our products [Applause] then we need to get the path and the path is the path to the single item that we have clicked and it's going to give us the path specifically in the model of that single item so we set that variable there context dot get path and again if this looks complicated don't worry once you work through it step by step it'll make a lot more sense and some and steps like this will become very very common when you do your master detail or list apps um this is this will become sort of very commonplace and it'll sit in your memory so now that we have the path we've got oh product product detail panel so now we're getting our product detail panel and we call this by this dot by id and remember we set an id uh where is it here we set an id for our panel so now we can i'm going to copy it here just so you know where it's coming and that it's also correct and all we do is a product detail panel bind element and set the path s path from the model products and so all we're doing here is we've now got our selected item we've got the context from the context we get the path of the exact path to the single item that we're looking for when we search for it in the model we're then getting our new fourth panel that we've created and then all we're doing is we're binding an element giving it a part and then in that bind element path giving it the path and which model to apply that path to and it should populate our data so now let's go ahead and do our r18n properties and for i'm just going to copy it across from the documentation just for the sake of time do the german translation save save so we've got our product id name quantity per unit unit price number of units and stock and discontinued whether or not it's discontinued and now that we have all of this here let's see what happens and let's refresh the page and here's our nicely laid out new form in a column layout so here's you can see the sort of two columns it's done automatically and now if we click on chai product id1 product name quantity per unit and whether or not it's discontinued and it's as simple as that now in step 14 we're going to move on to something that i personally find very very very useful in my day-to-day projects and that's expression binding and within with the expression binding what we're going to do is we're going to format these um these values here the 18 19 10 etc and we're going to compare them based on a value and if they're greater than that value we want to format them accordingly and we can do that all within one single line of code so let's jump in and get started so the first thing we need to do is we need to go to a model uh we can close that and we can we need to find our model in our index.js file and under here under sales amount we're going to put a value called price threshold thresh that's one h sorry threshold we're going to set that to value of 20. now we're going to compare this value and format based on that so now that we have that there we're going to jump back into our view here and we need to find our third panel where is it here so under panel three underneath the object list item we've got our number unit we're going to add a new attribute called number state and this obviously when you follow the documentation um you'll have different things can have states and they can have something called error or success or i think caution is one of them as well but effectively we're looking for two states error and success and error will be we'll change the color of our number unit and basically all of our details to red and success we'll change it to green and we're going to put a shorthand javascript if statement in there to evaluate whether or not those values should be this i mean it's actually quite brilliant when when you see it written down and you will use this quite a lot i guarantee that um so when we use expression binding the first thing we need to do is we need to get the value so within here we put an equal sign dollar and from the model we get the products unit price and we compare that so if the product's unit price is greater than again calling our second value sorry i'm going to make this wider dollar symbol open brackets price threshold so now we're getting the unit price from our first from our products model and then from our standard model that we had we're just calling the price threshold so you know where it's coming from and so if this is greater than this question marks are now using javascript shorthand evaluate with the question mark and if true set the number state here to have error so if you can imagine getting rid of all of this all that would be left behind is the word error which is one of the number states you can have or if it's false so if this evaluates to false and it's actually the unit price is less than the price threshold set it to success which means that this number state will tell everything else to be green and it's as easy as that so when you read through it the syntax looks a little complex don't worry you just really have to worry about the equal sign on the dollar symbol to bring in your different values once you've got them do your comparison whatever that may be and obviously this is just a basic version if you look at the documentation there is a quite a wide range of things you can actually do here question mark to evaluate if true set it as error which means it is greater than the price threshold or false set it as success if the unit price is actually less than the price threshold and now if we save refresh um okay let's check the console i think there's a small issue right it's something in the xml i probably haven't closed off a tag somewhere so number state bloody blah that's fine what's the issue here i think that was the problem let's save and check again okay there seems to be another issue let's see okay now that we're in the console uh let's see this seems to be an issue with the string so let's go back and check the code hmm i think we might need to keep the space uh here just after success let's save and take a look now if we refresh no student issue error ah this should be a capital my apologies that should be a capital now if we refresh there we are so again if um these have evaluated to false because they are less than 20 which is that value we put in there the threshold so they're green above 20 it's set as error and changes the color to red and you'll find this incredibly useful as you run through to quickly format bits of data as you go right so now in the final section or step 15 we are going to use um a factory function with our aggregation binding and this as well is incredibly useful um in this particular example we are going to call two different fragments so we're going to take our object list items that have been aggregated and when we apply a factory function we're going to in that factory function determine whether or not we call a fragment that says um here's our object list item with all the details or based on a condition for example it being discontinued um set a slightly simpler object list item with a discontinued badge and obviously no information because it's not necessary and so we're going to build that so let's go ahead and dive straight into the code and we need to create our two fragments first so the first thing we're going to do is jump into our view uh where are we here i tune in model view and underneath view we're going to create our two fragments first one product simple dot fragment dot xml and inside here we are going to reference core fragment definition def inition and um obviously because this is a fragment uh we reference it that way and then we pass an xml in its which is going to be our sap.m library and xml ns for the core whoops obviously called being alias and sap ui.com brilliant so we've now pulled that in let's just close it off brilliant and now under here we are going to call a standard list item if i could spell probably standard list item with an id of product simple and then we're going to give it an icon [Music] sap dash icon and the warning icon and the title is going to be for the product name so we're going to pull that from our model products product name and we're going to add the products quantity per unit now let's just close this so you can see quantity per unit and we're going to pass in oh we're going to use the info attribute and we are going to put in the discontinued value here from our i18n discontinued [Applause] in the info state is just going to be um error and let's just have this set the type as well as active info state we don't need to put our brackets so info state and when we press on it obviously call our event we've set up in the controller for the item and that is on item selected brilliant and we can close off our standard list item like that and we go ahead and save so let's go ahead and then and now add so this is obviously the standard list item fragment for the item that is set as discontinued now let's add one where it is not discontinued and we want to see all of the data so we're going to call this product extended product extender.fragment.xml lovely and let's open up our fragment definition and fragment definition [Music] let's just close that off so that we don't forget brilliant and yep xml ns bringing in the sap dot m library and xml ns alias core bring in sap.ui.com fantastic whoops and now for this we're going to do the object list item with allowing us to have a little bit more data and this is going to have an id of product extended title of products product name and just like we did before oh i apologize just set that there and now we need to call the products model again quantity per unit fantastic and now we set the number and we're gonna run with our um formatting here uh so parts and and here we will set our two paths first part being product unit price uh whoops we don't need that there products unit price lovely comma and the currency code county code brilliant and setting our currency type based on sap dot ui dot model type currency and our format options and we're going to say show measure or don't show the measure rather false with an s and now we have that we can set our type to active and our number e unit to you guessed it the currents currency code lovely and our press event on item [Music] selected close that off grab that and close this off completely brilliant so now that we have our two fragments ready to go is our product simple two fragments ready to go let's go ahead and call them in our app view so let's close this so you can see so before we do anything we need to bring in a new module xmlns call calls oh not sml pixel xmlns call sap dot ui dot co lovely save now underneath panel number three we're going to reference these so we're in panel three and underneath our list um we can pretty much get rid of all of this accept the list itself and under list we're going to set an id of product list and we're going to give the header text of i18n product list title and we've already product list whoopsie just is that correct i18n product i18n product list title yeah that's correct and now uh whoops let's just close that off while we continue and now we're going to set the items to equal path products model products again refer referencing it using these two uh items here and simply applying the or simply calling the factory attribute because this is linked to the controller product list factory method product list factory fantastic and now that we have that we need to add another control with the dependence depend dependent so it's all these dependence and we're going to add our fragments as dependents in this section so we [Applause] know what's what and the first thing we do is called core fragment and we give it the attribute fragment name oops equals just close that off and we reference the fragment name sap.ui.demo.db dot view dot products product simple s-i-m-p l-e brilliant and again i'm going to be very cheeky and copy this oops can i do that yes i can and we'll just pop this back and this is going to be product [Applause] extended extended brilliant so now that we have um the two fragments that we need plus our bits and pieces here we need to go ahead and build our factory build our factory method so save open the controller and under here we are going to call a product list factory and that's going to call a function passing in the s id and our context and let's get to it so we first create a variable o u i control before we do anything else let's bring in our modules that we will require for this section and they are sap slash m slash object attribute and copy that into our constructor oh dear this is getting quite long lovely so now we've got our ui control variable now we need to now we need to now we need to decide based on the data that we get um which dependent we need to clone so and again this will make sense so just ride with me as we go for now based on the data which dependent to clone and now we say if no context dot get property oops oops units in stock equals zero and oh context dot get property oops and we're going to get the prop get the property dis continued discontinued and so if our units in stock is equal to zero and our discontinued property is true um the item is discontinued so use a stand standard list item and to do that o ui control equals this dot by id product simple dot clone oops clone passing in the s id else the item is available so we will create an object lists item and again o u i haven't done that correctly oops o ui control this dot by id product extended product extended dot clone hey oops dot clone yes i did yeah we don't need two of those clone sid and that is are you controlled by this id now um we're going to say however further if statement if the item is tim poor rarely out of stock we need to add a status so we will add a status so if oh context dot get property units in stock is less than one o ui control o ui control dot add at rebute add attribute and we're going to add a new object attribute and it's going to have a text following the path of our i18n i 18n out of stock and before we go anywhere else we'll save and go and put this in our i18n file under here out of stock and the german for that is i'm not sure what it is so we'll just put out of stock as well um i'll just say i don't know stock apologies for my german again but this is just for demo purposes so here we go ahead and save that and once we have completed everything um so we're pulling out of our if statements uh where's our top one here so we should now here return o ui control right so now after all of that logic um and again there's a lot of it let's see um if it's actually worked and so we should see two different list items and we should have the out of stock attribute added if it's something that is out of stock so let's check our application and refresh the page right so we seem to have a small issue let's check the console error node type for for r we need to specify a type for our fragments there we go so back in the code if we jump into where's our view and view.xml aha so just close that here we need to define a type xml and let's cheeky and copy that yep brilliant let's see if that works i need to save and refresh the page right it seems there's another issue let's check the console something's not right so let's just take a look at our naming there could be an issue there so we're gonna have for you where our products extended let's just check the name here product product extended dot ah should be fragment my apologies product extended fragment so we don't need to save let's go back and refresh there we are and so as you can see our aggregate aggregation binding all looks good we've got our out of stock item there everything's discontinued but it seems there's an issue with um the name here so let's take a look back at the code and see what's wrong all right so it's probably a spelling mistake somewhere along the line so let's see product name pro they're spelling mistakes again should be products let's just double check quantity per unit products products let's go back and refresh there we are so now we have everything we need with our icon pulled in from our separate fragment and obviously we've got our other fragment here but if there's no stock pull in the or add this attribute here and there you go right that concludes the data binding course we'll walk through alongside the sap ui5 online documentation if you managed to get this far well done we've managed to go into quite a bit of detail and covered a lot of interesting topics that i know will add value to your own development projects um so that's great if you made it all the way to the end and of course don't forget if you would like to access any of the steps again directly or pull any of the code starting from a later step further on down the line you can always go back to the github repository which is linked in the description click on the commits and pull down the code from any of these different commits here if you if you want to start from a certain point as always if you have any questions please feel free to leave a comment down below and i will answer them as best i can again i wrote i always encourage you guys to read the documentation keep the sdk close at hand whenever you are building stuff follow your fiori design guidelines all that good stuff and you'll really you'll come out with some really good stuff so yeah if you liked the video please don't forget to hit that like and subscribe button and as always thanks for watching

Channel: Code With Brandon

Views: 10,060

Keywords: sap, abap, SAPui5, sap cloud platform

Id: zaeztGyqiBw

Length: 158min 35sec (9515 seconds)

Published: Fri Oct 16 2020