Skip to Content
0

Fiori elements: how to add confirmation popup

Dec 07, 2016 at 12:25 PM

839

avatar image

I have created a List Report application from Fiori elements smart template with local annotations. Then I added a custom button for the table with UI.DataFieldForAction annotation.

Requirement is to get user confirmation before executing the action on the table item.

Any suggestions how do I add a confirmation popup on the new button "Notify customer"?

Annotation for the button:

<Annotations Target="NorthwindModel.Customer"> 
<Annotation Term="UI.LineItem"> 
<Collection>
.. 
<Record Type="UI.DataFieldForAction">
<Annotation Term="UI.InvocationGrouping" EnumMember="UI.OperationGroupingType/ChangeSet"/>
<PropertyValue Property="Label" String="Notify customer"/>
<PropertyValue Property="Action" String="NorthwindModel/CustomerNotify"/>
</Record>
</Collection>
</Annotation> 
.. 
</Annotations>

Full code of the WEB IDE project is here https://github.com/oanete/ztest

Regards,

Anete

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

5 Answers

Best Answer
Young Hwan Kim Dec 14, 2016 at 06:22 AM
1

I think you can accomplish your goal by extending your app.

https://sapui5.hana.ondemand.com/#docs/guide/bee197e9ca9c485188d4ed5db9274374.html


manifest.png (34.9 kB)
controller.png (12.4 kB)
result.png (73.3 kB)
controller.png (12.4 kB)
Show 1 Share
10 |10000 characters needed characters left characters exceeded

With extension it is possible to get the confirmation popup, thanks for the suggestion.

0
Jocelyn Dart
Dec 09, 2016 at 10:14 AM
1

Hi Anete

Btw the standard delete action includes a confirmation pop-up by default.

If you want to add a pop-up for your own actions, the answer you are looking for can be found here:

https://sapui5.hana.ondemand.com/#docs/guide/8ba009d7b8434dc1a4948c9211e30c40.html

You need to add an annotation for your target and set the IsActionCritical annotation to true .. like the fragment below. Don't forget to let us know if that solved your problem.

Rgds,

Jocelyn

<Annotations Target="NorthwindModel/CustomerNotify">
        <Annotation Term="com.sap.vocabularies.Common.v1.IsActionCritical" Bool="true"/>
</Annotations>
Show 3 Share
10 |10000 characters needed characters left characters exceeded

Hi Jocelyn,

Thanks for the suggestion, but this annotation had no effect on the app. I looked also into Common vocabulary file and could not find any mention of term "IsActionCritical".

Regards, Anete

0
Anete Ozola-Bondzinska

Hi Anete

Ok I think I see what is missing ... normally when we use SAP OData Services the annotation xml is generated with a bunch of default references. These references point to the relevant vocabulary terms on the ABAP system

There's an example of the reference here: References to SAP vocabulary terms You can see the reference matching the com.sap.vocabularies.Common.V1 namespace to the vocabulary definitions in the backend ABAP system. Of course if you don't have any link to a backend ABAP system at all then that's not going to help you & you might have to look at the extensibility options instead

This is one of the traps when using non-SAP services or SAP releases thar don't meet the pre reqs. There's usually a workaround ... something for a future blog definitely. Probably after we get go the extensibility though - I'm still collecting some of these myself

If you are just trying to do this as an exercise as an example perhaps try with the publically available ES4 Gateway system or use a S/4HANA trial system instead.

Hope that helps reduce the frustrations....and of course its why I'm using a an up to spec system myself

There are plans to update ES4 soon so that will make trying these sorts of tutorials easier

Cheers

Jocelyn

0

Hi Jocelyn,

Is there any possibility to change the text in the Popup content ?

Kind Regards,

Joseph

capture.png (19.2 kB)
0
avatar image
Former Member Dec 13, 2016 at 02:46 PM
0

Hi Anete,

If NOTIFY CUSTOMER is a button then u can write code for a dialog after pressing the button function.

Thanks,

Deepak Raj.

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Dec 08, 2016 at 02:22 AM
0

Hi Anete,

This is very simple please refer below link for sample application with the complete code.

https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.m.sample.DialogConfirm/preview

UI5 Code:

<Button text="Approve" width="250px" press="onApproveDialog" />

JavaScript Code:

onApproveDialog: function () {			
var dialog = new Dialog({ title: 'Confirm',				
                          type: 'Message',				
                          content: new Text({ text: 'Are you sure you want to submit your shopping cart?' }),				beginButton: new Button({ text: 'Submit', press: function () { MessageToast.show('Submit pressed!');			 dialog.close(); } }), endButton: new Button({ text: 'Cancel', press: function () {						dialog.close(); } }), afterClose: function() { dialog.destroy(); } });
dialog.open(); }, 

Thank you.

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

There is no way to add a ui contol to a smart template(like List Report).

0

Seungchul, what makes you say this?

0
Neil Ward Aug 03, 2017 at 12:35 PM
0

Hi,

I have the same requirement .. I have defined my action in a BOPF and then used the CDS view annotation to render it in the UI, I'd like to have a popup to confirm the action.

Can this be done with CDS annotations or does it have to be done in the WEBIDE?

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Could you find any solution to this Neil? Is it possible?

Working on similar requirement.

0