Fiori elements: how to add confirmation popup

[anete]

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

[younghwan_kim · Accepted solution]

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

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

[anete · Accepted solution]

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

[Jocelyn_Dart]

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>

[anete]

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

[Jocelyn_Dart]

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

[Joseph_BERTHE]

Hi Jocelyn,

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

Kind Regards,

Joseph

[ivan_gomez2]

Hello Joseph,

For changing the text in the popup you need to edit file i18n.properties adding following code:

#XMSG: Messagebox text for confirming an action question 
ACTION_CONFIRM|yourfunctionimport = Text to display in popup

Regards,

Iván.

[smith_john]

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?

[GK817]

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

Working on similar requirement.

[former_member203031]

Hi Anete,

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

Thanks,

Deepak Raj.

[former_member123006]

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.

[former_member232384]

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

[anete]

Seungchul, what makes you say this?