Name: Adding a Delete Button in SAP Sales and Service Cloud
Uploaded: 2020-4-3
Duration: 259 s
Description: This video demonstrates how to enhance your solution with a delete feature in order to remove database entries. It also shows how to include an icon on the UI and link the delete action to it.

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><div>This video demonstrates how to enhance your solution with a delete feature in order to remove database entries. It also shows how to include an icon on the UI and link the delete action to it.<br></div></div></div></div></div></div></div></div>

Adding a Delete Button in SAP Sales and Service Cloud

In part 15, we're going to take a look at how you can improve AI seminar management with the delete feature. That also shows a nice icon. So in this tutorial I would like to improve a little bit. You I've you've paid for a seminar management especially for the overview. So I would like to have a delete icon here so that I can delete seminars. I would like to have a nicer idea description here. And I would like to have a search here so that I can search seminars. Here you can find where to put. So let's go and do those things. So we open our seminar management and then navigate to our w a and open this. The UI designer. So on the UI designer we go to our toolbox and we start with the delete icon for the delete icon under Layout Stick column here okay this we found on here the layout stack panel. I just drag and drop this tool here. And now we need to configure it. Silhouette stick panel can be used to display icons and have actions on them. I go to the properties of the layout stack panel and the first thing that I will do is I will add an item to it. So I have here items and here I can add an item here. This can be different fields. In our case this item should be an icon. So I will change the display type to an icon. And here now we need to choose the icon okay let's select now an icon. So we can select an icon from this default list here. But here we will not find our delete pin. I think that we want to have. So we can also type here. And that's now a secret trip. The trick I can just type delete bin here and will be the delete bin. I can trust me. You can look this up at the standardize. So also we don't really need to label here because then we would have a label in each row. So we don't want to have that. And it looks nicer. And then I just click okay. So for Z I will have an icon here already. Let's improve me this thing already a little bit. And let's rename little stick pen to something more meaningful. So I will call it just here action here because it's the delete action. And now that weekly test is already I save and activate. So there shouldn't be any functionality behind it. But we should see already the delete bin icon lets me go to the front end. So you can see here we have a nice delete bin icon already. So let's put in also some functionality behind it. So for this we will go here to action and go now to the onClick event. Where do I have it. I'm sorry. This event is in the items I forgot. So in the items on our icon here, here we have the onClick event and that's where we make a new event. And then now that we call remove row handler. And then we add here and list action list operation I said remove row from this target list here okay. And then we also need to save because for sure we need to save after removing. So it's a status there. And then this okay should be working. And let's see now if you can remove this action. One of our lines. If it is we can see currently we cannot do it. It's disabled. It's because we need to change the locking behavior of OWI, because it shouldn't be so easy to delete entries here. It's just one setting of the UI designer. So let's go back to the UI design. So here it's important we need to set in the data model on the data list. We need to set a lock behavior from automatic to edit auto. This optimistic. So then we can load the delete or save directly on the data list. So let's save and activate that check on the front end. And now we should be able to delete semi numbers. So here we go to our seminars. And let me try to delete now programing tool. Great. So now I can really delete easily. So nice here. So now there's only three seminars left. And that was how we added a delete button to our UI.