Name: Creating the UI - Extending SAP Cloud for Customer
Uploaded: 2020-3-10
Duration: 368 s
Description: This video is part 4 of the series on 'How to extend C4C using the Cloud Application Studio'. Learn how to create custom screens and drag and drop fields to visualize the custom built application .

Share feedback

<p>Planned maintenance of Practice Systems</p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Subscribe now

Learn more

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div>This video is part 4 of the series on 'How to extend C4C using the Cloud Application Studio'. Learn how to create custom screens and drag and drop fields to visualize  the custom built application .<br></div></div>

Creating the UI - Extending SAP Cloud for Customer

Okay! Welcome to part four, where we will generate the UI and minimal fine-tune it for our Seminar application. So, what have we done? We have created the data model; we've created some very basic business logic. And now we want to have the UI so that finally Jenny can test it and can really work with our solution. So, let's quickly do that and create the UI in our development environment.  So, this is where we stopped. We've had a Seminar Management; we’ve created the logic. And now what I'm going to do is to do a right-click and then Create Screens. When I select Create Screens, I can select that I want to generate for desktop and tablet, which is recommended. And we always should do entire screen scenario.  Seminars, I call it now. So, we'll create. This is our screen set. We can have a screen set of multiple screens because we need a Create Screen, Edit Screen, a View Table, a Quick View. So, there are many different screens, I will not go into the details, but the system really has this a lot by generating all of this. And we just need to fine-tune it a little bit if we will work with application on the desktop, tablet, and mobile devices. That's quite cool. So, let's wait here a second until it's all generated.  Okay, now we can see all of our screens here, they are all together. That is also a reason I do folders because then it's very nicely to structure here. So, now we have these screens. We need to open two of them quickly so that we do some fine-tuning and adjust them. So, we need to open the so-called Quick Create and do there a small modification, so it works properly. So, then we open new tool now, the so-called UI designer. With the UI designer, we can design all the user interfaces. Here we see now a kind of representation of the view here. That's a create screen. In the create screen it's important to go here to the Save button, to go to the properties here and there to change something on the menu. Because you need to set, here on the navigation, Selected Item ID. We need to write SaveClose. So that by standards a SaveClose value is actually hit here. So, we just enter here SaveClose. And this will make the button work properly. That's important here. And we save the Quick Create. What we also need to do is to open the so-called OWL. That's actually our view where we have the overview. There are messages also happen when you try too quickly to open again another UI when we closed it, this can happen. So I, wait here a second,  and now I open the OWL. And when I open the OWL, I also need to change a little bit here. So, we'll just go to this toolbar here. And I will add to this toolbar a new button so that I can actually have a new creation button there. I need to add it here to the right-hand side. Then, I don't want to have a menu button. So, that's why I will just set the attribute HasMenu to false. That's necessary. And now all I need to do is to bind actually this button to the associated thing, the ThingType Container. And the ThingType Container, you just need to link it to the ID of our object. In our case, that’s a SAP_UUID because we didn't provide it in ID here. I'm gonna select here OK and then just click OK. Just one more thing I quickly need to do before I end the OWL change here. I need to click the New button and then I need to select here a Design, it’s Semantic. It's important to select the option QuickCreate. But then I'm done. I can save and activate and then the OWL is okay. And this screen will work as expected. For now, just trust me, these are the steps you need to do. I will also close this and that’s almost it. I just want to open quickly also the edit page and also modify this a little bit.  Okay, we get a message here, another one. That's okay. So, here we have now the Seminar Management. I want to give it the nicer title, so I can just click here and then give here a nice title like Seminar Management.  So, we do a little bit of fine-tune already. We could also, for example, delete here some of these things that we would not now need. So maybe remove a few tabs here that are just pre-generated, and we don't need. Also, we could set, for example, the Total Revenue. We could set this to read-only. So, that's you can also do here. We can set things to visible and in this case it's a field that has two fields. You can see that. The content and currencyCode. So, we'll set these two to read-only. This you do here. ReadOnly true. You see there's always nice description also, what you can do. I mean in the UI Designer, you can really do a lot of things here. And just set them to read-only. And now I also save this. And then we're mostly done. I mean now we really have most things here. We’ve created our application; we have created the UI. We fine-tuned a little bit. Now, all we need to do is to test it. And for that we need to assign our functionality to a business user, which is the next step. But this we're going to see in the next video where we're going to sign this administrator, our newly created solution, to user. And we will test it then, with Jenny.