Name: Exploring UI Fine Tuning and OWL in SAP Sales and Service Cloud
Uploaded: 2020-4-3
Duration: 584 s
Description: In this video we will make our table overview appear good. We will remove the technical UUID and replace it with a better human readable ID and description. We will also include a link to our teachers that allows us to directly navigate to the associated employee. In the end, we will quickly re-name our work center view a bit nicer.

Share feedback

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

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div><div><div><div><div><div>In this video we will make our table overview appear good. We will remove the technical UUID and replace it with a better human readable ID and description. We will also include a link to our teachers that allows us to directly navigate to the associated employee. In the end, we will quickly re-name our work center view a bit nicer.</div></div></div></div></div></div></div>

Exploring UI Fine Tuning and OWL in SAP Sales and Service Cloud

In part 17, we are just going to fine tune our seminar UI so that it really looks nice for you too, and to clean up some things and make it just much nicer looking. B put some ideas away, you put some pictures on and basically link to the teacher. So we just make a lot of cleanup so that we have a very nice solution and kind of round up for our user interface. So if we want to improve a little bit more our user interface here. So we want to make it a little bit nicer here to look like so for this we use our UI designer. What we're going to do is you want to have a proper seminar here link where we can click next. We can click here. The UID would like to hi to you UID go to display. Maybe just say we don't have a name here. So it will be two columns. So just make it a little bit not nicer looking here okay. So first of all we want to have this link here clickable. So for that it's important that this field is linked to the right thing type container. So if we go to the data model you can see here the spear ID where the link is working is linked with the sync type container seminars. So now we just need to change here also the sync type mode to static because always the same link. And here select our think type. So we need to select our seminars here. And that's all we need to do in order to get a link to the seminars. Let's take a look at the front end. So now you can see here we have a link I mean I click on it. The right seminar is opening up. So we have a nice link already here. Now let's combine these two columns to make a description here on the side the user ID. So first let's hide the UID. I will just set this visibility here to false. And then this seminar. Here we would like to have an ID and a description. So for that we just go to presentation mode in description okay. That's okay. But we need to do this on the binding. So let's go here to our seminar ID. And then we should have here somewhere the data. Here we have set to fire description. And here we just select it as a name. Okay. Then we should have admin to name then. Now we don't necessarily need this name column anymore. So I just also said visibility here to false. And let's take a look at the front end okay. That looks much better. Now we see here the ID and the name we can click and open it. So the next thing I want to do I would put like some more columns here. So let me let's see what we could also add here from the data model. I guess the teacher is interesting. The total revenue we want to see later is the number of participants. Okay. So now let me also sort this year. So let me change a little with how they are sorted. So the actual test last start and the number of participants maybe here teachers important okay I think that's okay. So let's save and activate this. And let's take a look how it looks at the front end. So now we can see very nicely here we have the decent seminars. We have the seminar start end date a number of participants are here. It's not filled. So we could do this now. So we have also our search. So it looks already much more complete here. Now what I would like to have also a link on the teacher. So let's do a link now on the teacher. How we are able to link to a standard object here. So all I need to do is set here on the data model. Also the same type container. So let's go here. Let's go to the teacher. Oh which due to do I use here. Now let me check. Look the overall the data model. Teacher one okay. There was a teacher field before that we're not using anymore. So let me use this one and all I need to do is I need to set the thing type mode here or to static. And now I need to select the standard thing. Time for the employees. So let me see where this is here. And after I save and activate, I hope I could also navigate to the employee. Let's take a look. Okay. So here we have now the teachers also here. And we have nice this nice symbol. And we also get temporary and we can click on it. Unfortunately when I do this now it's not opening the right employee because I think that the UI behind is expecting the UID and not internal ID, but we have a Uuid in our association. So let's change that. And user associations. So that's a bit more that you learn. Now it's not a big deal because luckily we have the association. Let's do that now. So let's go to our bit old model. Let's choose a be our model user association to teacher. And here we select the UAD asset teacher now which is here. And let's try with this one. So I will drag and drop it. Now just somewhere here. And then I will get to update of the teacher. And then I need to also to set now here on the other side of the teacher, this one here, the same property, this, thing type navigation static. And now we choose the employee here. What is it? Okay. And let's save and activate and see if that's not working better. Okay. So here we have now the UID. Let me click on it. I can see and I can open it. And I really open to people. So this looks good I mean for sure. Now that's not a very nice name here. But luckily we can very easily put the name here. So let's go back to the UI designer, put a description here and say description only, and then we can hide our teacher field or remove it. And then I think we are done. So back here I go to the designer uid. Let me first rename it now so that we have it a nicer label there. And we call it in our case teacher. Teacher okay. Then I will go to the data model of our Uuid as a teacher, and I will bind to identify description here to the name of a teacher. So there we are also user association. And we say then we need to have in current common this is where we find the name. And we takes a business partner formatted name that should be last name, first name and so on. So that should be nice. And now because you don't want to have this, your ID displayed, we just say here now presentation mode description only. And let me hide our original teacher field here. Column visible false okay. And I think now it should look much nicer already on the front end. Let's take a look. Okay, here we go. You see, we have our seminars that we can open up here we have the teacher here is a nice simple. And we can just click on them. And then they are opening up and we can see some more details. And we can also click again to open them up completely. So I think now all UI looks really nice. I mean we have the columns that we would like to have here. We have nice links and IDs here. We have the searches here. We have. So all the functionalities that we need actually, I mean that's quite nice. I think now we could complete we added the delete button here. So I mean, for sure we could do more fine tuning of such an UI. But this is, I mean, really already a big part of it. And, you see how you can make this? We look very easily like a standard UI. You can very nicely have links to all the standard objects. And, I think now our solution is quite complete. And the next thing is we take a look at more features like web services, maybe talk about UI design. I hope until now, the seminar management, you liked it. And, you see that we are really making big steps forward here. And I hope all that is helping you to build nice and beautiful solutions. Before last minute node, I would like to change this view name here from Seminar Management view to seminars. So let's do that. Also very quickly. For this I need to open the view. Here we see UI designer. And then I need to change. He is a name seminar management view to seminars. Nothing for I need to go to edit mode first. So let's do that. And now. Seminars okay. So second activate. And then you can see here is a seminar. So click seminars. So it looks much nicer. You could also assign now for example this work center view in one of the other ones like under activities. So because you can assign your Fox interviews also under the standard book centers if you want to have well condensed. So now it looks really nice Our seminar instrument and with that we finish the video.