let's code AB up guys hi and welcome back everyone me Robert here today we will build this application with abup and the abup restful application programming model this app allows you to display your favorite YouTube videos in sap to edit and to delete them and to create new ones you will learn how to create a table and how to insert data into it with an executable abup class then we will provision an O data for service and adapt the UI with metadata extensions additionally we will create a virtual element for the thumbnail URL in the projection View and then we will display the thumbnail URL as image in the First Column of our list view if you like this content please consider giving a like And subscribe so you guys can keep up to date with all of our videos now sit back and relax and enjoy the video let's do a quick live demo here you can see the YouTube tutorials app that we going to build in the list view you can see the title of the videos the description as well as the link to the corresponding video this is a hyperlink so you can click on it and watch the video hi everyone we rob it here while these three Fields exist in the database table as well as in the CDs view entity the First Column which contains the thumbnail is just the virtual element this virtual element is part of the projection View and gets calculated when the UI gets displayed we will insert this records through an executable upup class however the app also gives us the feature to edit create and delete these records manually for example we can click click on one of these videos here we can click on edit on the top right side and here we are free to change everything as we need for example we extend the description and then we click save here we can click on show more and we can see that the changes have been saved Additionally you can enlarge the thumbnail by clicking here on the thumbnail on the top left side but now let's develop this abup app from scratch I've opened already Eclipse which is our development environment for abup if you're not familiar with eclipse and if you don't know how to install or use it please watch my previous video eclipse for abup developers first we need to create a package for our new app I create this package by right clicking on favorite packages new abup package here I enter a name and a description for this package I name this package video and I give it the descriptions YouTube videos I add it to the favorite packages and the super package is set local then I click next next again here I create a new transport request I name it video and then I click finish once the package is created I can find it here under my favorite packages now I will create a table in the data dictionary where we will store the YouTube videos for this purpose I right click on my set video package here and then I click new other up repository op and here I search for table and I choose database table from this list I name this table set video as well and the description is YouTube videos as well now I click next and finish this creates a basic definition file for my table where I now can add my required columns these are title which which is of type AB up. car to 56 length and the URL of the video which is also of type AB up.car 256 and then we add a field for the description of type up up car 1024 for example so these are basically the fields that describe our videos but additionally we want to add a key so we add a new line here with key I name this field YouTube uu ID and this unique ID is of type sus U ID x16 and it must not be n additionally I add some other fields which hold the Tim stamps and the user who created or changed the data I copy in this Fields as follows please note that these fields are mandatory if you want to use the generator to create further development artifacts for you but now allow me to make a simple change to this key field here I do not want to name it YouTube uid but I want to name it video uid so that it's more generic and in line with my table name here now we can save this table with crl s and then we activate it with contrl F3 please note that we have not added a field for the thumbnails here since we will add the thumbnails later on in the projection field but now let's fill our table with content for this purpose we create an executable upup class we write click on our package again and then we hit new abup class we name this class ZL video generator and video generator in the description since we want to make this class executable we need to add a specific interface by clicking add here and then we choose the interface if o ADT class run then we hit next we use the same transport request as before and we hit finish this creates a basic class definition and implementation so what we will do in this method now is to insert the YouTube videos into the table for this purpose we first create an internal table in the memory we type data internal table of type table of our video table followed with a DOT then we fill this internal table with values for this purpose we type iTab is value hashtag and then we can add the records as far follows video uid is with this statement here we can create a unique ID then we add a title for testing purposes I just enter my title here then I add the URL my URL for example and then I add the description my description the next field we have to fill is local created by so we add it here is and we fill this field with our system username the next next field is local created at which requires a long timestamp therefore we first have to get the Tim stamp in a variable we do this by adding this line to our method get time stamp field data and then the name of the variable for example time stamp long TSL followed by a DOT and then we can copy this field and add it into our table local created ad is time stamp long the same we can do for the other remaining fields which are also Tim stamp and users so I simply add these fields here as well I've PR prar this statement before I copy and paste it right in here so now we have filled all Fields here so for each record you would add a line like this one here and then we can insert this virtual table into our real table we do this by writing insert t video from table at iTab followed by a DOT before inserting the videos into the table we make sure that this table is empty therefore we type delete from t video dot after we have inserted the entries into the table we want to Output the number of entries we've added so we type out write followed by Dot so in our case this should output one entries inserted successfully now let's save this class with crl s so here we get the error message the line 24 exceeds 255 characters source code cannot be processed but we can click here on rep two long lines and Eclipse will fix this for us now we click contrl s again then we activate the class with contrl F3 and then we can execute this class by pressing F9 and here in the counil you can see that it says one entries inserted successfully now instead of this test data here I insert real videos now into this iTab so I delete this line here and I insert my real videos now I I save and activate it again and then I run it again and now you can see that it successfully inserted four entries now let's build the fuse the services and the UI for our app for the sake of Simplicity for this video we use the generator for that so we go to our table in the project Explorer here again then we right click on this table and here we click on generate AB repository object we want to build a UI service so we click on o data UI service this will create a CDS view entity a CDS Behavior definition an upup implementation class the CDs projection view entity the CDs projection Behavior definition a draft database table the metadata extension a CDS service definition and the service binding the CDs view entity will allow us to display the data the CDs Behavior definition and the up implementation class will help us with creating and editing the data in the CDs projection view entity we will add a virtual element later on in the draft database table the data will be stored until we save it finally and the metadata extension will allow us to Define some annotation to adapt the UI layout and finally the CDs service definition and the service binding will allow us to create an O data for service for the UI so here we click next the package is set video and then we hit next again here we can see how the rep model structures our artifacts so basically it generates the business object with a data model and Its Behavior a service projection with the service projection entity and Its Behavior and the Business Service with the service definition and the service binding for each of these artifacts rep uh suggests names we could change all these suggested names however I'm fine with these and for now and I click next here you can see the repository object names I click next here I use the previously created transport and I click finish once the artifacts are created we can see them here on the left hand side in the project Explorer for example you can see here the draft table that has been generated or the core data services with its data definitions and the metadata extensions but also the service definitions and the service bindings in order to use our service we have to publish it for this purpose we open the Service binding and we click on publish here once the service is published we can click on it here in the entity set and Association and then we can click preview this ask for your credentials and then it opens your UI the preview UI in the web browser here we now can click on go on the right hand side here you can see that it now displays a list of our videos however it's not very well formatted it does not display the thumbnails here instead it displays the uids here in the First Column which we do not want to see here it does not provide clickable links to the videos yet and we don't want to see this created by column here on the right hand side so how can we change that to our needs the answer we can find in the core data services in our project Explorer here in the data definitions you find the CDs view entity named setr video and on top of this CDs view entity you can find the projection view here and for this projection view you can Define annotations that basically Define the behavior of the UI we Define these annotations in the metadata extensions here so if we do not want to display the U ID here in the UI we simply can type at UI do hidden and we can set it to true this will hide the U ID from the UI and if we want to provide a clickable link to the URL here then we can go to the UI line item command here and add the following type with URL this will tell the UI that we want to display a CLI clickable hyperlink and here we reference to the field where we want to display the hyperlink in our case we want to add the hyperlink to the field URL furthermore I want to display the URL field after the description field I can accomplish this by providing a higher position number to the URL field than to the description field here since the description field has the position number 40 I Chang the position for the URL field to 40 5 45 45 and 45 please note that line item specifies the position in the list View and identification defines the position in the object View and the position in the selection field defines the position in the selection Field section finally we want to hide all the time stamp fields and the user Fields so we scroll down here we find local created by here we add UI hidden is true as well the same we do for local created at and last Changed [Music] by local last changed at and last Chang add then we save this file with contrl s we activate it with contrl F3 then we switch back to the UI and we reload it and we click on go and you can see that the unnecessary fields are not available anymore and that the URL field comes after this description field and furthermore the URL field displays the clickable hyperlinks to the YouTube videos so now you have a fully functional upup application that allows you to create edit and delete entries in your database table for example you can click on create here here you can enter for example my first video Des my description and a URL and then you can hit create and you can see that your entry has been created let's double check this in our list view here in the last row you can see your latest entry here as well you can check it in Eclipse as well here you can go to your data definitions and you right click on your project View and here you go to open with and you select data preview this now shows you all five records in your database table including the last one which you entered manually back in the list view I delete this last entry Again by selecting it and then I hit delete delete this object delete it says the object is deleted now let's add the thumbnail in the First Column of a list view as already mentioned we will create a virtual element for this so we switch back to eclipse and we open the project view here in the data definitions again and here in the project view we add the following information after the unique ID a Virtual Field starts with the keyword virtual so we Define a virtual thumbnail field with this line the virtual thumbnail field will contain the link to the thumbnail of the YouTube video however we will not store this link but we will calculate it with this abup class we Define this Behavior with this command object model. virtual element calculated by above and then the name of the ABAB class here this class does not exist yet but we will create it in the next minutes please note that this statement is red here since this class doesn't exist yet in the next line we can provide the label for this field which is thumbnail and very important is the next line semantics. image URL is true this state ment is responsible for displaying the image of the thumbnail instead of its URL but now let's implement this class for this purpose we rightclick on the source code library and then we click new abup class here we add the name of our new class and here we add a description create virtual element for thumbnails on the interfaces sections we need to click on ADD here and here we choose this interface if subtle exit C element read then we hit okay next and finish this created our class however there is an issue with this line here the use of interface is not permitted however this appears to be an issue with the generator so we simply can remove this line here since we can see that this interface has already been created here and the relevant methods are here as well the relevant um method for our use case is the calculate method here here we can extend the projection view with additional calculated Fields so here we will build the thumbnail URL from the video ID the thumbnail URL has this structure here therefore we have to create this URL with the video ID here of the corresponding YouTube video we can get the video ID from the video URL here we can do this by entering the following lines of code with these two lines we basically read the data of the projection view into the variable video and here we Loop through all the videos with this line we extract the video ID from the video URL we can do this with the segment command the segment command basically splits a string by a defined separator in our case the separator is a slash that splits the URL in four fields and the fourth field is the video ID therefore by defining index is four here we get the video ID back then we conc the the strings this one and the video ID and the suffix as defined here therefore eventually this Loop assigns the correct thumbnail URL to the virtual thumbnail field and finally with this line we send back the calculated data including the thumbnail to the projection view now let's save that and let's AC activated now let's open the metadata extensions of the projection view again and here we now add the column for the thumbnail with a position five that is lower than the position of the title so that the thumbnail gets displayed before the title now let's save and activate again we switch back to the browser and we refresh the screen then we hit go and we can see that the calculated thumbnails are displayed in the First Column now let's click on the title of a video to view the object page and here in the header we want to display the title and the thumbnail as well so we switch back to the metadata extension of the projection view here we remove the existing header info and we add the new header info as follows this line will display the image of the thumbnail in the header of the object page and this line will display the title in the header of the object page as well now let's save this file and activate it now let's switch back to the object page in the browser and hit refresh now you can see that the title is displayed here in the header along with the thumbnail here on the left hand side you can click on the thumbnail to enlarge the picture so that's all for today if you like this content please click the like button subscribe button also notification Bell below thank you for watching and see you in the next one