Hello. Welcome to Typekit. You are watching the session. Discover new capabilities of SAP i5 with SAP build code. My name is Stefan Beck.
I'm the chief product owner of the Uf5 product family and also lead the technology program at SAP. As time is short, let's directly show jump into the content. The ones who remember Typekit last year, they have seen a big announcement around SAP Build Apps, a tool that is following a low code no code approach and is targeting the citizen developers. This year we complete the SAP Build Family with SAP Build Code, a tool targeting professional developers like you and me. Basically the ones who usually attend tickets. So what is in build code? I mentioned already that you have SAP build apps here on the left hand side, still existing and still in the build family. We have now the extension of SAP Build Code, a tool that is optimized for Java and JavaScript
development. It goes hand in hand and works well together with the SAP BTP alpine environment above environment as the full extension use case is one of the key scenarios that is addressed by SAP build code. Yeah, and what is special about SAP build code? It really makes use of generative AI capabilities to support you in building your software and your programs as efficient as possible as it is running on SAP, BTP. There are built in advantages like the strong integration capabilities, security mechanisms and also a good data access layer.
Everything sits on top of various backend systems I mentioned. As for Hana and as for Hana cloud as one of the key targets, but it works also for other systems and even third party systems when needed. Now on the next slide, I talked about parts already. Also, one of the key offerings of SAP build code that it's a kind of a turnkey environment that optimizes the start up, means the configuration should all be a turnkey, easy to go.
And then it's not only about programming, it's also about testing and life cycle management. Still, what you know from the past. There's also the guided experience with the templates that help you to build all kinds of applications full stack, front end application and mobile apps.
However, maybe come to that point. Also, the fusion development is one of the key targets that we bring the professional and the citizen developer closer together. But instead of talking about the slides, I quickly open a demo so that you can get a direct impression.
I jump now over into the lobby of SAP build and said, you have heard it most likely in the keynote. It's not yet completely ready for shipment, so you need some steps to go to the create button. Then you have to decide. Now I want to build an application, and now you have the two options as a build apps that you know from the past and also SAP build code here I now, unlike in the keynote, I checked the UI, UI application and then I give it a name demo target five. Stefan. Demon and select a space and then hit the create button.
This now takes a few seconds. It's setting up all in the background. Oh. Come on. And now I can go into the demo. And now we launch as a business application studio and theory tools basically. And I can also not go through the complete demo. But what I want to quickly show is one of this kind of turnkey advantages that we strive for.
So if you now would now select your external resource means your data access layer. You directly get information. There's a business accelerator hub. You can now choose the S four Hana cloud system. Basically then this is what you know.
They query the system and you basically on this level level find all the APIs that you are looking for. It's either data v4 or data v2. Now basically if you now would select such a data service, we would still run a template to bring you to the initial set of the application structure.
If it's a for element, application can be a complete application. And then artificial intelligence jumps in and will help you to enhance your code and to build the logic or the screen parts that you need. Although honestly, Chennai is currently not suited yet to build a complete Shopify Freestyle application out of the description.
So therefore we said it's a combination of templates and then where Chennai already works perfectly fine for the small extensions, we make use of it. And basically the same was seen in the keynote demo. Also here they have generated the metadata structure of the data service of the Cup service. And then it was the generators and your elements on top who have built the stuff.
So we use I. That makes sense and it really makes your life easier and maybe and take it next year things already look differently. Let's go back to the slides and come back. And now jump over to the five specific parts. So status quo and strategic direction of SAP i5.
So luckily we can say that the customer community is nicely growing internally and externally. There are some impressive figures like 80 million sorry of users here via success factors for your five. Then already 14 million with the newly built web components. We have 2000 plus customers building applications on SAP, BTP, on Abap, on premise it would be even more. And the nice thing of such high scale usage is also that we get good feedback that we can cooperate in corporate into the product strategy of SAP overall, and also specifically for SAP i5.
Now, one of these key improvements that we target is basically the web components. I now show you an HTML fragment. And for the web developers it's quite easy. You can basically see it here. It's a body, a page definition, a header to button input, and a list.
And therefore no surprise, you see a native header, the button input field, and a nice list. And now web components based on the W3C standard allow you to define own HTML elements. And this is basically done here. On this slide you can see the very same structure. But it's now you have five button, you have five input and you have five list with the high five list items. And you nicely see now a Fury like UI page that gives you all the product standards and qualities that you know from SAP, F5, and it's now very nice.
So you can see this easy and easy to understand API. And also the API as such is is the same. Then for the other native HTML structure. And also what you can see nicely here, you can always mix native HTML with web components.
And therefore this is a key strength. You can use basically web components for any UI framework, be it angular, Vue, react, whatever. In the end they create HTML and in slightly modifying the HTML output, you can launch launch web components and get UI five product qualities. And this leads to the following strategy at SAP.
What you basically see here is the SAP design system structure. At the bottom you have the design language. Then the UI components splitted in behavior and visual design, then a programming model layer, then patterns and blueprints above. And if you now look into the details, the theming base content is part of the design language. Here you see all this CSS variables and the ones of you who already use the theme designer of SAP.
You basically work with this parameters that are defined in here. Then we have the common CSS layer that is used across technologies. And then here you see the strategic UI five web components that are then used for UI, five components for angular, for react, and also strongly inside. Sap F5, so all new controls that are built for SAP F5 will be based on web components, and this line indicates that the existing controls are still valid. And then on top we have this highly productive environment for all the elements. We come to that a few slides later, and for completeness reasons we also look into the mobile development kit.
If you run that not on a native environment, but in a web browser or in a mobile development kit application would make use of F5 web components being the strategic part of the new strategy of SAP, and therefore to be able to build that in high speed. We have Innersource collaboration model around the web components now, but there's much more that we have to present today. I mentioned already SAP Fiori elements, so this gives you a standard ready floorplans and page types that you can use for many types of business applications. You see here basically one page type list report the object page for the details overview page and also the analytical list page. Besides this kind of page templates, you get out of the box, a rich functionality like filtering sorting, value help. You can read through that up to the draft management. And basically this is the recommendation as it gives you the best developer efficiency.
However, in the past we also got the feedback. It's kind of a decision between your elements and freestyle as the five. And here with the flexible brokering model, this is a key enhancement to exactly get rid of this boundary. We have here a continuum. You can start from both sides here on the left hand side with your elements.
Your standard floorplans enhance it with custom artifacts, even custom layouts and freestyle assets. Or you can come from the right side. Start with freestyle Uf5. Use standard building blocks on top or even standard floorplan components.
So you now have the continuum that gives you the complete flexibility at highest efficiency possible. Now let's move on. Equally important, like the.
Flexible broker model is TypeScript JavaScript plus types. This makes or gives you the feeling of a typed development environment that you have with Java, with C plus, plus or Abap, and you have huge benefits in doing that, like code completion here, error messages while your code in place, IP reference, easier refactoring and maintenance. And I did not even mention the most important one. That is really a much better code quality. And even more important, you will have more fun in developing applications. So please strong recommendation if you have a new application, no question.
And sorry, new application and the right release version of Uf5, no question. Use TypeScript. And the good news is also for existing applications, you can slightly start to use TypeScript for the files that you enhance.
So that's no, you don't have to do it big bang start use TypeScript, get familiar it and you will like it. I promise it to you. Let's move on.
Other new and key part is order integration cards. This is our declarative cards that you can use in various environments. You can see basically here different card types on the bottom size. And the card types are here used in the FLP, but they also are in the build work zone. You can use them here in the overview page in SAP start and even in SAP start native environment. So integration cards are really cool.
You do it once and you can use it in many environments. Also quickly showing a demo here I go to the SAP demo Kit UI five point Sap.com I enter the tool section and now here we are. Here is the Card Explorer. I launched the card Explorer. So second click and now you can see the various card types that we have.
List card, analytical card, table, object timeline card. I think you get the story. Now how do cards work? I said it's declarative.
You have basically a kind of a definition file, an ID, you select the card type, then a card type has an API. So this card has for instance the title the subtitle icon. And then you can enhance it from there. However that is you can explore that.
And now here is the key of the story why it is so flexible. You can see here now a list card. And you can now see again the technology the card type. However here is now something different. This is now not a direct value that is specified. It's it's kind of a parameter value.
And this is a kind of an indirection. And this is somehow the cool thing. Now the interaction, the binding points to a configuration and dependent on the environment where the cards run, you can apply different configurations and override the default setting.
If you now have basically an environment that only can have a less space of you, not enough space, you can say, now I don't want to have four items you configure that, you want to have three items. And then you see the this card changes. So this combination of this declarative approach and the configuration option make the integration cards that flexible. Let's move back to the slides.
Now for the ones who have seen you have five con or not five con keynote this year, please watch it. We have now a lightweight bootstrap called Modular Core that is a key improvement for all standalone Shopify application. It boosts your startup performance, and with the Google Lighthouse performance measurement tools, you can really achieve performance value close to 100. So if you use standalone, you have five apps. Please look into all the demo samples that I have linked here and start to use it. You will be absolutely happy with that cool new performance improvement. Now supply flexibility.
This is basically something that you know for Shopify from the very beginning. It allows to adjust applications that are the level users can adjust application for themselves basically. Then there is key users that can kind of business expert that adapt the application for a group of user. Then basically there is the developer adaptation so they can develop new application or change existing applications for all users in a company. These are the various levels.
And you can have a look here. And also I have linked additional information. So what is new. We now also support developer adaptation for S four Hana Cloud and for steampunk or above cloud environments.
Sorry, this was the internal name with the release 2408 so you have then also in the cloud environment, all the capabilities that you know from your on premise or SAP world already. Equally cool new is now and this is now available also in Abap cloud environments is the adaptation for specific roles. You now can, as a key user, do your adaptation and then apply it only for selected roles. And this is a key advantage compared to the past, because in the past, if you use several variants, you have to create application variants and that has is semantically, logically a new application. And if you have a new application, you have to redefine all the navigations from and to this application and is quite some work.
And now let's switch over to a demo with this cool new feature we can ease your life here. I go here to the home page and go to Manage Products. I would like to go to the object page.
You can see it here better. Just some navigation steps. And now when I'm a key user, basically I have here the option to adopt a UI. And I'll do that for a second. And then we enter the adaptation mode.
And basically you can now say okay, for me contact person is more important than information. I pulled it over. Mobile number is more important than email. You put it here. You can remove it fields. Most likely all of you have heard that and it's also flexible. You can now also move complete section.
You now can see the product information below. And maybe the inventory information is more important than put it here. And then you directly see the inventory information here below.
But that is basically what you know. And now the key difference. It's also a really small one. If you now save as new adaptation, you can now say my my adaptation I don't care really.
Then you have to give it a priority. Because if a person or a user has several roles, you have to say which one of your definitions should win. Therefore, I give this adaptation a priority one and then you can say add roles and say okay, this adaptation should should only apply if you are an administrator or a developer.
You select it basically and then you can save it. And that is the complete metric. No need to define navigation structures, no need to maintain the content. So this is an improvement that hopefully makes your lives much easier. Back to the slides.
Now. We have released the horizon theme last year, and we got some feedback from your side that your users were not really happy with the coloring of specifically input field and read only and read enabled input fields. So we have changed that back to normal, so to speak, so that we comply with your wishes. And also for instance the button have been changed. So we will see that and you will get updates in your five version 108 120 and also in between. So not much more to tell about it. So the key takeaways are you can now really develop cool applications using build code in the future then with AI support.
And also you have five itself has many new capabilities like fewer elements flexible programming model than TypeScript, the modular core and Uf5 web components as the strategic new way to develop controls and components. And therefore, I think it's fair to say that you have five technologies are the right choice now more than ever. And basically, here are slides that you have to have in the slides for further education on build note follow this instruction. Then also more learning opportunities basically. And now I say thanks to all of you for listening and I'm now happy to look at some of your questions. Okay, so let me now read the first question.
Will Uf5 web components getting pushed more that more and more features getting included? The P5 SDKs have way more components. So yes, web components will be pushed more. They will get more features. However, it's not the goal that we rebuild all of the Uf5 control features in web components. So web components basically follow the latest standard, the latest UX and design specifications.
And the controls have also a kind of a legacy of, let's say updated and changed, let's say UX wishes. And therefore we won't rebuild everything. We now build it along the latest guidelines and the web component as such then will be used and also also that you are not scared. There's currently no plan to directly remove the classic standard Uf5 controls. They are still valid.
We like to get rid of selected one, and then the clear message is everything that is new will be based on a web component. Good. The next top voted question is from Ahmad. What is the difference between using Uf5 using SAP build code and the development of SAP i5 directly in SAP Business Application Studio? Okay. The basically what I said the SAP build code uses as a business application studio, and basically the enhancement of SAP build code will also build into business application studio. So there is no hard difference.
The key change is the the turn key aspects. So all the admins and people IT departments in your company will have a much easier life to set up all the environment that you need with SAP build code for you. As a developer, I would say if everything is configured exactly as you need, it does not so much of a difference. We could also say yes. Obviously we have also built the artificial intelligence into bars.
That's also true. Like we have to build it in SAP build code. So I hope that is answering your questions. You know, the next question is, would you agree that TypeScript is preferable to regular JavaScript? Yes. I hope I was somehow clear during my presentation. Yes, sure. So please do it.
It's preferable. It's it makes life much easier. And we really get excellent feedback from the community.
And it might be that one or the other type definition is not 100% accurate. And you have five side. Then please provide us feedback and we'll fix it. But as said TypeScript is the way to go. Clearly. Good.
And maybe the last question exactly is a short one. Okay. What is maybe the top vote? Okay. Are there any examples showing combining elements and freestyle for example starting with
a theory elements application. So I'm quite sure I can't promise it. But there is a really, really cool flexible programming model section in the i5 demo kit. The ones that I have shown around the integration cards. Please go there, search for flexible programming model and you find a lot of material and if not, you find my contact data. Drop me an email and can also talk to the colleagues responsible for your elements.
And yeah, and ensure that we have that done it. Basically a good question. It's our challenge to do it good. So thanks a lot colleagues for listening and for having this valuable questions. Enjoy. Further Typekit. Thanks a lot and bye.
2023-12-20